本文總結sass相關核心知識點

說明：本文的內容是，我在開發實踐中總結的實用性比較強的sass知識點，其他未涉及的知識，如果對你有作用請自行查閱

sass知識目錄

嵌套
註釋
SassScript
@規則
Mixin指令

1. 嵌套

   一般寫法
       div{
           p {} 
       }
   &父選擇器引用
       div{
           &:hover {}
           &-span { background:red; }
       }
   相同前綴的css樣式簡寫形式 
       div{
           font: {
               family
    
   : fantasy;
               size: 30em;
               weight: bold;
           }
       }
       div{
           font: 20px/24px fantasy {
               weight: bold;
           }
       }

2. 註釋

   多行註釋 /* */ 會被編譯成css中的註釋
   單行註釋 // 在編譯後的css中去除

3. SassScript

   聲明變量 
       局部變量 $width: 2px;
       全局變量 $width: 50px !global;
   數據類型
       number -> 1 11.1 11px
       string ->
    
    "title"
           應用
               $name: "p";
               div #{$name} {
                   width: 100px;
               }
       color -> red
       boolean -> true
       null -> null
       list -> 11px 10px 12px 或者 11px, 10px, 12px
       map -> (key: value, key1: value1)
       function
   運算符
       + - * / % < > <= >=
    
   
       其中 / 運算只在以下三種情況中生效
           $width/2 和變量運算
           (10px/8px) 加上小括號
           5px + 8px/2px 作為其他運算表達式的一部分

4. @規則

   @import 導入其他的css,scss文件
       @import "demo"; 等效於 @import "demo.scss";
       scss文件默認會編譯成css文件，如果你的scss文件只想被其他文件import，可以在定義的文件名前面加上_
           如 _demo.scss 然後使用 @import "demo" 即可
       嵌套的@import
           假設_demo.scss文件中定義了如下的css
               div{
                   width: 100%;
               }
           在main.css中導入
               .box {
                   @import "demo";
               }
           將編譯成    
               .box div{
                   width: 100%;
               }
   @media 嵌套
       編譯後@media包裹在選擇器的最上面，在做響應式時候，這種寫法可以避免重復書寫選擇器
       div {
           width: 100%;
           @media screen {
               height: 100%;
           }
       }
   @extend 選擇器替換繼承
       基本使用
           div{ 
               width: 100%;
           }
           div.box {
               height: 100%;
           }
           #id{
               @extend div;
           }
           相當於將包含div的選擇器的樣式復制一份，然後把div替換成#id，編譯後結果如下
           div, #id {
               width: 100%;
           }
           div.box, .box#id {
               height: 100%;
           }
       占位符
           div ye%box{
               width: 100%;
           }
           #id{
               @extend %box;
           }
           編譯後結果
           div ye#id {
               width: 100%;
           }

5. Mixin指令

   相當於定義函數
       @mixin size($w, $h) {
           width: $w;
           height: $h;
       }
       div{
           @include size(100%, 100%);
       }

sass實用知識點