Sass是一种css的扩展,可以使得css的编码更加强大和优雅。sass支持使用变量、条件、循环、嵌套、继承、mixin、函数等强大的功能。
Sass特点:
- 对css完全兼容
- 语言扩展,例如变量、嵌套、mixins
- 拥有大量函数,可以用来操作颜色及其他属性值
- 高级特性如control directives
- 可以自定义格式化输出
sass有两种语法格式,分别以sass和scss为后缀名。scss语法一般css相同,以大括号分隔作用域,以分号来分隔属性;而sass则以缩进分隔作用域,换行分隔属性。
//scss syntax
div{
color: #ccc;
}
//sass syntax
div
color: #ccc
两种语法之间可以用sass-convert命令行来转换
# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass
1. 使用Sass
sass是用ruby语言写的,因此在安装sass之前首先需要安装ruby,然后就可以用以下命令安装:
gem insall sass
将sass文件转换为css文件:
sass input.scss output.css
也可以监听sass文件的变化,并实时转换为css:
sass --watch input.scss:output.css
如果想要监听整个文件夹中的内容,也可以使用如下命令:
sass --watch app/sass:public/stylesheets
2. css扩展
2.1 嵌套选择器
sass允许嵌套使用css选择器,如下所示:
.out{
.inner{
color:#ccc;
}
}
将被编译成
.out .inner {
color: #ccc;
}
2.2 嵌套属性
css中有一大类属性是具有命名空间的,例如border-color、border-radius、border-image等。sass提供了更简洁的方法用于对这类属性的设置:
#main{
border:{
color: #ccc;
radius: 3px;
width: 1px;
}
}
将被编译成
#main {
border-color: #ccc;
border-radius: 3px;
border-width: 1px; }
2.3 &:引用父选择器
& 表示对一个父选择器的使用,有时候使用&会使得样式表达更加简介,例如使用hover属性时:
a{
color:#1b6d85;
&:hover{
color: #de1d18;
}
}
将被编译成
a {
color: #1b6d85; }
a:hover {
color: #de1d18; }
&也能添加后缀来构造新的选择器,例如:
#main{
color:#ccc;
&-side{
color:#aaa;
}
}
将被编译成
#main {
color: #ccc; }
#main-side {
color: #aaa; }
3. 计算
3.1 变量
sass中加入了变量,变量以美元符号$开头,例如:
$gray:#ccc;
并使用$来引用变量
div{
color: $gray;
}
如果变量在选择器外面定义,则属于全局变量,如果在选择器内部定义,则只能在该选择器作用范围内使用。当然也可以使用!global来将其声明为全局变量:
.global{
$blue:#00f !global;
}
3.2 计算
SassScript支持对数值进行算数操作,包括加(+)、减(-)、乘(*)、除(/)、取余(%)。算数操作可以保留单位,比如下面两种加法都是合法的:
.operation{
height:1+1px;
width:1px+1px;
}
将编译成
.operation {
height: 2px;
width: 2px; }
但是需要注意的是对于不同单位的数值(如px和em)不能进行算数操作。
对于乘法来说,如果两个数值具有相同的单位,相乘时会生成单位的平方,但是在css中单位的平方是不允许的。
而对于除法来说,由于css中已经存在除法表达式,如10px/2px,这种表达式在输出为css不会被计算成结果,除非由括号包围,正确的使用方式是10px/2。
对于减法,使用负号(-)时需要在两边有空格。
除此之外,算数操作中也可以使用变量。
.operation{
$width:5px;
width: $width*2;
height:2*2px;
font-size: 5px - 1px;
margin-bottom: (10px/5);
margin-left: (10px/5px);
margin-right: 10px/5px;
margin-top: 2px+10px/5px;
}
将被编译成
.operation {
width: 10px;
height: 4px;
font-size: 4px;
margin-bottom: 2px;
margin-left: 2;
margin-right: 10px/5px;
margin-top: 4px; }
对于颜色值,rgb三个值是分开计算的,例如:
.color{
color: #001122+#002244;
}
将被计算成
.color {
color: #003366; }
4. 表达式与函数
4.1 条件语句
条件语句以@if、@else if、@else为关键字
div {
@if ($width>2px) {
height: 5px;
} @else {
height: 10px;
}
}
将被编译成
div {
height: 5px; }
4.2 循环语句
循环语句有三种形式:@for、@each、@while,@for和@while与普通循环相同,@each用于遍历list和map。
@for
@for有两种形式,分别是from (start) through (end)和from (start) to (end),其区别是前者的范围是从start到end,后者的范围是从start到end-1
@for $var from 1 to 3{
.item-#{$var}{
width: 2px*$var;
}
}
将被编译成
.item-1 {
width: 2px; }
.item-2 {
width: 4px; }
@while
$var:3;
@while $var>0{
$var : $var - 1;
.item-#{$var}{
width:$var px;
}
}
将被编译成
.item-2 {
width: 2 px; }
.item-1 {
width: 1 px; }
.item-0 {
width: 0 px; }
@each
@each可用于遍历<list or map>中的变量
//遍历list
@each $var in main, sider, foot {
.#{$var}-item {
color: #ccc;
}
}
将被编译成
.main-item {
color: #ccc; }
.sider-item {
color: #ccc; }
.foot-item {
color: #ccc; }
//遍历map
@each $key, $value in (main:5px, sider:10px, foot:5px) {
.#{$key} {
height: $value;
}
}
将被编译成
.main {
height: 5px; }
.sider {
height: 10px; }
.foot {
height: 5px; }
4.3 函数
sass中使用@function定义函数,使用@return返回值,例如:
@function my_add($var1,$var2){
@return $var1 + $var2;
}
div{
width: my_add(1px,2px);
}
将被编译成
div {
width: 3px; }
需要注意的是:函数定义名称中的下划线(_)和横线(-)是等同的,即上面的使用my-add(1px,2px)也是可以的。
5. 样式重用
5.1 @import
使用@import可以导入其他的sass文件,例如想要导入一个foo.scss文件,由于导入的默认后缀名为.scss和.sass,因此下面两中方式均可:
@import "foo.scss";
或
@import "foo";
虽然@import一般都在文档的头部使用,但也可以在css规则中使用,例如
在一个for-import.scss文件中包含
.im-test{
height: 10px;
}
使用
div{
@import "for-import";
}
将被编译成
div .im-test {
height: 10px; }
5.2 @extend
使用@extend可以继承另一个选择器的属性,例如happy类定义了基本属性,而very-happy类在具有happy类属性的同时还增加其他属性:
.happy{
height: 50px;
width: 50px;
}
.very-happy{
@extend .happy;
background-color: #5bc0de;
}
将被编译成
.happy, .very-happy {
height: 50px;
width: 50px; }
.very-happy {
background-color: #5bc0de; }
@extend的实际原理是所有继承的选择器出现的地方都应用当前选择器,例如下面所示,.happy下面的div、 hover属性都会被.very-happy继承:
.happy{
height: 50px;
width: 50px;
}
.happy div{
border: 1px;
}
.happy:hover{
color: #de1d18;
}
.very-happy{
@extend .happy;
background-color: #5bc0de;
}
将被编译成
.happy, .very-happy {
height: 50px;
width: 50px; }
.happy div, .very-happy div {
border: 1px; }
.happy:hover, .very-happy:hover {
color: #de1d18; }
.very-happy {
background-color: #5bc0de; }
此外@extend也支持多重继承、链式继承,在这里不作多述。
5.3 @mixin
@mixin可以用于定义一些可重用的样式,并用@include来引用这些样式,例如:
@mixin title{
font-size: 18px;
color: #222;
}
.top-title{
@include title;
margin: 10px;
}
将被编译成
.top-title {
font-size: 18px;
color: #222;
margin: 10px; }
@mixin似乎与@extend非常相似,但@mixin强大的地方在于它可以传递参数,类似于函数:
@mixin title($color){
font-size: 18px;
color: $color;
}
.top-title{
@include title(#222);
margin: 10px;
}
将被编译成
.top-title {
font-size: 18px;
color: #222;
margin: 10px; }