SCSS学習

一、SCSSとは何ですか.
答え:最近やっとシステムの理解の道路Sass、scssのこれらの名詞を計算して、
Sass:CSS 3の一種の拡張で、変数、ネスト、拡張、混合、色などの特殊な文法を追加しました.コマンドラインツールまたはwebフレームワークで標準のCSSに変換します.
ScssはSassの新しい文法で、CSS 3のスーパーセットです.
私にとって、ScssはCssの文法形式と極めて似ていて、最近react+webpackの小さいプロジェクトを練習する時に使ってやっと勉強したいのです.
二、入門:
1、変数:
SCSS:

$color:#000;
body{
    color:$color;
}

CSS:

body{
    color:#000;
}

2、ネスト:
SCSS:

ul{
    li{
         border:1px solid #000;
         a{
               font-size:16px;
           }
      }
}

CSS:

ul li{border:1px soid #000;}
ul li a{font-size:16px;}

3、インポート:
SCSS:

//a.scss
body,a,li{margin:0;padding:0;}
//b.scss
body{color:#000;}

CSS:

body,a,li{margin:0;padding:0;}
body{color:#000;}

4、ブレンド(mixin):
SCSS:

@mixin border-radiu($a){
            -webkit-border-radiu:$a;
            -moz-border-radiu:$a;
           -mz-border-radiu:$a;
            border-radiu:$a;
}
.div1{
        border:1px solid #000;
        @include border-radiu(10px);
}

CSS:

.div1{
         border:1px solid #000;
         -webkit-border-radiu:10px;
         -moz-border-radiu:10px;
         -mz-border-radiu:10px;
         border-radiu:10px;
}

、拡張および継承
SCSS:

.message{
            border:1px solid #000;
}
.success{
    @extend .message;
    background:green;
}

CSS:

.message{
          border:1px solid #000;
 }
.success{
          border:1px solid #000;
          background:green;
}

、演算
SCSS:

div[role="left"]{
      width:96/3*100%;
}

CSS:

div[role="left"]{
         width:32%;
}

色
SCSS:

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

CSS:

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