不同的css，sass(scss)的基本使用

時間 2020-01-08

標籤不同 css sass scss 基本使用欄目 CSS 简体版

原文原文鏈接

前言

此文主要記錄sass的scss語法的基本使用。sass是css的預編譯器,它擴展一些css所沒有的變量的定義、條件控制、循環、自定義方法等。css

基礎內容

1.變量

/*scss*/ 
//聲明變量
$primary-color:#1269b5;

//使用變量
div.box{
    background-color: $primary-color;    
}

 /*css*/ 
div.box{
    background-color:#1269b5;    
}

2.嵌套

後代

/*scss*/ 
.nav {
  height: 100px;
  ul {
    margin: 0; 
    li {
     float: left;
     list-style: none;
     padding: 5px;
      }
   }
}

 /*css*/
.nav{
    height: 100px;
}

.nav ul{
    margin: 0;
}

.nav ul li {
    float: left;
    list-style: none;
    padding: 5px;
}

嵌套時調用父選擇器 (父子)
使用&的地方會使用父選擇器html

/*scss*/ 
 .nav {
   & &-text {
      font-size: 15px;
        &:hover{
          color: blue;
       }
    } 
 }
 
  /*css*/ 
 //父子層級的
 .nav .nav-text{
    font-size: 15px; 
 }
 
 .nav .nav-text:hover{
    color: blue;
 }

屬性的嵌套

/*scss*/ 
 .nav {
   border: 1px solid #000 {
     left:0;
     right:0;
    }
  }
 
 /*css*/ 
 .nav {
     border: 1px solid #000;
     border-left: 0;
     border-right: 0;
  }

3.混合

/*scss*/ 
 //聲明一個setColor的混合
 @mixin  setColor ($text-color,$background) {
  color:$text-color;
  background-color:$background;
    .text {
      color: darken($text-color,10%); //在原來顏色的基礎上加深10%
     } 
  }
  
 .content{
     //使用這個混合
    @include  setColor(#fefefe,#969696)
  }
 
 /*css*/
 .content {
    color: #fefefe;
    background-color: #969696;
  }

 .content .text{
    color: #e5e5e5;
 }

tips: setColor是名稱,傳遞的參數必定要帶$，和變量同樣;

4.繼承

繼承時也會繼承和被繼承的類相關的選擇器樣式前端

/*scss*/ 

 .content {
     padding: 15px;
 }
 
 .content a {
     font-weight: bold;
 }

 .content-info {
     @extend .padding;
     color: #969696;
 }
 
 /*css*/ 
 
 .content , .content-info{
      padding: 15px;
    }

 .content a ,  .content-info a{
      font-weight: bold;
   }
   
 .content-info {
      color: #969696;
   }

5.Partials和@import

被引入的文件，Partials文件，如下劃線開頭，不會被編譯。
_base.scssvue

body {
     margin: 0;
     padding: 0;
  }

other.scsses6

/*scss*/ 
 @import "base";
  .a {
    color: #969696;
  }
 
  /*css*/
   body {
     margin: 0;
     padding: 0;
   }
  
  .a{
    color: #969696;
   }

6.註釋

//這是單行，不會出如今css裏面
 /*這是多行，會包含在沒有壓縮以後的css裏面*/
 /*!這是強制輸出註釋內容*/

7.列表

用空格或逗號分隔開的就是列表,相似其餘語言的數組

padding: 5px 10px;

border: 1px solid red;

列表函數

length(5px 10px) //2  獲取長度

nth(5px 10px,1) //5px  獲取序號 從1開始

index(1px solid red,solid) //2  獲取下標從0開始

append(5px 10px,5px) // (5px 10px 5px)   添加 

join (5px 10px ,5px 0) //(5px 10px 5px 0) 組合成新的列表

join (5px 10px ,5px 0,comma) //(5px,10px,5px,0)

8.map與相關函數

$colors:(
  light:#fff,
  dark:#000
 )
  
 map-get($colors,dark)  // #000 //獲取指定的值
 map-keys($colors) // (light,dark) //獲取全部的key
 map-values($colors) // (#fff,#000) //獲取全部的值
 map-has-key($colors,light) //true  是否有當前的key
 map-merge($colors,(light-gray: #e5e5e5))  //添加
 map-remove($colors,light,dark)  // (light-gray: #e5e5e5)     刪除

9.插值

#{}, 一個#和一個花括號裏包含變量就是插值。segmentfault

/*scss*/
 $name: "info";
 $attr: "border";
 .content-#{$name} {
   #{$attr}-color: #ccc;
 } 
 
 /*css*/
  .content-info {
     border-color: #ccc;
  }

10. 條件控制

/*scss*/
  $flag= true;
  $theme: "light";
  .body {
   @if  $theme == dark {
     backgroud-color: black;
   } @else if $theme == light {
     backgroud-color: white;
   } @else {
     backgroud-color: grey; 
   }
 }

  .content {
    @if  $flag {
      color: red; 
     }  @else {
      color: yellow;   
     }
   }
   
 /*css*/
  .body {
    backgroud-color: white;  
  }
  
  .content {
    color: red;  
  }

tips: 而且: and/&& ,或: or、去反: not、返回: @return

10. @for

@for $var form <開始值> through <結束值>
@for $var form <開始值> to <結束值>

/*scss*/
$columns: 3;
@for $i from 1 through $columns {
 .col-#{$i} {
   width: 100% / $columns * $i  
   }     
}

@for $i from 1 to $columns {
 .row-#{$i} {
   width: 100% / $columns * $i  
   }     
}

