Sass快速入门

用过CSS3的都知道，CSS3没有变量，也不支持任何逻辑脚本。人总是很聪明的，随着需求的增加，Sass诞生，目的在于使样式支持逻辑脚本，使程序猿们更高效的写样式，Sass脚本经过编译后，最终会转换成.css文件。Sass脚本有两种格式，分别是.sass和.scss，这两种格式的区别在于：.sass不使用大括号和分号。由于.scss的写法与.css更加相似，所以通常我们都使用.scss格式。本篇博客将从Sass安装、Sass编译到Sass语法应用逐步带程序猿们快速掌握Sass。

Sass安装

因为sass依赖于ruby环境，所以装sass之前先确认装了ruby，安装ruby的作用在于：它可以安装和更新sass。ruby官网下载地址：http://rubyinstaller.org/downloads/

在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，这样在安装成功后就可以直接使用命令行使用ruby。安装完成后需测试安装有没有成功,可运行CMD输入命令：

$ ruby -v

如能正确显示ruby版本号，表明安装成功。由于国内对外网有所限制，接着需要安装gem源的淘宝镜像，目的在于保证顺利下载Sass等资源。运行CMD输入命令：

1. //1.删除原gem源
2. $ gem sources --remove https://rubygems.org/
4. //2.添加国内淘宝源
5. $ gem sources -a https://ruby.taobao.org/
7. //3.打印是否替换成功
8. $ gem sources -l
10. //4.更换成功后打印如下
11. *** CURRENT SOURCES ***
12. https://ruby.taobao.org/

如果您系统不支持https，请将淘宝源更换成：gem sources -a http://gems.ruby-china.org。至此，所有准备工作就绪，开始安装Sass，安装命令行如下：

1. $ gem install sass
2. $ gem install compass

安装成功后，同样可通过sass -v检测是否安装成功，若能显示版本号则表示安装成功。

Sass编译

这步是实现.scss向.css格式转换的关键。进入到编译文件所在的目录底下，编译命令如下：

$ sass input.scss output.css

如需实现动态编译（只要.scss改变就会马上编译成.css文件），编译命令如下：

$ sass --watch input.scss:output.css

如果是多文件编译，编译对象也可以是文件目录：

$ sass --watch app/sass:public/stylesheets

编辑出来的文件有四种排版可配置，分别是nested、expanded、compact和compressed。以expanded为例，配置时只需在命令行末尾加入--style expanded即可。

$ sass --watch input.scss:output.css --style expanded

这四种排版的区别程序猿们可以编译后自己对比一下，或直接去官网查看，在实际开发过程中，较常用的是expanded和compressed排版。当然，如果对命令行没有操作习惯，还可以使用编译工具koala，官网下载地址：http://koala-app.com/index-zh.html.

Sass语法

——技巧——

（1）在.scss开头加上@charset "utf-8";这样编译时遇到中文便不会出错；

（2）命名变量时常用到横杆或下横岗，如$link-color和$link_color，在编译时这两者并没有区别，指向的是同一对象。

1.变量

变量用$符号定义，如$fontSize: 20px;变量的好处在于一次定义多次使用，免去重复写相同的代码。变量的格式分为普通变量、默认变量、特殊变量、多值变量和对象变量。

（1）普通变量，最简单的变量使用方法。

1. @charset "utf-8";
3. //编译前.scss
4. $fontSize: 20px;
5. div {
6. font-size: $fontSize;
7. }
9. //编译后.css
10. div {
11. font-size: 20px;
12. }

（2）默认变量，在普通变量后加上!default，目的在于强调变量用意，可修改，常用于组件的入参定义。

1. //编译前.scss
2. $fontSize: 20px ! default;
3. div {
4. font-size: $fontSize;
5. }
7. //编译后.css
8. div {
9. font-size: 20px;
10. }

（3）特殊变量，通过 #{变量名称} 的方式，可引用为样式名称。

1. //编译前.scss
2. $direction: top ! default;
3. div {
4. border-#{$direction}: 1px solid red;
5. }
7. //编译后.css
8. div {
9. border-top: 1px solid red;
10. }

