Sass从0-起飞

前言：sass就是很厉害。

具体看官网即可

1. 完全兼容 CSS3
2. 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
3. 通过函数进行颜色值与属性值的运算
4. 提供控制指令 (control directives)等高级功能
5. 自定义输出格式

话归正文

• 安装

001、安装sass
002、运行sass
003、监视单个sass文件
004、监视整个文件夹

houjianan:~> `sudo gem install sass`

Password:

Fetching: rb-fsevent-0.10.3.gem (100%)

Successfully installed rb-fsevent-0.10.3

Fetching: ffi-1.10.0.gem (100%)

Building native extensions. This could take a while...

Successfully installed ffi-1.10.0

Fetching: rb-inotify-0.10.0.gem (100%)

Successfully installed rb-inotify-0.10.0

Fetching: sass-listen-4.0.0.gem (100%)

Successfully installed sass-listen-4.0.0

Fetching: sass-3.7.3.gem (100%)

Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new

  primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the

  sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:

  http://sass.logdown.com/posts/7081811

Successfully installed sass-3.7.3

Parsing documentation for rb-fsevent-0.10.3

Installing ri documentation for rb-fsevent-0.10.3

Parsing documentation for ffi-1.10.0

Installing ri documentation for ffi-1.10.0

Parsing documentation for rb-inotify-0.10.0

Installing ri documentation for rb-inotify-0.10.0

Parsing documentation for sass-listen-4.0.0

Installing ri documentation for sass-listen-4.0.0

Parsing documentation for sass-3.7.3

Installing ri documentation for sass-3.7.3

Done installing documentation for rb-fsevent, ffi, rb-inotify, sass-listen, sass after 27 seconds

WARNING:  Unable to pull data from 'https://gems.ruby-china.org/': bad response Not Found 404 (https://gems.ruby-china.org/specs.4.8.gz)

5 gems installed
houjianan:~> `sass test.scss test.css`
houjianan:~> `sass --watch test.scss:test.css`
houjianan:~> `sass --watch app/sass/… `

• 变量

    $mColor: #123123;
    $mFontSize: 24px;
    #test {
        font-size: $mFontSize;
        color: $mColor;
    }

• 嵌套

  #mDiv {
        width: 100%;
        height: 100%;
        background-color: red;
        p {
            color: lightcoral;
            text-align: center;
            font-size: 12px;
        }
        span {
        }
        #test {
        }
    }

• 引用

#_test.css

div {
  background-color: ;
}

p {
    font-size: 12px;
}

• 引用

@import '../css/resetA';

• 混合

@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(8px);
}

• 继承

    %testDiv {
        background-color: red;
    }
    #content {
        @extend %testDiv;
    }

• 运算符

    #test {
        width: 100px * 2;
        height: 500px / 3;
    }

• 嵌套属性

    #testFont {
        font {
            size: 12px;
            color: #00008B;
            weight: bold;
        }
    }

• &—super

    #testSuper {
        &: hover {

        }
    }