scss版本的css预处理语言sass的快速使用手册

作者：心叶
时间：2018-04-23 13:04

sass分为二类，其中一种是SCSS（Sassy CSS），是一个 CSS3 语法的扩充版本，此处就是选择这种。

一：Ruby版本的安装和使用

//先安装好ruby以后，直接在命令行运行下面的命令就可以完成安装工作了。
//安装过程可能需要翻墙，当然，你也可以选择node.js系列打包工具的sass编译工具

gem install sass

//下面的第一条命令表示编译sass文件为css文件

//（其中param可选参数有：nested：嵌套缩进的css代码，它是默认值；expanded：没有缩进的、扩展的css代码；compact：简洁格式的css代码；compressed：压缩后的css代码）

//第二条是一个例子

//第三条表示监听文件变化，改变立即编译

sass [--style param] sourceFile.scss targetFile.css

sass --style compressed test.scss test.css

sass --style compressed --watch test.scss:test.css

二：变量

sass可以使用变量，就像下面这样，以$开头：

$btn_bgcolor:#222222;

input.btn{

    background-color:$btn_bgcolor;
    
}

如果变量是用在字符串中，你需要用#{}包裹一下：

$direction:top;

input.btn{

    margin-#{$direction}:10px;
    
}

三：计算

sass支持的计算使用起来也很简单，就是编程语言类似的样子（不是一定必须的，不过运算符之间留空格是好的习惯）：

div{

    padding:(14px / 2);
    
    right: $var * 10%;
    
}

四：嵌套

个人使用总结，嵌套就二种，分离的和合并的（自己起的名字），合并的比分离的多了一个&，下面分别举例：

//[分离的]源代码
div{
    .btn{
        //Todo
    }
}
//[分离的]编译后
div .btn{
    //Todo
}

//[合并的]源代码
div{
    &.btn{
        //Todo
    }
}
//[合并的]编译后
div.btn{
    //Todo
}

五：注释

/*会保留到编译后*/

//只出现在源文件

/*!即使是压缩了也会保留*/

六：继承

现在有了一个公共的按钮样式：

.btn{

    //按钮的公共样式
    
}

你现在要写一个提交按钮，为了在基础按钮基础上开发，你可以写这样的代码：

.btn-submit{

    @extend .btn;
    //你对提交按钮的特殊样式
    
}

七：插入文件

编译一般编译主文件，别的文件由主文件引入，比如现在有主文件root.scss，还有一个重置文件_reset.scss（开头的下划线表示这是一个局部文件，并不需要生成对应的独立css文件），你只需要在主文件中添加一行：

@import "./src/reset";

八：Mixin

说的简单点就是代码模板预定义：

@mixin bgQuick($url,$bgcolor:red){

    background-repeat: no-repeat;
    
    background-position: center center;
    
    background-size: auto auto;
    
    background-image:url($url);
    
    background-color:$bgcolor;
    
}

使用的时候，传递参数（有缺省值的可以传入也可以不传入）：

div{

    @include bgQuick('image/smile.png');
    
}

九：函数

函数也很好用，看个例子：

@function double($size) {

    @return $size * 2;
    
}

#sidebar {

    width: double(5px);
    
}

十：if

sass的@if用not,or,and分别表示非，或，与。

$flag:1;

div{

    @if $flag == 1 {
    
        //Todo
        
    } @else if($flag > 1 and $flag < 10){
    
        //Todo
        
    } @else {
    
        //Todo
        
    }
    
}

十一：for

@for $i from 0 to $home_nav_num {

    .nav li:nth-child(#{$i + 1}) {
    
        background-position-y: (0 - $i)*70px - 20px;
        
    }
    
}

十二：while

$i:0;

@while $i <  $home_nav_num {

    .nav li:nth-child(#{$i + 1}) {
    
        background-position-y: (0 - $i)*70px - 20px;
        
    }
    
}

十三：each

@each $i in 1, 2, 3 {

    .nav li:nth-child(#{$i + 1}) {
    
        background-position-y: (0 - $i)*70px - 20px;
        
    }
    
}

十四：Compass 样式库

最后提一下样式库Compass，sass本身是一个语言，借助这个库，会大大提高开发速度，立柱于css深入理解解决问题，借助工具加速开发。