（4）多值变量，该种变量可赋多个值，值之间用空格隔开，引用时通过nth(多值变量，索引);的方式获取值内容，索引从1开始计数。

1. //编译前.scss
2. $linkColor: red blue;
3. div {
4. cursor: pointer;
5. color: nth($linkColor, 1);
6. //此处&表示this，即自身div。
7. &:hover {
8. color: nth($linkColor, 2);
9. }
10. }
12. //编译后.css
13. div {
14. cursor: pointer;
15. color: red;
16. }
17. div:hover {
18. color: blue;
19. }

（5）对象变量，指用(key1:value1, key2:value2)的形式定义变量。通过map-get($map,$key)获取内容值，除此之外，还有map-merge($map1,$map2)， map-keys($map)， map-values($map)等方法。

1. //编译前.scss
2. $mapColor:( "color1":red, "color2":blue);
3. div{
4. cursor: pointer;
5. color: map-get($mapColor, "color1");
6. &:hover {
7. color: map-get($mapColor, "color2");
8. }
9. }
11. //编译后.css
12. div {
13. cursor: pointer;
14. color: red;
15. }
16. div:hover {
17. color: blue;
18. }

2.嵌套

（1）选择器嵌套，最常用的嵌套语法，是指当描述多层级元素样式时，子层级元素可嵌套到父层级元素内，这种语法极大地优化了样式代码的可读性。

1. //编译前.scss
2. ul {
3. list-style: none;
4. li {
5. float: left;
6. a {
7. color: red;
8. &:hover {
9. color: yellow;
10. }
11. }
12. }
13. }
15. //编译后.css
16. ul {
17. list-style: none;
18. }
19. ul li {
20. float: left;
21. }
22. ul li a {
23. color: red;
24. }
25. ul li a:hover {
26. color: yellow;
27. }

（2）群组嵌套，是指嵌套元素时每次可嵌套多个元素，嵌套的元素用逗号隔开。

1. //编译前.scss
2. .container {
3. h1, h2, h3 {margin-bottom: .8em}
4. }
5. nav,aside {
6. a {
7. color: blue
8. }
9. }
11. //编译后.css
12. .container h1, .container h2, .container h3 {
13. margin-bottom: .8em;
14. }
16. nav a, aside a {
17. color: blue;
18. }

（3）属性嵌套，主要用于具有类似相同属性名称的元素嵌套，注意与其它嵌套写法的差别，在嵌套时大挂弧前会多一个冒号,由于这种嵌套方法不利于可读性，建议尽量少用。

1. //编译前.scss
2. div {
3. border: {
4. style: solid;
5. left: {
6. color: red;
7. }
8. right: {
9. color: yellow;
10. }
11. }
12. }
14. //编译后.css
15. div {
16. border-style: solid;
17. border-left-color: red;
18. border-right-color: yellow;
19. }

（4）样式嵌套，是指样式与样式间的嵌套，注意样式嵌套时带空格与不带空格的区别：即子级与同级的区别。

1. //编译前.scss
2. .list {
3. border: solid 1px red;
4. &.item {
5. border: solid 1px yellow;
6. }
7. & .item {
8. border: solid 1px yellow;
9. }
10. }
12. //编译后.css
13. .list {
14. border: solid 1px red;
15. }
16. .list.item {
17. border: solid 1px yellow;
18. }
19. .list .item {
20. border: solid 1px yellow;
21. }

（5）跳出嵌套@at-root，用于定义有相同开头的系列样式，但又不在嵌套内。

1. //编译前.scss
2. .block {
3. color: red;
4. @at-root #{&}__element {
5. color: yellow;
6. }
7. @at-root #{&}__modifier {
8. color: orange;
9. }
10. }
12. //编译后.css
13. .block {
14. color: red;
15. }
16. .block__element {
17. color: yellow;
18. }
19. .block__modifier {
20. color: orange;
21. }

3.导入

在开发大型项目时，往往会有一些公共样式文件，该类文件可以通过@import实现导入。公共样式文件命名规则是用下横杠_，如_common.scss，导入时无需写后缀名和下横杠，导入可用如下语句：

