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-convert style.sass style.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’}]
}
}
});