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 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：
语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。这不是锦上添花，而恰恰是雪中送炭。
css预处理器已发展多年，处理Sass外，还有less,Stylus...
除了css预处理器，css后处理器也很流行如postcss
完全兼容 CSS3
在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
对颜色和其它值进行操作的{Sass::Script::Functions 函数}
函数库控制指令之类的高级功能
良好的格式，可对输出格式进行定制
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让人们受益的一个重要特性就是它为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;}
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;}
SASS允许在代码中使用算式：
body{margin: (14px/2);top:50px+ 100px;right:80*10%;}
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;}
&是父选择器的标识符
Sass共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!我是个傲娇的注释，不会被省略*/
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;}
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;}
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的强大之处，在于可以指定参数和缺省值。
高级用法可以翻译为“用的少”，但威力很大“
@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; }
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'); }
了解了上面这些内容，基本上就算入门了，再去看看这些链接：
传送门：GitHub
网友评论