SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
SASS 官网介绍:
sass is the most mature(成熟的),stable(稳定的),and powerful professional grade CSS extension language in the world.
官方文档:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
初学sass 遇到的最大阻碍可能是:需要搭建Ruby的运行环境和需要用命令行,其实这都非常简单。
一、安装1、安装Ruby
SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。
安装SASS请参考SASS官方网站: http://sass-lang.com/install,windows下安装ruby:rubyinstaller.org。
安装时注意一点:勾选Add Ruby executables to your PATH,添加Ruby可执行路径到环境变量再安装。
安装成功Dos窗口输入ruby -v会出现版本信息。
2、安装sass
假定你已经安装好了Ruby,接着在命令行输入下面的命令:gem install sass
安装成功输入sass -v可以看到版本信息。
二、使用
1、编译
Note:注意sass的文件名后缀是scss而不是sass。
将style.scss编译成css
sass style.scss
将style.scss编译后保存成css文件
sass style.scss style.css
将style.scss编译后保存成压缩过的css文件
sass <strong>--style compressed</strong> style.scss style.css
--style控制编译风格,可选参数如下
sass监听文件或目录,源文件有变动,自动编译。
// watch a filesass --watch input.scss:output.css// watch a directorysass --watch app/sass:public/stylesheetss
2、语法
2.1、注释
和less一样,sass有两张注释
// 单行注释,不会作为最终输出/* 多行注释,以原生CSS的/*注释....*/形式作为最终输出 */
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*! 重要注释!*/
2.2、变量
一般会把颜色,字体,将来会重用的css值存为变量,方便统一修改和维护。
//定义变量$primary-color:#333;//变量调用body{ color:$primary-color;}
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
$side : left;.rounded{ border-#{$side}-radius:5px;}
2.3、嵌套
像html标签嵌套一样进行选择器嵌套写css,但是在生成css时有利有弊。
以下经典用法。
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}
会生成:
nav ul { margin: 0; padding: 0; list-style: none; }nav li { display: inline-block; }nav a { display: block; padding: 6px 12px; text-decoration: none; }
属性也可以嵌套,比如border-color属性如下,border后面必须加冒号。
p{ border:{ color:red; }}
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
a{ &:hover{color:red;}}
2.4、Less css片段和引入
目的:方便模块化和管理,小模块可维护性好。最终编译成一个css文件,这点比纯css的@import好。
弊端:多一个@import就多一个http请求。
片段命名:_partial.scss,引入用@import。
Demo:将_reset.scss import到base.scss。
_reset.scss如下
// _reset.scsshtml,body,ul,ol { margin: 0; padding: 0;}
base.scss如下
// base.scss@import 'reset';<br />body { font: 100% Helvetica, sans-serif; background-color: #efefef;}
@import 'reset'即可。
2.5、mixin 重用代码块
在sass中可用定义重用的代码块,且可传参数,方便日后根据需求调用。
定义:通过@minxin name即可定义一个重复利用的样式。
调用:@include name
demo:
// mixin@mixin box($H:30px,$col:red){ height:$H; background-color:$col;}div.box{ @include box; //使用默认值}div.box1{ @include box(50px,blue); //传参}
编译结果:
div.box { height: 30px; background-color: red; }div.box1 { height: 50px; background-color: blue; }
css中有一些浏览器兼容性的代码,一些css3私有前缀等,此时使用mixins非常便捷,一个经典例子border-radius如下。
@mixin border-radius($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}.box{@include border-radius(10px);}
2.6、继承
继承让一个选择器的样式被另一个选择器复用和覆盖。是一个DRY的语法,也最sass中有用的语法之一。
语法:@extend 选择器
demo:一系列提示信息。
.message{ border:1px solid #ccc; padding:10px; color:#333;}.success{ @extend .message; border-color:green;}.error{ @extend .message; border-color:red;}.warning{ @extend .message; border-color:yellow;}
编译后的css【继承实现了css组合声明】
.message, .success, .error, .warning { border: 1px solid #ccc; padding: 10px; color: #333; }.success { border-color: green; }.error { border-color: red; }.warning { border-color: yellow; }
2.7、运算符
包括+,-,*,、,%。
demo:计算aside和article的宽度。
.container{ width:100%;}article[role="main"]{ float:left; width:600px/960px*100%;}aside[role="complimentary"]{ float:right; width:300px/960px*100%;}
编译后css
.container { width: 100%; }article[role="main"] { float: left; width: 62.5%; }aside[role="complimentary"] { float: right; width: 31.25%; }
2.8、颜色
sass中集成了大量的颜色函数,让生成颜色更加简单
lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c
demo:
$linkColor: #08c;a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%); }}
编译成css
a { text-decoration: none; color: #08c; }a:hover { color: #006699; }
3、高级语法
3.1、条件
if判断何种条件用何种样式。
p{ @if 1+1==2{border:1px solid red;} @if 5<2 {border:2px dotted red;}}
if,else配合使用。
demo:判断颜色中亮度大于30%,设置背景色为黑色,否则为白色。
$color : #1875e7;p{ @if lightness($color)>30%{ background-color:#000; }@else { background-color:#fff; }}
备注:lightness($color):从一个颜色中获取亮度(lightness)值;
3.2、 循环语句
for循环
@for $i from 1 to 10{ .border-#{$i}{ border:#{$i}px solid blue; }}
编译生成如下css
.border-1 { border: 1px solid blue; }.border-2 {border: 2px solid blue; }.border-3 {border: 3px solid blue; }.border-4 {border: 4px solid blue; }.border-5 {border: 5px solid blue; }.border-6 {border: 6px solid blue; }.border-7 {border: 7px solid blue; }.border-8 {border: 8px solid blue; }.border-9 {border: 9px solid blue; }
while循环
$i : 6;@while $i > 0{ .item-#{$i} {width:2em * $i;} $i : $i - 2;}
编译成css
.item-6 {width: 12em; }.item-4 {width: 8em; }.item-2 {width: 4em; }
each遍历
@each $member in a,b,c,d{ .#{$member}{ background-image:url("images/#{$member}.jpg"); }}
编译成css
.a {background-image: url("images/a.jpg"); }.b {background-image: url("images/b.jpg"); }.c {background-image: url("images/c.jpg"); }.d {background-image: url("images/d.jpg"); }
3.3自定义函数
sass可自定义函数。
@function double($n){ @return $n * 2;}#sidebar{ width:double(5px);}
编译后css
#sidebar {width: 10px; }
资源链接:
http://sass-lang.com/guide
http://www.w3cplus.com/sassguide/
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:有问题欢迎与我讨论,共同进步。

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 Mac version
God-level code editing software (SublimeText3)

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Notepad++7.3.1
Easy-to-use and free code editor

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
