8.9 SASS

1. sass/scss

• SCSS 需要使用分号和花括号而不是换行和缩进

2. 安装sass

1. 安装ruby

• sass是基于ruby环境的
• 安装ruby
• 勾选Add Ruby executables to your PATH
• 安装完成后需测试安装有没有成功,运行CMD输入以下命令：

    ruby -v
    //如安装成功会打印
    ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

2. 安装sass

• 因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源

    //1.删除原gem源
    gem sources --remove https://rubygems.org/
    
    //2.添加国内淘宝源
    gem sources -a https://gems.ruby-china.com
    
    //3.打印是否替换成功
    gem sources -l
    
    //4.更换成功后打印如下
    *** CURRENT SOURCES ***
    https://ruby.taobao.org/

• 安装Sass和Compass

    gem install sass
    gem install compass

• 安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中

    sass -v
    
    Sass 3.x.x (Selective Steve)
    
    
    compass -v
    
    Compass 1.x.x (Polaris)
    Copyright (c) 2008-2015 Chris Eppstein
    Released under the MIT License.
    Compass is charityware.
    Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

3. 编译

1. 编译命令

    //单文件转换命令
    sass input.scss output.css
    
    //单文件监听命令
    sass --watch input.scss:output.css
    
    //如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
    sass --watch app/sass:public/stylesheets

2. 编译格式

• nested 编译排版格式

    /*命令行内容*/
    sass style.scss:style.css --style nested
    
    /*编译过后样式*/
    .box {
      width: 300px;
      height: 400px; }
      .box-title {
        height: 30px;
        line-height: 30px; }

• expanded 编译排版格式

    /*命令行内容*/
    sass style.scss:style.css --style expanded
    
    /*编译过后样式*/
    .box {
      width: 300px;
      height: 400px;
    }
    .box-title {
      height: 30px;
      line-height: 30px;
    }

• compact 编译排版格式

    /*命令行内容*/
    sass style.scss:style.css --style compact
    
    /*编译过后样式*/
    .box { width: 300px; height: 400px; }
    .box-title { height: 30px; line-height: 30px; }

• compressed 编译排版格式

    /*命令行内容*/
    sass style.scss:style.css --style compressed
    
    /*编译过后样式*/
    .box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

3. easysass

• easysass插件自动保存编译

4. 变量

1. 普通变量

• sass使用$符号来标识变量

    $highlight-color: #F90;

2. 默认变量

• 可在默认变量前重新定义可覆盖

    $highlight-color: #F90!default;

3. 引用变量

    $color: #ff8907!default;
    $bg: '../images/1.jpg';
    $height_max: 'height';
    div{
        #{$height_max}: 200px;
        color:$color;
        background: url(#{$bg}) center no-repeat
    }

4. 嵌套css

• 普通嵌套

    #content {
        article {
            h1 { color: #333 }
            p { margin-bottom: 1.4em }
        }
        aside { background-color: #EEE }
    }
    /* 编译后 */
    #content article h1 { color: #333 }
    #content article p { margin-bottom: 1.4em }
    #content aside { background-color: #EEE }

• 父选择器的标识符&

    a {
        font-weight: bold;
        text-decoration: none;
        &:hover { text-decoration: underline; }
        body.firefox & { font-weight: normal; }
    }
    /*编译为*/
    a {
        font-weight: bold;
        text-decoration: none; }
    a:hover {
        text-decoration: underline; }
    body.firefox a {
        font-weight: normal; }

• 属性嵌套

    nav {
        border: {
            style: solid;
            width: 1px;
            color: #ccc;
        }
    }

5. 混合器

• 样式类似，可以通过sass的混合器实现大段样式的重用。
• 混合器使用@mixin标识符定义
• 通过@include来使用这个混合器

1. 混合器用法

• 下例定义混合器，目的是添加跨浏览器的圆角边框。

    @mixin rounded-corners {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    
    /*引用*/
    notice {
        background-color: green;
        border: 2px solid #00aa00;
        @include rounded-corners;
    }
    
    /*sass编译*/
    .notice {
        background-color: green;
        border: 2px solid #00aa00;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

2. 混合器传参

    @mixin link-colors($normal, $hover, $visited) {
        color: $normal;
        &:hover { color: $hover; }
        &:visited { color: $visited; }
    }
    
    /*引用*/
    a {
        @include link-colors(blue, red, green);
    }
    
     /*sass编译*/：
    a { color: blue; }
    a:hover { color: red; }
    a:visited { color: green; }

3. 默认参数值

   @mixin link-colors($color:red) {
        color: $color;
    }
    
    /*引用*/
    a {
        /*不传参*/
        @include link-colors();
    }
    
     /*sass编译*/：
    a { color: red; }

6. 继承

• 通过@extend语法实现

    .error {
        border: 1px solid red;
        background-color: #fdd;
    }
    .seriousError {
        @extend .error;
        border-width: 3px;
    }

7. 导入SASS文件

• @import 它允许在一个css文件中导入其他css文件
• 使用sass的@import规则并不需要指明被导入文件的全名,可以省略.sass或.scss文件后缀

    @import './common.scss';
    @import './reset.scss';