scss新手使用指南

還在用死的css寫樣式嗎？那可太麻煩了，各類長串選擇器不說，還有各類繼承權重有時候還有可能不生效

 

個人小程序項目也結束了，是時候總結一下scss語法了，畢竟用起來更加方便並且還能精簡一點代碼，好處多多啊（新項目使用的是stylus，等我弄完了又來總結一手）

1. 經過$符號去聲明一個變量，而後複用

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2. 支持嵌套規則，這也是我用的比較多的，可是過分的使用嵌套會讓產生的CSS難以維護，所以仍是要稍微注意一下

.mycon{
    .my-top{
        width: 316px;
        height: 50px;
        position: relative；
    }
}

3.支持繼承，使用@extend 後面加上的class名，若是須要繼承多個類用逗號隔開

繼承這個就太方便了，對於那種要求了字體的不一樣啊什麼大小不一樣啊，這種看起來很瑣碎的樣式，這簡直就是一鍵複製粘貼的效果啊有木有！！！

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error; // 直接繼承hhh
  border-width: 3px;
}

4. 支持混合繼承，用來分組那些須要在頁面中複用的CSS聲明，開發人員能夠經過向Mixin傳遞變量參數來讓代碼更加靈活，沒看懂？上代碼

/*===== SCSS=====*/
@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}
/*===== CSS=====*/
.box {
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

5. 支持引用父級選擇器&，簡單點說就是能夠直接在父級選擇器上加新樣式，而不用從新寫，好比僞類選擇器什麼的

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

/*===== CSS =====*/
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; 
}

6. 支持屬性嵌套，只能說他們想法真的是清奇，做爲一個前端實習生沒看到這樣作的效果hhh

/*===== SCSS =====*/
.mytest {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
/*===== CSS =====*/
.mytest{
  font-family: fantasy;mytest
  font-size: 30em;
  font-weight: bold;
}

7. 支持嵌入字符串哦，like this >  #{ 變量 }

$bg-path: "./img"

.card{
    background: url("#{$bg-path}/card-bg.png" center center);
}

8. 若是要引入scss文件，使用@import