Sass入门与实战

**Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.**打开Sass官网就可以看见这样一句话。这话一点儿都不谦虚:Sass世界上最成熟、最稳定、最强大的专业级CSS扩展语言！他如此自信想必是有各种自信的理由，下面我们就一起来了解了解Sass，看看它在吹牛还在真的如此厉害。

css预处理器

学过CSS的人都知道，它不是一种编程语言。网页开发离不开它，但它有发展缓慢。自然而然就有想出了解决方案：css预处理器

CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：

语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；

没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。这不是锦上添花，而恰恰是雪中送炭。

css预处理器已发展多年，处理Sass外，还有less,Stylus...

除了css预处理器，css后处理器也很流行如postcss

开始使用Sass

完全兼容 CSS3

在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)

对颜色和其它值进行操作的{Sass::Script::Functions 函数}

函数库控制指令之类的高级功能

良好的格式，可对输出格式进行定制

支持 Firebug

Sass的两种语法

Sass 有两种语法。

第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本，也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。

第二种比较老的语法成为缩排语法（或者就称为 "Sass"）， 提供了一种更简洁的 CSS 书写方式。 它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，I而且也不使用分号，而是用换行符来分隔属性。

一般使用Scss多余Sass，不过二者除了上述不同外，基本在无差别，也许你和我一样，有时候写写Python后会突然想用Sass，有时有钟情于Scss，这些都无关紧要

SASS提供四个编译风格的选项

nested：嵌套缩进的css代码，它是默认值。

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

compact：简洁格式的css代码。

compressed：压缩后的css代码。

最后推荐大家使用gulp来编译Sass。关于gulp这里不多讲。下面给出一个简单gulp配置文件来编译sass

constgulp=require('gulp')constsass=require('gulp-sass')gulp.task('sass',function() {returngulp.src('./sass/**/*.scss')        .pipe(sass().on('error',sass.logError))        .pipe(gulp.dest('./css'))})gulp.task('sass:watch',function() {gulp.watch('./sass/**/*.scss', ['sass'])})

具体参见GitHub

下面我们将快速学习sass的语法

sass语法快速入门

基本语法

1.变量

Sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

//scss style//-----------------------------------$fontStack:Helvetica,sans-serif;$primaryColor:#333;body{font-family:$fontStack;color:$primaryColor;}//css style//-----------------------------------body{font-family:Helvetica,sans-serif;color:#333;}

2.嵌套

sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。

//scss style//-----------------------------------nav{ul{margin:0;padding:0;list-style:none;  }li{display:inline-block; }a{display:block;padding:6px12px;text-decoration:none;  }}//css style//-----------------------------------navul{margin:0;padding:0;list-style:none;}navli{display:inline-block;}nava{display:block;padding:6px12px;text-decoration:none;}

3. 计算功能

SASS允许在代码中使用算式：

body{margin: (14px/2);top:50px+ 100px;right:80*10%;}

4.颜色

sass中集成了大量的颜色函数，让变换颜色更加简单。

//scss style//-----------------------------------$linkColor:#08c;a{text-decoration:none;color:$linkColor;&:hover{// &是父选择器的标识符color:darken($linkColor,10%);    }}//css style//-----------------------------------a{text-decoration:none;color:#0088cc;}a:hover{color:#006699;}

&是父选择器的标识符

5. 注释

Sass共有两种注释风格。

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

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

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!我是个傲娇的注释，不会被省略*/

代码的重用

1. 导入

sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import

文件的名称约定以下划线开头

以下划线卡头的文件名称不会被编译

//scss style//-----------------------------------// _reset.scsshtml,body,ul,ol{margin:0;padding:0;}//scss style//-----------------------------------// base.scss@import'reset';body{font-size:100%Helvetica,sans-serif;background-color:#efefef;}//css style//-----------------------------------html,body,ul,ol{margin:0;padding:0;}body{background-color:#efefef;font-size:100%Helvetica,sans-serif;}

2. 扩展/继承

sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

//scss style//-----------------------------------.message{border:1pxsolid#ccc;padding:10px;color:#333;}.success{@extend.message;border-color:green;}.error{@extend.message;border-color:red;}.warning{@extend.message;border-color:yellow;}//css style//-----------------------------------.message,.success,.error,.warning{border:1pxsolid#cccccc;padding:10px;color:#333;}.success{border-color:green;}.error{border-color:red;}.warning{border-color:yellow;}

3. mixin

sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。比如说处理css3浏览器前缀*(更好的解决方案：autoprefixer)*

//scss style//-----------------------------------@mixinbox-sizing($sizing) {-webkit-box-sizing:$sizing;-moz-box-sizing:$sizing;box-sizing:$sizing;}.box-border{border:1pxsolid#ccc;@includebox-sizing(border-box);}//css style//-----------------------------------.box-border{border:1pxsolid#ccc;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

mixin的强大之处，在于可以指定参数和缺省值。

高级用法

高级用法可以翻译为“用的少”，但威力很大“

1.条件语句

@if可一个条件单独使用，也可以和@else结合多条件使用

//scss style//-------------------------------$lte7:true;$type: monster;.ib{display:inline-block;@if$lte7{*display:inline;*zoom:1;    }}p{@if$type== ocean {color:blue;  }@else if$type== matador {color:red;  }@else if$type== monster {color:green;  }@else{color:black;  }}//css style//-------------------------------.ib{display:inline-block;*display:inline;*zoom:1;}p{color:green; }

2.循环语句

SASS支持for循环：

for循环有两种形式，分别为：@for $var from through 和@for $var from to 。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

@for$ifrom1to10{.border-#{$i}{border:#{$i}pxsolidblue;  }}

也支持while循环：

$i:6;@while$i>0{.item-#{$i}{width:2em*$i; }$i:$i- 2;}

each命令，作用与for类似：

语法为：@each $var in 。其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

//scss style//-------------------------------$animal-list: puma, sea-slug, egret, salamander;@each$animalin$animal-list{  .#{$animal}-icon{background-image:url('/images/#{$animal}.png');  }}//css style//-------------------------------.puma-icon{background-image:url('/images/puma.png'); }.sea-slug-icon{background-image:url('/images/sea-slug.png'); }.egret-icon{background-image:url('/images/egret.png'); }.salamander-icon{background-image:url('/images/salamander.png'); }

了解了上面这些内容，基本上就算入门了，再去看看这些链接：

Sass官网

Sass中文网

w3cplus

gulp中文网

实战

传送门：GitHub