Scss开发临时学习过程||webpack、npm、gulp配置

SCSS语法：
    假设变量申明带有!default，那么如果在此申明之前没有这个变量的申明，则用这个值，反之如果之前有申明，则用申明的值。

    ‘...’传递多个参数：
    @mixin box-shadow($shadow...){
        -webkit-box-shadow:$shadow;
        -moz-box-shadow:$shadow;
        box-shadow:$shadow;
    }

    用在属性或者选择器上，就得以#{}包裹

    多个变量值一起申明：
    $linkColor: red blue !default;
    a{
        color:nth($linkColor,1);
        &:hover{
            color:nth($linkColor,2);
        }
    }

    定义变量:$名字   
    引用方式:$变量名
    颜色：
    $linkColor: #08c;
    a {
        text-decoration:none;
        color:$linkColor;
        /***&代表其上级***/
        &:hover{
          color:darken($linkColor,10%);
        }
    }


    嵌套：f1{
        f2{
            f3{}
        }
    }

    导入：@import '具体的路径/文件名' 

    方法定义：@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);
    }

    扩展（继承）：
    .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;
    }

    运算：
    .container { width: 100%; }
    article[role="main"] {
      float: left;
      width: 600px / 960px * 100%;
    }
    aside[role="complimentary"] {
      float: right;
      width: 300px / 960px * 100%;
    }

SCSS语法初级