愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

Sass学习总结

一、什么是Sass

Sass(Syntactically Awesome StyleSheets),是一个针对CSS扩展的工具。旨在解决大型项目中CSS难以维护的问题。Sass中引入了变量嵌套规则mixins导入等众多功能,且完全兼容CSS语法。使得构建大型样式表体验很好

二、Sass的两种语法

Sass有两种语法:

  • SCSS(Sassy CSS),CSS3语法的扩充版本。SCSS理解大多数CSS hacks及浏览器专属语法(如IE古老的filter语法)。SCSS语法的文件后缀为.scss
  • Sass,缩排语法,以缩进来表达嵌套层级,也不需要使用分号,而是用换行来分隔。以.sass为后缀

SCSS和Sass是可以互相转换的,如:

# SCSS -> Sass
sass-convert style.scss style.sass
# Sass -> SCSS
sass-convert style.sass style.scss


三、使用Sass

1、安装

安装使用 gem install sass 安装即可

2、编译

1)使用sass input.scss output.css的形式,编译生成CSS文件
2)使用sass --watch input.scss:output.css,监视文件变更,自动生成CSS文件
3)还可以监视整个文件,如sass --watch app/sass:public/stylesheets
注意:Sass提供了4个编译风格的选项:

  • nested 嵌套缩进的CSS代码,默认值
  • expanded 没有缩进的、扩展的CSS代码
  • compact 简洁格式的CSS代码
  • compressed 压缩后的CSS代码(生产环境中我们更喜欢用这个)

配置形式如:sass --style compressed input.scss output.css

四、Sass的语法

1、变量

变量形如$varname: value,如:

$blue: #36C;
div {
    color: $blue;
}

也可以把变量写进字符串中,但是需要使用#{$value}的形式,如:

$flex: start;
body {
    display: flex;
    justify-content: flex-#{$flex};
}

2、计算

在Sass中,可以使用算式,如:

$pd: 5px;
div {
    width: (100px/3);
    margin: 1px + 2px;
    padding: $pd * 0.5;
}

3、嵌套

Sass中,可以进行选择器的嵌套,如:

div span { color: #F00 }
div em { font-weight: bold }

可以使用Sass描述为:

div {
    span {
        color: #F00;
    }
    em {
        font-weight: bold
    }
}

此外,属性也可以嵌套,如以下的CSS:

div {
    border-color: #000;
    border-radius: 5px;
}

可以写成:

div {
    border: {
        color: #000;
        radius: 5px;
    }
}

需要注意的是,公共属性的前缀后面需要有:
嵌套写法中,使用&来引用父级元素,如a:hover可以描述为:

a {
    &:hover { color: #F00 }
}

4、注释

Sass支持两种注释风格:

  • 和CSS兼容的多行注释,如/* 注释内容 */,会保留到编译后的文件
  • 单行注释 // 注释内容,编译后不会保留

注意: 使用/*! 注释内容 */,即使在--style compressed模式下,也会保留

5、继承

可以使用@extend来继承另一个选择器的样式,如以下的CSS样式:

.nav {
    display: block;
    font-weight: bold;
}

.nav2 {
    display: block;
    font-weight: bold;
    color: #F00;
}

可以使用Sass改写为:

.nav {
    display: block;
    font-weight: bold;
}

.nav2 {
    @extend .nav;
    color: #F00;
}

6、Mixin

类似于C语言中的,是可以重用的代码块。如:

@mixin left {
    float: left;
    margin-left: 10px
}

div {
    @include left;
}

即,使用@mixin来定义一个宏,使用@include来使用一个宏
和C语言的宏可以传入参数相似,Mixin也可以传入参数,如:

@mixin radius($val) {
    border-radius: $val;
    -moz-border-radius: $val;
    -webkit-border-radius: $val;
} 

div {
    @include radius(10px);
}

编译后得到:

div {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

7、颜色函数

Sass提供了内置的颜色函数,可以用来生成系列颜色,如:

  • lighten(#000, 10%)
  • darken(#999, 10%)
  • grayscale(#36C)
  • complement(#36C)

8、插入文件

1)使用@import命令来插入文件,如果文件的后缀是.scss文件(如:@import "path/file.scss"),则把文件内容插入
2)如果是.css文件,则相当于CSS的@import命令

9、条件语句

条件语句有@if@else,如:

p {
    @if 1+1 == 2 { border: 1px solid #000 }
    @if 1+1 != 2 { border: 1px dashed #000 }
}

p {
    @if 1+1 == 2 {
        border: 1px solid #000
    } @else {
        border: 1px dashed #000
    } 
}

10、循环语句

1)支持for循环,如:

@for $i from 1 to 10 {
    .box-#{$i} { color: #F00; }
}

2)支持while循环,如:

$i: 5;
@while $i > 0 {
    .box-#{$i} { color: #F00; }
    $i: $i - 1;
}

3)支持迭代,如:

@each $x in pic1, pic2, pic3 {
    .#{$x} {
        background: url('image/#{$x}.png');
    }
}

11、自定义函数

可以使用@function关键字来定义函数,如:

@function square($n) {
    @return $n * $n;
}

div {
    width: #{square(10)}px;
}