Sass

前端 CSS

1. 简介

官网集：
Sass
Ruby
RVM
Compass

• Compass是Sass的二次加工而成；
• Sass专注于怎样创建优雅的CSS样式表，而不是其内容；
• 好的代码：注释要占代码的2/3。

定义： Sass是一门高于CSS的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通CSS更加强大的功能。
Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

特点：在CSS中加入变量、简单的逻辑程序、函数等编程特性；代码更加简洁、适应性更强、可读性更佳、更易于代码的维护。

CSS预处理器语言：

• Sass (SCSS)
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

Sass与SCSS区别：

• Sass和SCSS其实是同一种东西，统称为Sass；
• 文件扩展名不同，Sass是以".sass"后缀为扩展名，而SCSS是以".scss"后缀为扩展名；
• 语法书写方式不同，Sass以严格的缩进式语法规则来书写，不带大括号{}和分号;，而SCSS的语法书写和CSS语法书写方式非常类似；

Sass/SCSS与CSS区别：

• Sass与CSS有区别：Sass基于Ruby，无{}和;，以严格缩进控制；
• SCSS与CSS无区别：将".css"文件直接改成".scss"即可使用；

环境准备：

1. 安装Ruby：Windows平台下需先安装Ruby，建议安装在C盘下，在安装过程中选择第二个选项；
2. 安装Sass：
   
   • 命令安装Sass：打开电脑的Ruby命令终端，输入：gem install sass；
   • Compass安装 Sass：Compass是基于Sass开发的一个框架(集成了很多写好的mixins和Sass函数)，可在命令终端输入：sudo gem install sass；
   • 本地安装Sass：到Rubygems 将Sass的安装包下载下来，然后在命令终端输入：gem install <输入安装文件路径>直接回车即可。
   • 淘宝RubyGems镜像安装Sass：还可以使用淘宝RubyGems镜像安装Sass。只是我们需要通过gem sources命令来配置源，先移除默认的源，然后添加淘宝的源：
     第一步：移动默认的源gem sources --remove https://rubygems.org/
     第二步：指定淘宝的源gem sources -a https://ruby.taobao.org/
     第三步：查看指定的源是不是淘宝源gem sources -l
     返回结果如下：
     *** CURRENT SOURCES *** https://ruby.taobao.org
     请确保只有ruby.taobao.org。无误后，执行下面的命令：gem install sass
3. 测试Sass安装情况及更新：
   
   • 测试：sass -v，
   • 更新：gem update sass，
4. 卸载Sass：gem uninstall sass；

2. 编译

在线编译器

2.1. 命令编译

1. 单文件编译
   sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
2. 多文件编译
   sass sass/:css/
   上面的命令表示将项目中"sass"文件夹中所有".scss/.sass"文件编译成".css"文件，并且将这些CSS文件都放在项目中"css"文件夹中。
3. 自动编译
   开启"watch"功能，自动监测代码修改且直接编译：sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

2.2. GUI工具编译

1. Koala
2. CodeKit
3. Scout
4. Compass.app
5. Prepros

2.3. 自动化编译

2.3.1. Grunt配置Sass编译示例

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/style.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

Grunt：Grunt-beginner前端自动化工具

2.3.2. Gulp配置Sass编译示例：

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});
gulp.task('default', ['sass','watch']);

2.4. 常见错误及调试

Sass常见的编译错误是字符编译引起的。在Sass的编译的过程中，是不支持"GBK"编码的。所以在创建Sass文件时，就需要将文件编码设置为"utf-8"。
另一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。

Sass调试：浏览器需支持sourcemap功能。
早一点的版本，需要在编译的时候添加--sourcemap参数：
sass --watch --scss --sourcemap style.scss:style.css
对v3.3以上，则不需要添加这个参数也可以：
sass --watch style.scss:style.css
在命令终端将有：

>>> Change detected to: style.scss
  write style.css
  write style.css.map

2.5. 不同样式风格的输出方法

1. 嵌套输出方式 nested
   在编译的时候带上参数--style nested：
   sass --watch test.scss:test.css --style nested
   
   • 示例：
     
2. 展开输出方式 expanded
   在编译的时候带上参数--style expanded：
