Sass

1.Sass是对CSS的扩展，让CSS语音更强大，优雅。它允许你使用变量，嵌套规则，mixins,导入众多功能，并且完全兼容css语法。使得CSS的开发，变得简单和可维护。

2，使用Sass需要搭建Ruby环境：
下载地址：http://www.ruby-lang.org/zh_cn/downloads/
注意：请勾选Add Ruby executablesto you PATH;
ruby-v:在cmd测试是否安装成功，测试版本命令。

3.在命令行输入下面的命令：
（1）.gem install sass
（2）.sass -v
（3）.gem update sass //升级sass

4.Sass 语法
（1）Sass 有两种语法。
•SCSS (Sassy CSS)，是一个CSS3 语法的扩充版本，这种语种语法的样式表文件需要以.scss扩展名。
•缩排语法（或者就称为”Sass”），提供了一种更简洁的CSS 书写方式。它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，而且也不使用分号，而是用换行符来分隔属性。很多人认为这种格式比SCSS更容易阅读，书写也更快速。使用此种语法的样式表文件需要以.sass 作为扩展名。

5.sass 命令
sass 转css
•sass test.scss
•sass test.scss test.css

6.sass 命令
四种编译风格
•nested：嵌套缩进的css代码，它是默认值。
•expanded：没有缩进的、扩展的css代码。
•compact：简洁格式的css代码。
•compressed：压缩后的css代码。
•sass –style compressed test.sass test.css

7.sass 命令
自动监控编译
•watch a file
sass –watch input.scss:output.css
•watch a directory
sass –watch app/sass:public/stylesheets

8.sass-convert:
sass-convert 命令行工具，可以将一种语法转换为另一种语法
•将Sass 转换为SCSS
sass−convertstyle.sassstyle.scss∙将SCSS转换为Sass sass-convert style.scss style.sass

9.变量
变量以$ 开头
如果变量需要镶嵌在选择器和属性名等字符串之中，就必须需写在插值符号#{} 之中

$blue:#1875e7;div {color:$blue;}$side:left;.rounded{    border-#{$side}-radius:5px;}

10.默认变量
默认变量一般是用来设置默认值

$baseLineHeight:2;$baseLineHeight:1.5!default;//如果没有设置其他值就显示此值body{line-height:$baseLineHeight; }

11.运算
SASS 对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。
请注意运算符前后请留一个空格，不然会出错。

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

12.嵌套
允许选择器和属性（后面必须加上冒号）嵌套
在嵌套的代码块内，可以使用& 引用父元素

div {h1 {color:red;    }  }p {// 属性嵌套border:{color:red;}}a {&:hover{color:#ffb3ff;}}

13.注释
两种注释风格
•标准的CSS注释/comment / ，会保留到编译后的文件。
•单行注释// comment，只保留在SASS源文件中，编译后被省略。
•/!comment /，表示”重要注释”，压缩时保留注释，用于声明版权。
中文注释
•在文件第一行添加@charset “utf-8”;

14.继承
@extend 允许一个选择器，继承另一个选择器

.class1{border:1pxsolid#ddd;}.class2{@extend.class1;font-size:120%;}

15.Mixin
混合可以引用其他代码块，可以重用的代码块

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

16.Mixin
混合还可以带参数地调用，就像使用函数一样

@mixin left($value:10px){float:left;margin-right:$value;}div {@includeleft;}mydiv{@include left(20px);}

17.文件导入
@import命令，用来插入外部文件。
•编译时会将@import 的scss 文件合并进来只生成一个CSS 文件
•@import 普通CSS 文件，不会合并到编译后的文件中@import “path/filename.scss”;
@import “foo.css”;

18.条件语句
@if, @else 可以用来判断：

$color:#f00;p {@if 1+ 1== 2{ border:1pxsolid; }@if5< 3{ border:2pxdotted; }@iflightness($color)> 30%{background-color:#000;}@else{background-color:#fff;}}

19.条件语句
支持三目判断

if($condition, $if_true, $if_false) 。($condition, $if_true, $if_false) 。if(true, 1px, 2px)if(false, 1px, 2px)

20循环语句
支持@for, @while, @each 循环：@

for $i from 1 to 10 {.border-#{$i}{border:#{$i}pxsolidblue;}}$i:6;@while $i > 0 {.item-#{$i}{width:2em*$i;}$i:$i-2;}@each $member in a, b, c, d {.#{$member}{background-image:url("/image/#{$member}.jpg");}}

21.自定义函数
@function 编写自己的函数

@function double($n) {@return$n*2;}#sidebar{width:double(5px);}

22.grunt-contrib-sass
安装Grunt Sass 插件
npm initnpm install grunt-contrib-sass –save-dev
grunt.loadNpmTasks(‘grunt-contrib-sass’);

23.Example config

module.exports = function(grunt) {grunt.initConfig({sass: { // Task dist: { // Target options: { // Target options style: 'compressed' // nested, expanded, compact, compressed},files: { // Dictionary of files 'dist/main.css': 'src/test.scss' // 'destination': 'source' }}}});grunt.loadNpmTasks('grunt-contrib-sass');grunt.registerTask('default', ['sass']);};

24.Compile files in a directory
grunt.initConfig({
sass: { // Task
dist: { // Target
options: { // Target options
style: ‘compressed’ // nested, expanded, compact, compressed
},
files: [{expand: true,cwd: ‘src/styles’,src: [‘*.scss’],dest: ‘dist’,ext: ‘.css’}]
}
}
});