@import "common";

4.mixin
minin，是指样式混合，此语法的主要用途在于实现共享样式，用@mixin声明的变量可以作为参数传递，使用@include引用。当没有参数时，@mixin的用法如下：

1. //编译前.scss
2. @mixin block{
3. color: red;
4. }
6. .demo{
7. @include block;
8. }
10. //编译后.css
11. .demo {
12. color: red;
13. }

上例中，.demo通过包含的方式，将@mixin定义的block对象样式引入到了自身。要注意的是，有这样一种情况，在.demo中再次定义color属性（注意，block对象中的color:red脚本是一定会加入到.demo中），那么具体是取@mixin定义的block对象样式还是.demo自己定义的color，取决于自身color和@include引入之间的脚本顺序。@mixin还可以实现带参，用法如下 ：

1. //编译前.scss
2. @mixin param($opa){
3. opacity: $opa;
4. }
5. .opa{
6. @include param( 0.5);
7. }
9. //编译后.css
10. .opa {
11. opacity: 0.5;
12. }

配合@content用法，可以用来解决css3的@media等带来的问题。它可以使 @mixin接受一整块样式，接受的样式从@content开始，用法如下：

1. //编译前.scss
2. @mixin max-screen($res) {
3. @media only screen and ( max-width: $res) {
4. @content;
5. }
6. }
8. @include max-screen( 480px) {
9. body {
10. color: red
11. }
12. }
14. //编译后.css
15. @media only screen and (max-width: 480px) {
16. body {
17. color: red;
18. }
19. }

5.继承
继承分为普通继承和占位符继承，它们之前的区别在于使用占位符继承时，被继承的父结构的样式将不会被编译出来。普通继承用例如下：

1. //编译前.scss
2. .h {
3. border: 4px solid #ff9aa9;
4. }
6. .speaker {
7. @extend .h;
8. border-width: 2px;
9. }
11. //编译后.css
12. .h, .speaker {
13. border: 4px solid #ff9aa9;
14. }
16. .speaker {
17. border-width: 2px;
18. }

此时.h的样式会被编译出来。如不想把父结构样式编译出来，可使用占位符继承，在父结构命名前加上百分号%

1. //编译前.scss
2. %h {
3. border: 4px solid #ff9aa9;
4. }
6. .speaker {
7. @extend %h;
8. border-width: 2px;
9. }
11. //编译后.css
12. .speaker {
13. border: 4px solid #ff9aa9;
14. }
16. .speaker {
17. border-width: 2px;
18. }

（注）mixin与继承实现的目的是一样的，都是为了共享样式，只是写法不同。但在实际应用中，尽可能使用mixin来实现共享样式，据官网表示，接下来的Sass版本很可能会去掉继承的语法。

6.函数
函数是指通过@function定义一个函数实现加减乘除的逻辑算法，并通过@return返回。如实现单位的转换：

1. //编译前.scss
2. $baseFontSize: 16px ! default;
3. @ function pxToRem($px) {
4. @ return $px / $baseFontSize * 1rem;
5. }
7. .test1 {
8. font-size: $baseFontSize;
9. }
11. .test2 {
12. font-size: pxToRem( 16px);
13. }
15. //编译后.css
16. .test1 {
17. font-size: 16px;
18. }
20. .test2 {
21. font-size: 1rem;
22. }

7.四则运算
表示涉及带数值的样式设置时，可直接进行加减乘除运算。

1. //编译前.scss
2. $num1: 10px ! default;
3. $num2: 5px ! default;
4. $num3: 10 ! default;
5. $num4: 5 ! default;
6. .jia{
7. font-size: $num1 + $num2;
8. }
10. .jian{
11. font-size: $num1 - $num2;
12. }
14. .cheng{
15. font-size: ($num3 * $num4)+px;
16. }
17. .chu{
18. font-size: ($num3 / $num4)+px;
19. }
21. //编译后.css
22. .jia {
23. font-size: 15px;
24. }
26. .jian {
27. font-size: 5px;
28. }
30. .cheng {
31. font-size: 50px;
32. }
34. .chu {
35. font-size: 2px;
36. }