sass --watch test.scss:test.css --style expanded`
   和nested类似，只是大括号另起一行。
   
   • 示例：
     
3. 紧凑输出方式 compact
   在编译的时候带上参数--style compact：
   sass --watch test.scss:test.css --style compact
   产出单行CSS。
   
   • 示例：
     
4. 压缩输出方式 compressed
   在编译的时候带上参数--style compressed：
   sass --watch test.scss:test.css --style compressed
   去掉标准的Sass和CSS注释及空格。
   
   • 示例：
     

3. 语法

3.0. 注释

/*这一注释直接被编译*/
//这一注释不被编译

3.1. 变量

定义：$变量名:值;
调用：$变量名;

从v3.4开始，Sass已经可以正确处理作用域的概念。
全局变量：定义在元素外面的变量；
局部变量：定义在元素内部的变量；
普通变量：定义之后可以在全局范围内使用；
默认变量：追加!default用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。

3.2. 嵌套

3.2.1. 选择器嵌套

nav a {
    color: red;
}
header nav a {
    color: green;
}

可写作：

nav {
    a {
        color: red;
        header & {
            color: green;
        }
    }  
}

3.2.2. 属性嵌套

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

可写作：

.box {
    border: {
        top: 1px solid red;
        bottom: 1px solid green;
    }
}

3.2.3. 伪类嵌套

.clearfix:before, 
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
    overflow: hidden;
}

可写作：

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
    }
    &:after {
        clear:both;
        overflow: hidden;
    }
}

3.3. 混合宏

3.3.1. 声明

使用@mixin声明混合宏。
不带参数的混合宏：

@mixin 混合宏名{
    复用样式
}

带参数混合宏：

@mixin 混合宏名($变量:默认值){
    样式: $变量;...
}

传入参数可只传变量，不带值。
复杂的混合宏(带逻辑关系)：

@mixin 混合宏名($变量...) {
// 传入多个参数时用","隔开
// 传入参数过多时可使用"..."来替代
    @if 逻辑条件
    {
        代码块
    } 
    @else
    {
        代码块
    }
}

3.3.2. 调用

使用@include调用声明了的混合宏。

选择器 {
    @include 混合宏名(值);
}

3.4. 继承

语法：@extend .已有样式类名
示例：

.btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
}
.btn-primary {
    background-color: #f36;
    color: #fff;
    @extend .btn;
}

表示.btn-primary继承了全部.btn的样式；

3.5. 占位符

%placeholder声明的代码，如果不被@extend调用的话，不会产生任何代码。
示例：

%mt5 {
    margin-top: 5px;
}
%pt5{
    padding-top: 5px;
}
//不@extend不编译产生代码
.btn {
    @extend %mt5;
    @extend %pt5;
    //调用后才产生代码
}

* 混合宏、继承、占位符比较

混合宏

缺点：并不自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余；
优点：可传参数；
使用：若代码块涉及变量，建议使用混合宏来创建相同的代码块。

继承

缺点：不能传变量参数；
优点：会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，这样编译出来的代码相对于混合宏来说要干净的多，也是CSSer期望看到；
使用：若代码块不需要专任何变量参数，而且有一个基类已在文件中存在，建议使用Sass继承。

占位符

缺点：不能传变量参数；
优点：和继承基本相同，但不会在代码中生成基类选择器；
区别：占位符是独立定义，不调用的时候是不会在CSS中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的CSS代码中。

3.6. 插值

语法：#{}
功能和局限性未知，并不完善。
示例：

$properties: (margin, padding);
    @mixin set-value($side, $value) {
        @each $prop in $properties {
            #{$prop}-#{$side}: $value;
        }
    }
    .login-box {
        @include set-value(top, 14px);
    }

编译成：

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

3.7. 数据类型

• 数值；
• 字符串：有引号字符串或无引号字符串；
• 颜色值：可为英文、hex码和rgba等；
• 布尔值；
• 空值：如null；
• 值列表：用空格或者逗号分开，如1.5em 1em 0 2em、Helvetica, Arial, sans-serif。

列表函数

• nth函数：可以直接访问值列表中的某一项；
• join函数：可以将多个值列表连结在一起；
• append函数：可以在值列表中添加值；
• @each规则：则能够给值列表中的每个项目添加样式。

3.8. 其它

3.8.1. @import

局部文件以_开头，不被编译；建议一个"_variables.scss"专门储存变量，以一个"_mixin.scss"专门储存@mixin函数；再在宿主文件即主要scss文件中用@import引用：

/*
 * CONTENTS
 *  
 * SETTINGS
 * variables………………变量集中存储文件；
 * 
 * TOOLS
 *  
 * CONPONENTS
 * reset…………………………Compass内置重置样式文件；
 * BUSINESS
 *
 * BASE
 * main.scss………………宿主文件，即针对站点样式的主要样式表；
 */
@import "variables", "compass/reset" 
//_以及.scss可以省略；compass/reset是Compass自带的重置文件，优于一般的normalize；

Sass中使用的@import并非原生的CSS@import，要在Sass中使用原生的，需满足：

• 当@import后面跟.css；
• 以http://开头；
• 使用url()时；
• 带有media queries；

3.8.2. @at-root

@at-root{}：把{}中的样式表放到根部；
通常用于类名命名逻辑富集时，如：

.main{
    @at-root{
        .main_center{}
        .main_aside{}
    }
}

3.8.3. @error & @warn

@error与@warn：供在传入参数出现错误时在控制台上报错；

3.8.4. @function

@function：与代码块无关的函数，多是内置函数；很不常用；

4. 运算

变量、数值、色值、字符均可运算；
碰到不同类型的单位时编译会报错；

4.1. 加法

样式: 变量 + 变量;

4.2. 减法

样式: 变量 - 变量;

4.3. 乘法

样式: 变量 * 变量;
两个值单位相同时，只需要为一个数值提供单位即可。

4.4. 除法

• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值；
  样式: $变量 / $变量;
• 如果数值被圆括号包围；
  样式: (数值 / 数值);
• 如果数值是另一个数学表达式的一部分；
  样式: 数值 / 数值 + 数值;
  两个值均带单位时，得出一个不带单位的值。

附：参考

慕课：Sass入门篇
慕课：Sass和Compass必备技能之Sass篇