SASS/SCSS入门笔记

什么是SASS？

SASS(Syntactically Awesome Stylesheets)是一种动态样式语言，为CSS融入了编程元素，提供了很多便利的写法，使得CSS的开发变得简单、可维护。先来回顾一下CSS，接触过WEB开发的同学，肯定都了解CSS（级联样式表）。通常，我们使用CSS定义页面需要的样式规则，然后为页面中的目标元素设置或者更改样式。作为一种样式表语言，CSS旨在方便的分离设计和内容展现，便于我们去维护页面的样式。

然而对于大部分编程人员来说，写css样式往往是一件非常痛苦的事情。他们会感觉到各种约束，为什么我不能定一个变量来避免那些类似“变量”的重复书写？为什么我不能继承上个class的样式定义？...SASS正是帮编程人员解开了这些疑惑，让css看起来更像是一门编程语言。

sass-logo-wall.jpg

到底是SASS还是SCSS？

SASS最初的语法规则是缩进语法，它没有括号、分号、使用两个空格缩进来定义代码的嵌套方式，该语法形式的文件以 .sass 为后缀名。

然而SASS的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到SASS里面，因此SASS语法进行了改良，SASS 3就变成了SASS(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进，文件以 .scss 为后缀名。

So，到底是用SASS还是SCSS，各位同学依个人口味酌量添加~

安装

SASS基于Ruby语言开发而成，因此安装SASS前需要安装Ruby。ruby安装完成后，我们就可以安装SASS了，命令如下：

gem install sass

安装完后，验证下是否安装成功，我们继续输入如下命令：

sass -v

如安装成功后，会显示当前SASS的版本号：

Sass 3.x.x (Selective Steve)

常用命令

无论是SASS还是SCSS都支持CSS的写法，个人还是习惯SCSS的语法规则。

将SCSS文件转译成CSS文件，命令如下：

sass base.scss base.css

SASS提供四种编译风格：

• nested：嵌套缩进的css代码（默认）；

• expanded：没有缩进的、扩展的css代码；

• compact：简洁格式的css代码；

• compressed：压缩后的css代码；

生产环境当中，一般使用最后一个选项，例：

sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

// 监听一个SASS文件sass --watch input.scss:output.css// 监听文件夹下面的SASS文件sass --watch app/sass:public/stylesheets

更多命令可参考SASS的帮助选项，命令行内输入sass -h即可。

基本语法规则

变量

SASS要求变量需要以$开头声明，如下：

// 定义变量$var : left;
div {     float : $var;
 }

// 编译后
div {    float : left;
}

变量名中不区分下划线和中划线，如：

// 变量名中含有下划线或中划线$margin-left : 20px;
div {
    margin-left : $margin_left;
}// 编译后div {
    margin-left : 20px;
}

字符串中引用变量，需要用#{}将变量包起来引用，如下：

// 字符串中引用变量$right : 20;
.mr-#{$right} {
    margin-right : #{$right}px;}// 编译后.mr-20 {
    margin-right : 20px;
}

注释

SASS共有两种注释风格：

• 标准的CSS注释 /* comment */ ，会保留到编译后的文件；

• 单行注释 // comment，只保留在SASS源文件中，编译后被省略；

嵌套

我们之前在维护CSS文件的时候，一定遇到过这种情况。当我们写后代选择器时，需要指定父选择器，同样的父选择器会重复写好多次，比如：

#content article h1 { color : #333 }#content article p { margin-bottom : 1.4em }#content aside { background-color : #EEE }
...

在SASS里面支持嵌套的方式，规避了上述问题，并且提高了代码的可读性，上例中代码可以在SASS中定义如下：

// 嵌套CSS规则#content {
    article {
        h1 {
            color : #333;
        }
        p {
            margin-bottom : 1.4em;
        }
    }
    aside {
        background-color : #EEE;
    }
}

在嵌套规则中，我们可以用&来表示父选择器的引用，往往在一些伪类样式中会用到，例如：

