scss使用方法以及相關內容

咱們平時都稱之爲 Sass，其實可分紅sass和scss， 其中Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，以「.sass」後綴爲擴展名；而 SCSS 是 Sass 3 引入新的語法，其語法徹底兼容 CSS3，而且繼承了 Sass 的語法書寫和咱們的 CSS 語法書寫方式很是相似，較爲寬鬆，以「.scss」後綴爲擴展名；兩者能夠說是一個東西

sass嵌套

1. 選擇器嵌套

<header>

　　<nav> <a href="#">home</a> <a href="#">page</a> </nav> </header> nav a { color:red; } header nav a { color:green; } nav { a { color: red; header & { color:green; } } }

屬性嵌套(有相同的屬性前綴

如 font, background等，也有多是 -webkit-

.box { font-size: 12px; font-weight: bold; } .box { font: { size: 12px; weight: bold; } }

僞類嵌套

同上選擇器嵌套同樣 使用 & 關鍵字

.clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } } clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }

 

佔位符：

• • 語法：%placeholder，
  • 用法：佔位符不被 @extend 調用不產生任何代碼

　　　　

%bg {
  background-color: #FF0;
}
%w {
  width: 100px;
}
.box {
  @extend %w;
  height: 100px;
  @extend %bg;
}

 

sass 語法

容許使用變量 以 $ 開頭

$test: #ff9500
div{
       color: $test;
}
也能夠字符串拼接

$side : left;
  
.rounded { 
        border-#{$side}-radius: 5px;
 }

sass分享：

內容：全局、默認、局部變量
使用：默認變量 在局部中無效，覆蓋 默認變量 不分上下順序

<div class="box1">
  <div class="box2">box2</div>
</div>
$backgroundColor: #FF0;                  // 全局變量
$backgroundColor: #000 !default;      // 默認變量
$color: #F0F;

.box1 {
  $color: #CCC;                                   // 局部變量
  width: 100px;
  height: 100px;
  background-color: $backgroundColor; // #FF0
  .box2 {
    color: $color;                                      // #CCC
  }
}

sass 的 @if 控制指令

單獨使用@if：

當@if 的表達式不是false或者null時， 條件成立， 輸出{} 內的代碼

.demo{
  $fx: bottom;
  @if ($fx == top) {
    border-color: transparent transparent pink transparent;
    border-style: dashed dashed solid dashed;
  }
  @else if($fx == right){
    border-color: transparent transparent transparent pink;
    border-style: dashed dashed dashed solid;
  }
  @else if($fx == bottom){
    border-color: pink transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  }
  @else if($fx == left){
    border-color: transparent pink transparent transparent;
    border-style: dashed solid dashed dashed;
  }

  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 60px;
}

 

混合指令 + @if 指令

// 畫三角形@mixin聲明
@mixin sj($fx:top,$size:100px,$color:red){

  @if ($fx == top) {
    border-color: transparent transparent $color transparent;
    border-style: dashed dashed solid dashed;
  }
  @else if($fx == right){
    border-color: transparent transparent transparent $color;
    border-style: dashed dashed dashed solid;
  }
  @else if($fx == bottom){
    border-color: $color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  }
  @else if($fx == left){
    border-color: transparent $color transparent transparent;
    border-style: dashed solid dashed dashed;
  }

  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: $size;

}

//mixin的調用
.demo{
  @include sj(left, 66px, pink);
}

less 與sass有個很明顯的區別
變量
我們sass 變量用 $ 開頭
less 是以 @ 開頭的

sass語法 @for 控制指令

@for 指令能夠在限制的範圍內重複輸出格式，每次按要求（變量的值）對輸出結果作出變更；

這個指令包含兩種格式：
@for $var from through ，
或者
@for $var from to

<ul>
  <li class="item-1">至尊魔法師</li>
  <li class="item-2">王</li>
  <li class="item-3">奇異博士</li>
  <li class="item-4">莫度男爵</li>
  <li class="item-5">哈姆雷特</li>
  <li class="item-6">蜘蛛俠</li>
  <li class="item-7">非人哉</li>
</ul>

rom ... through

// 當使用 through 時，條件範圍包含 與 的值

// 我的分析： 能夠將一個頁面，不一樣div中嵌套的元素設置樣式，只要命名符合必定的規律

@for $i from 1 through 7 {
  .item-#{$i} { 
    width: 6em * $i;
    background: pink;
    margin: 6px 0;
  }
}