/*css*/
.col-1 {
     width: 25%
}

.col-2 {
     width: 50%
}

.col-3 {
     width: 75%
}


.row-1 {
     width: 25%
}

.row-2 {
     width: 50%
}

tips: through循環的次數，包含結束值 , to循環次數不包含結束值

11. @each

循環列表數組

/*scss*/
 $icons：success error warning;
 @each $icon in $icons {
  .icon-#{$icon} {
     background-image: url(../images/icons/#{$icon}.png) 
  }
 }

 /*css*/
 
 .icon-success {
    background-image: url(../images/icons/success.png)   
 } 
 
 .icon-error {
    background-image: url(../images/icons/error.png)   
 }
 
 .icon-warning {
    background-image: url(../images/icons/warning.png)   
 }

12. @while

/*scss*/
 $i: 6;
 @while $i > 0 {
   .item-#{$i} {
       width: 5px * $i; 
    }
   $i: $i-2;    
 }
 
/*css*/
.item-6 {
     width: 30px;
 }
 
.item-4 {
     width: 20px;
 }
 
.item-2 {
    width: 10px;
 }

13. 用戶自定義函數

/*scss*/
 $colors:(light: #fff,dark: #000)
 @function color($key){
  //警告
  @if not map-has-key($colors,$key)   {
   @warn  "在$colors裏沒找到 #{$key}這個key"
   } 
   @return map-get($colors,$key);
 }
 
 .body {
   background-color: color(light);
 }
 
 /*css*/
 .body {
   background-color:  #fff; 
 }

tips: 異常信息能夠設置警告 @warn和錯誤 @error

BEM規範建議

規範sass

.block { /* 塊*/ } 
.block__element { /* 元素 */ } 
.block--modifier { /* 修飾符 */ }

實際應用app

<!--塊 -->
<div class="content"> 

 <!-- content__button 元素 -->
  <button   
    class="content__button
    
    content__button--red ">
  </button>
    <!-- content__button--red 修飾 -->
</div>

/*scss*/

//塊
.content {
    
  //元素    
  &__button {
      width: 40px;
      height:  40px;
      padding: 5px;
  }

  //修飾
   &__button--red {
     color: red 
   }
}

/*css*/

content__button {
     width: 40px;
     height:  40px;
     padding: 5px;
 }
 
 content__button--red {
     color: red 
 }