// 父选择器标识符article a { 
    color : blue; 
    &:hover { color : red }
}// 编译后article a { 
    color : blue;     
}

article a : hover { 
    color : red;  
}

除了选择器的嵌套，SASS中还支持属性的嵌套，如下：

// 属性嵌套nav { 
    border : 1px solid #ccc { 
        left : 0px; 
        right : 0px; 
    }
}// 编译后nav { 
    border : 1px solid #ccc; 
    border-left : 0px; 
    border-right : 0px;
}

@import 导入

@import命令，用来导入外部文件：

@import "path/filename.scss";

如果插入的是.css文件，则等同于css的import命令：

@import "foo.css";

混合器

SASS中还提供一种混合器（mixin），它可以帮我们规避大段样式的重用，混合器通过@mixin标识声明，示例如下：

// 混合器示例@mixin rounded-corners { 
    -moz-border-radius : 5px; 
    -webkit-border-radius : 5px; 
    border-radius : 5px;
}

notice { 
    background-color : green; 
    border : 2px solid #00aa00; 
    @include rounded-corners;
}// 编译后.notice { 
    background-color : green; 
    border : 2px solid #00aa00; 
    -moz-border-radius : 5px; 
    -webkit-border-radius : 5px; 
    border-radius : 5px;
}

混合器支持我们传入自定义参数和设置默认参数，当设置默认参数时使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，例：

// 带参数的混合器@mixin link-colors ( 
    $normal, 
    $hover: $normal, 
    $visited: $normal 
) { 
    color: $normal; 
    &:hover { color: $hover; } 
    &:visited { color: $visited; }
}

a {
    @include link-colors(red);
}// 编译后a { 
    color: red; 
    &:hover { color: red; } 
    &:visited { color: red; }
}

@extend 继承

SASS中支持选择器的继承，通过@extend关键字实现，例如：

// 选择器的继承.class1 {
    background-color : #fff;}

.class2 {
    @extend .class1;
    color : black;
}// 编译后.class1 {
    background-color : #fff;}

.class2 {
    background-color : #fff;
    color : black;
}

通过继承的实现，往往可以精简我们的css文件。

条件分支

@if可以用来判断：

p {
　　@if 1 + 1 == 2 { border : 1px solid; }
　　@if 5 < 3 { border : 2px dotted; }
}// 编译后p {
    border : 1px solid; 
}

同时还支持@else命令：

body {
    @if 1 > 0 {
　　    background-color :  #000;
    } @else {
　　    background-color :  #fff;}// 编译后body {
    background-color :  #000;}

循环

SASS支持for循环和while循环：

// for循环@for $i from 1 to 3 {
　　.border-#{$i} {　　　　border: #{$i}px solid blue;　　}
}// while循环$i : 1;
@while $i < 3 {
　　.border-#{$i} {　　　　border: #{$i}px solid blue;　　}
　　$i: $i + 1;
}// 编译后.border-1 {
　　border: 1px solid blue;
}

.border-2 {
　　border: 2px solid blue;
}

.border-3 {
　　border: 3px solid blue;
}

each命令用来遍历指定参数集合：

@each $member in a, b, c {
　　.#{$member} {　　　　background-image: url("/image/#{$member}.jpg");
　　}
}

// 编译后
.a {
　　background-image: url("/image/a.jpg");
}

.b {
　　background-image: url("/image/b.jpg");
}

.c {
　　background-image: url("/image/c.jpg");
}

自定义函数

SASS允许用户编写自定义函数，用@function声明，可以传递参数或者设置默认参数，@return返回处理结果：

// 自定义函数@function double($n:5px) {
　　@return $n * 2;
}#sidebar {　　width: double();
}// 编译后#sidebar {　　width: 10px;
}

参考

http://www.sass.hk/sass-course.html
http://www.ruanyifeng.com/blog/2012/06/sass.html

作者：桂圆_noble
链接：https://www.jianshu.com/p/a9b5e3e84222