CSS秘宝-SASS学习

前提安装好编译工具，webcpak等打包转成正常的css

基本用法：

1.变量
    //sass style
    //-----------------------------------
    $fontStack:    Helvetica, sans-serif;
    $primaryColor: #333;

    body {
      font-family: $fontStack;
      color: $primaryColor;
    }
2.嵌套：

    //sass style
    //-----------------------------------
    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      li { display: inline-block; }

      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }

3.导入  @import '  ';

    //sass style                 
    //-----------------------------------
    // _reset.scss

    html,
    body,
    ul,
    ol {
       margin: 0; 
      padding: 0;
    }
     
     /sass style
    //-----------------------------------
    // base.scss 

    @import 'reset';

    body {
      font-size: 100% Helvetica, sans-serif;
      background-color: #efefef;
    }

    //css style
    //-----------------------------------
    html, body, ul, ol {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #efefef;
      font-size: 100% Helvetica, sans-serif;
    }

4.mixin

    //sass style
    //-----------------------------------
    @mixin box-sizing ($sizing) {
        -webkit-box-sizing:$sizing;     
           -moz-box-sizing:$sizing;
            box-sizing:$sizing;
    }
    .box-border{
        border:1px solid #ccc;
        @include box-sizing(border-box);
    }
相当于：
    //css style
    //-----------------------------------
    .box-border {
      border: 1px solid #ccc;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

5.扩展/继承
sass可通过 @extend来实现代码组合声明，使代码更加优越简洁。

    //sass style
    //-----------------------------------
    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }

    .success {
      @extend .message;
      border-color: green;
    }

    .error {
      @extend .message;
      border-color: red;
    }

    .warning {
      @extend .message;
      border-color: yellow;
    }

6.运算
sass可进行简单的加减乘除运算等

    //sass style
    //-----------------------------------
    .container { width: 100%; }

    article[role="main"] {
      float: left;
      width: 600px / 960px * 100%;
    }

    aside[role="complimentary"] {
      float: right;
      width: 300px / 960px * 100%;
    }

7.颜色
sass中集成了大量的颜色函数，让变换颜色更加简单

    //sass style
    //-----------------------------------
    $linkColor: #08c;
    a {
        text-decoration:none;
        color:$linkColor;
        &:hover{
          color:darken($linkColor,10%);
        }
    }

    //css style
    //-----------------------------------
    a {
      text-decoration: none;
      color: #0088cc;
    }
    a:hover {
      color: #006699;
    }

未完待续~~~~