本文共 6990 字,大约阅读时间需要 23 分钟。
SASS是Syntactically Awesome Stylesheete 的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“css预编译”。它的主要设计思想是让我们可以按照编程的思路编写自己的样式,然后通过“编译器”生成我们所需要的css文件。sass并不是css的替代品,它只是让css变得更加高效、可维护,也不必去修改编译后的css文件。
一、安装sass
sass是基于ruby的产物,因此在安装sass前需要先安装ruby:。下载对应系统的版本,一路next即可。安装完成后,在命令行输入ruby -v
可查看ruby版本。
$ ruby -vruby 2.0.0p451 (2014-02-24) [x64-mingw32]
安装完ruby后,在命令行输入gem install sass
即可安装sass,安装完后可通过sass -v
来查看sass版本。
$ sass -vSass 3.3.5 (Maptastic Maple)
sass有两种可选的文件后缀.sass
和.scss
,两者的主要区别就是在书写格式上。
.sass
文件是缩进式的写法,对格式要求比较严谨,末尾不能有分号
.test margin: 5px 10px font-size: 14px color: #333
.scss
文件的写法和css一致
.test { margin: 5px 10px; font-size: 14px; color: #333;}
SASS文件的后缀为.scss,可以使用下面的命令将scss文件编译为最终使用的css文件:
sass demo.scss
或者指定css文件名
sass demo.scss product.css
也可以设置输出css文件的风格
sass --style compressed test.scss test.css
输出样式的风格可以有四种选择,默认为nested
sass --watch test.scss:test.css
sass --watch src:dest
SASS支持变量的定义,你可以使用$来定义一个变量,这样我们就可以把一些公用的样式定义为一个变量,在使用时直接引用即可:
$white:#fff;$font12:12px;.menu{ color: $white; font-size: $font12;}
编译后:
.menu { color: white; font-size: 12px;}
如果在字符串中引用变量,则需要将变量名写在#{}
中。如:
$img-dir: "public/images/";.test { background-image: url(#{$img-dir}icon.png);}
可以设置默认变量提供SASS默认值,它的含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用默认值。这在书写sass库文件时非常有用。设置默认变量的方法也非常简单,只需在变量值后加上!default
即可。
$color: #ccc;$color: #000 !default;p { color: $color;}
SASS还支持多值变量
$colors: #fff #ccc #999 #666 #333;
我们可以通过length($colors)
来获取多值变量的值的个数,通过nth($colors, index)
来获取第index
个位置的值。ps: index
的取值范围为1到length($colors)
。
$colors: #fff #ccc #999 #666 #333;p::after { content: "#{length($colors)}"; // 5 color: nth($colors, 1); // #fff}
SASS支持两种嵌套方式:选择器嵌套和属性嵌套。嵌套极大程度上降低了选择器名称和属性的重复书写。
.header{ .logo{ display: block; border: none; } ul li{ line-break: normal; }}
编译后:
.header .logo { display: block; border: none;}.header ul li { line-break: normal;}
也可以通过&来表示父元素选择器,比如我们声明一个a标签的样式:
a{ text-decoration: none; &:hover{ color: #007998; }}
编译后:
a { text-decoration: none;}a:hover { color: #007998;}
h3{ font:{ size:26px; weight:normal; family:arial }}
编译后:
h3 { font-size: 26px; font-weight: normal; font-family: arial;}
css有一个不太常用的特性,即@import
导入功能,它允许在一个css文件中导入其他css文件。然而,结果是只有执行到@import
规则时,浏览器才会去下载其他css文件,这会导致页面样式加载特别慢,从而容易出现页面闪的问题。
sass也有@import
导入规则,与css不同的是,sass中的@import
规则会在生成css文件时,把相关的文件导入合并成一个文件,而无需浏览器去下载其他的文件。另外在被导入文件中定义的变量等也可以在导入文件中正常使用。
在使用@import
导入sass文件时,可以省略sass文件的后缀名.sass
或.scss
,例如:
- a.scss body { background-color: #f00; }- style.scss @import "a"; div { color: #333; }
编译后的style.css
文件内容如下:
body { background-color: #f00;}div { color: #333;}
如果你是编译整个sass目录的话,会发现一个问题,在生成style.css
的同时也生成了一个a.css
,这个结果并不是我们想要的,a.scss
作为一个中间文件,一般情况下是不需要在生成css的。sass开发者也考虑到了这点,我们只需要在文件名前加上下划线_
,sass编译的时候就会忽略这个文件,@import
引用的时候可以加下划线引用,也可以不加。还是上面的例子,我们可以进行修改:
- _a.scss body { background-color: #f00; }- style.scss @import "a"; div { color: #333; }
当然,如果你需要像原生css那样去导入其他的css文件,也是可以的,如果符合以下三条中的任意一种情况,sass就会认为你想用css原生的@import
:
.css
结尾@import url(...)
方式去导入文件 sass支持原生css的注释格式/* 注释内容 */
,同时也支持类似js中的单行注释// 注释内容
。对于单行注释,sass会在生成的css文件中删除单行注释,只保留css原生的注释内容,例如:
.test { margin: 10px; // 这块注释不会出现在生成的css文件中 color: #333; /* 这块注释会出现在生成的css文件中 */}
当然,如果你把多行注释写在原生css不允许的地方时,在编译生成css文件时,sass会将这些注释抹掉。例如:
.test { padding /* 这块注释不会出现在生成的css文件中 */: 10px margin: 5px /* 这块注释也不会出现在生成的css文件中 */ 10px;}
SASS中,你可以对属性值进行简单的运算, 比如:
$white:#fff;$font12:12px; .newsize{ font-size: $font12 + 2; color:$white - #007998; }
编译后生成:
.newsize { font-size: 14px; color: #ff8667;}
当然除了最基本的加减乘除运算函数,SASS还提供了很多其他有趣的函数,像我们最常用的颜色函数lighten(减淡)和darken(加深)。
.lgt{ color: lighten($black,10%); background-color: darken($white,50%);}
编译后可以得到一个运算好的颜色值:
.lgt { color: #1a1a1a; background-color: gray;}
更多的函数信息,请查看
sass中的混合器一般用来解决大段代码重复的问题。比如我们经常使用的单行文本溢出显示省略号,可以使用@mixin
来定义一个简单的混合器:
@mixin ellipsis { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
然后在需要用到的地方我们可以通过@include
来使用这个混合器:
.text { @include ellipsis;}
输出的css为:
.text { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
混合器不仅可以实现代码的重复利用,还可以传递参数,根据需要生成不同的css。这在跨浏览器的css3
兼容方面尤为好用。例如:
@mixin radius($value) { -moz-border-radius: $value; -webkit-border-radius: $value; border-radius: $value;}
使用时,我们只需传入相应的参数值即可。
.test { @include radius(3px);}
生成的css为:
.test { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
另外我们还可以给参数提供默认值,如:
@mixin link-colors($normal: #333, $hover: $normal, $visited: $normal) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; }}
调用时,可以传参,也可以不传:
.text { @include link-colors;}.error { @include link-colors(red);}a { @include link-colors(blue, green, yellow);}
生成的css为:
// 鉴于篇幅问题,已将生成的代码改成单行.text { color: #333;}.text:hover { color: #333;}.text:visited { color: #333;}.error { color: red;}.error:hover { color: red;}.error:visited { color: red;}a { color: blue;}a:hover { color: green;}a:visited { color: yellow;}
7、继承
SASS通过@extend实现继承
.pclass{ border: 4px solid #ff9aa9;}.subclass{ @extend .pclass; border-width: 2px;}
编译后:
.pclass, .subclass { border: 4px solid #ff9aa9;}.subclass { border-width: 2px;}
这种继承虽然方便,但是也有一定的弊端。比如我们仅仅想继承.pclass
类中的样式,而实际并不需要.pclass
的这个类。换句话说就是我们的html中并没有class="pclass"
这样的代码,这样的话生成的css中的.pclass
其实就是多余的。
对于这种情况,sass
3.2.0及以后的版本也给我们提供了解决方案:占位选择器%。
占位选择器的优势在于:声明之后,如果不调用,则不会产生类似.pclass
的多余css代码。占位选择器通过%
标识来定义,也是通过@extend
来调用。
%pclass{ border: 4px solid #ff9aa9;}.subclass{ @extend %pclass; border-width: 2px;}
生成的css为:
.subclass { border: 4px solid #ff9aa9; border-width: 2px;}
sass中的@if
语句和js中的if
很相似。可以单独使用,也可以配合@else
使用。
$lte7: true; // 是否支持ie7以下版本$theme: yellow;.clearfix { @if $lte7 { zoom: 1; } &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }}body { @if $theme == red { background: rgba(255, 0, 0, 0.5); } @else if $theme == yellow { background: rgba(255, 255, 0, 0.5); } @else if $theme == black { background: rgba(0, 0, 0, 0.5); }}
生成css为:
.clearfix { zoom: 1;}.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}body { background: rgba(255, 255, 0, 0.5);}
三目运算符的语法为:@if($condition, $condition_true, $condition_false)
,例如:
$fontBold: true;.title { font-weight: if($fontBold, bold, normal);}
生成的css为
.title { font-weight: bold;}
SASS工具:
转载地址:http://yytgi.baihongyu.com/