（注）运算乘除时需先把单位拿出来，否则会编译失败。

8.条件判断

条件判断有@if @else和三目判断两种，@if @else用法如下：

1. //编译前.scss
2. $show: true;
3. $type: car;
5. .test1 {
6. @ if $show {
7. opacity: 1;
8. }
9. @ else {
10. opacity: 0;
11. }
12. }
14. .test2 {
15. @ if $type==bus {
16. color: yellow;
17. }
18. @ else if $type==car {
19. color: red;
20. }
21. @ else {
22. color: blue;
23. }
24. }
26. //编译后.css
27. .test1 {
28. opacity: 1;
29. }
31. .test2 {
32. color: red;
33. }

三目判断用法如下：

1. //编译前.scss
2. .test3 {
3. font-size: if( false, 1px, 2px);
4. }
6. //编译后.css
7. .test3 {
8. font-size: 2px;
9. }

9.循环

循环主要使用的关键字有@for和@each。先来介绍@for，这种循环并不常用，因为这种循环并不支持入参，只简单实现1、2、3...这样的排序循环，主要语法有from+through和form+to，区别在于to并不包括最后的边界值。如

1. //编译前.scss
2. @ for $i from 1 through 3 {
3. .through-#{$i} {
4. width: 2em * $i;
5. }
6. }
8. @ for $i from 1 to 3 {
9. .to-#{$i} {
10. width: 2em * $i;
11. }
12. }
14. //编译后.css
15. .through -1 {
16. width: 2em;
17. }
19. .through -2 {
20. width: 4em;
21. }
23. .through -3 {
24. width: 6em;
25. }
27. .to -1 {
28. width: 2em;
29. }
31. .to -2 {
32. width: 4em;
33. }

@each循环则较为常用，它的入参可以是一维数组、二维数组或map对象格式。

1. //一维数组
2. $arr: a, b, c;
3. //二维数组
4. $arrs: (a1, b1, c1),(a2, b2, c2);
5. //map对象格式
6. $map: (key1: value1, key2: value2);

一维数组用法：

1. //编译前.scss
2. $animal-list: puma,sea-slug,egret,salamander;
3. @each $animal in $animal-list {
4. .#{$animal}-icon {
5. background-image: url( '/images/#{$animal}.png');
6. }
7. }
9. //编译后.css
10. .puma-icon {
11. background-image: url( "/images/puma.png");
12. }
14. .sea-slug-icon {
15. background-image: url( "/images/sea-slug.png");
16. }
18. .egret-icon {
19. background-image: url( "/images/egret.png");
20. }
22. .salamander-icon {
23. background-image: url( "/images/salamander.png");
24. }

二维数组用法：

1. //编译前.scss
2. $animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
3. @each $animal,$color,$cursor in $animal-data {
4. .#{$animal}-icon {
5. background-image: url( '/images/#{$animal}.png');
6. border: 2px solid $color;
7. cursor: $cursor;
8. }
9. }
11. //编译后.css
12. .puma-icon {
13. background-image: url( "/images/puma.png");
14. border: 2px solid black;
15. cursor: default;
16. }
18. .sea-slug-icon {
19. background-image: url( "/images/sea-slug.png");
20. border: 2px solid blue;
21. cursor: pointer;
22. }
24. .egret-icon {
25. background-image: url( "/images/egret.png");
26. border: 2px solid white;
27. cursor: move;
28. }

map对象格式用法：

1. //编译前.scss
2. $headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
3. @each $header,$size in $headings {
4. #{$header} {
5. font-size: $size;
6. }
7. }
9. //编译后.css
10. h1 {
11. font-size: 2em;
12. }
14. h2 {
15. font-size: 1.5em;
16. }
18. h3 {
19. font-size: 1.2em;
20. }

至此，本篇博客有关Sass的知识已经介绍完毕，现在有没有发现Sass并没有想象中那么困难，开始您的Sass编程之路吧，让我们一起来高效编写CSS脚本。