一.背景知识 1.Sass是什么？ Sass可以简化你的Css工作流，并可以使你的Css的扩展和维护工作变的更加容易！例如，曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值，或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定。 Sass引入了一些新的概念如，变量，混合，嵌套和选择器继承.Sass 生成良好格式化的 CSS 代码，易于组织和维护。 SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。 Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
2.Compass是什么? Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。官方网址：http://compass-style.org 二、安装
npm install normallize.css --save npm install node-sass sass-loader --save-dev npm install compass-mixins --save-dev三、修改配置
exports.cssLoaders = function (options) { ... return { ... // 将sass和scss修改为如下 sass: generateLoaders('sass', { indentedSyntax: true, includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }), scss: generateLoaders('sass', { includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }), ... } }四、compass组件模块
Browser Support css3 css3命令模块 Helpers Layout 布局模块 Reset 重置样式模块 typography 版式模块 utilities 工具类 具体使用： 例如：reset使用：
@import “compass/reset”; 这样就会在css中生成重置样式了，不用我们再自己定义重置样式了。
css3使用：
@import “compass/css3”; 这是个绝对好用的特性，我们知道由于浏览器对css3支持的差异性，我们很多时候需要写一堆针对不同浏览器前缀样式，着实很烦人，css3命令模块帮我们解决了这个问题，我们只需include相应样式定义即可，compass会自动为我们生成针对不同浏览器的样式定义：
@import "compass/css3"; .circle { @include border-radius(5px); }其他案例请看官方网站 五、Sass 基础语法
1.变量操作 >1.直接操作变量,即变量表达式; >2.通过函数; >>1.跟代码块无关的函数,多是自己内置函数,称为functions; >>2.可重用的代码块:称为mixin; >>>1.@include; // 以复制/拷贝的方式存在; >>>2.@extend; // 以组合声明的方式存在; 2.颜色值转换; Sass: color:hsl(270,100%,50%); Css: color:#7f00ff; 3.@mixin引用 Sass: @mixin col-6 { // 声明col-6()函数; width:50%; float:left; } .webdemo-sec { @include col-6 // 通过@include引入@col-6()函数;并且可以引入多个; &:hover { // &:表示父类选择器; background-color:#f5f5f5; } } Css: .webdemo-sec { // 继承了col-6()函数的属性值; width:50%; float:left; } .webdemo-sec:hover { // 通过"&"调用到本身; background-color:#f5f5f5; } 4.@mixin包含参数引用; Sass: @mixin col($width:50%){ // 设置默认参数值;不传参数时,属性值为默认; width:$width; float:right; } .webdemo-abc { @include col(60%); // 设置传参数; } Css: .webdemo-abc { width:60%; // 编译后的属性值; float:right; } 5.@extend继承 >1.extend不可以继承选择器序列; >2.使用%,用来构建只用来继承的选择器; Sass: .error { color:#f00; } %error { // 构建只用来要继承的选择器; background:#0f0; } .serious-error { @extend .error; @extend %error; border:1px solid #f00; } Css: .error, .serious-error { // 继承自.error; color:#f00; } .serious-error { // 继承自%serious-error; background:#0f0; } .serious-error { // 自己的属性; border:1px solid #f00; }六、Sass进阶语法
1.变量操作 >1.直接操作变量,即变量表达式; >2.通过函数; >>1.跟代码块无关的函数,多是自己内置函数,称为functions; >>2.可重用的代码块:称为mixin; >>>1.@include; // 以复制/拷贝的方式存在; >>>2.@extend; // 以组合声明的方式存在; 2.颜色值转换; Sass: color:hsl(270,100%,50%); Css: color:#7f00ff; 3.@mixin引用 Sass: @mixin col-6 { // 声明col-6()函数; width:50%; float:left; } .webdemo-sec { @include col-6 // 通过@include引入@col-6()函数;并且可以引入多个; &:hover { // &:表示父类选择器; background-color:#f5f5f5; } } Css: .webdemo-sec { // 继承了col-6()函数的属性值; width:50%; float:left; } .webdemo-sec:hover { // 通过"&"调用到本身; background-color:#f5f5f5; } 4.@mixin包含参数引用; Sass: @mixin col($width:50%){ // 设置默认参数值;不传参数时,属性值为默认; width:$width; float:right; } .webdemo-abc { @include col(60%); // 设置传参数; } Css: .webdemo-abc { width:60%; // 编译后的属性值; float:right; } 5.@extend继承 >1.extend不可以继承选择器序列; >2.使用%,用来构建只用来继承的选择器; Sass: .error { color:#f00; } %error { // 构建只用来要继承的选择器; background:#0f0; } .serious-error { @extend .error; @extend %error; border:1px solid #f00; } Css: .error, .serious-error { // 继承自.error; color:#f00; } .serious-error { // 继承自%serious-error; background:#0f0; } .serious-error { // 自己的属性; border:1px solid #f00; }七、sass 高级语法
1.@media用法 // Sass中的@media与Css中的@media区别: // 1.Sass中的media query可以内嵌在css规则中; // 2.在生成css的时候,media query才会被提到样式的最高级; // 3.好处:避免了重复书写选择器或者打乱样式表的流程; Sass: @mixin col-sm ($width:50%){ @media (min-width:768px){ width:$width; float:left; } } .webdemo-sec { @include col-sm(); } Css: @media (min-width:768px){ .webdemo-sec { width:50%; float:left; } } 2.@at-root指令 // 嵌套副作用:增加了样式修饰的权重;制造了样式位置的依赖; Sass: .main-sec { font-size:12px; @at-root { // 在嵌套的时候使用@at-root指令; .main-sec-headline { // 指定被嵌套的内容输出到样式表的顶层; font-size:16px; } .main-sec-detail { font-size:14px; } } } Css: .main-sec { font-size:12px; } .main-sec-headline { // 编译后成功输出到样式表的顶层; font-size:16px; } .main-sec-detail { font-size:14px; } 3.if操作符 @mixin col-sa ($width:50%){ // 使用type-of()方法:检测$width是否是数值类型; @if type-of($width) != number { // #{}:可以引用Sass的变量;--Ruby语法; // @error:表示错误信息; @error "$width必须是一个数值类型,你输入的width是:#{$width}."; } // 使用unitless()方法:判断当前的数值是否跟有单位; // 前置not表示否定,双重否定表示肯定; @if not unitless($width){ // 判断数值有单位; @if unit($width) != "%" { // 如果单位不是%; @error "$width必须是一个数值类型,你输入的width是:#{$width}."; } } @else { // 判断数值没有单位; @warn "$width必须是一个数值类型,你输入的width是:#{$width}."; $width:(percentage($width)/100); // 换算成带%单位的数值; } @media (min-width:768px){ width:$width; float:left; } } 4.Sass的输出格式 // 在config.rb配置文件里; >1.output_style = :expanded or :nested or :compact or :compressed >>0.:expanded => 编译后的文件是展开的; >>1.:nested => 根据嵌套,在输出的时候代码缩进; >>2.:compact => 将所有的属性汇总到一行;选择器之间的关系更清晰; >>3.:compressed => 将所有的代码压缩以占用最小的空间;