sass常用記錄

多寫才能記住

基礎的語法

還是要記一下用法

• 安裝sass
• 監聽，sass --watch sass文件名:輸出的css文件名

父選擇器 &

注意的是&和相連的類名之間不能有空格，有空格就成了后代選擇器了，&會被替換成嵌套外層的父選擇器，有一點特別的是，后面還可以跟后綴

.mod { 
    &.on { 
        color: green; 
    }
    &-houzhui{
        color:red;//后綴，編譯完成就是.mod-houzhui
    } 
}

屬性嵌套

.font-syle {
    font:{
        family: fantasy;
        size: 25px;
        weight: bold;
    }
}

注釋

• /*hello*/ 會被完整輸出到編譯后的css文件中
• //hello不會被輸出到編譯后的文件中

不同于css的語法

變量 $

//定義
$width: 4rem;
//使用
.main {
    width: $width;
}

運算 +, -, *, /, %

插值語句

#{}插值語句可以在選擇器或者屬性名中使用變量，也就是把變量名放在里面

$name: meng;
p.#{$name} {
    color: green;
}
//編譯成
p.meng {
    color: green;
}

@extend

使用場景就是a樣式和b樣式有相同的部分，但是也有不同的部分，那么這相同的部分就可以用繼承的寫法了

.same {
    color: red;
    font-size: 12px;
}
.a {
    @extend .same;
}
//按道理來講會被渲染成
.same .a {
    color: red;
    font-size: 12px;
}

定義混合樣式 @mixin， 引用混合樣式 @include

和@extend的區別，一個是給自己套了一個選擇器(@extend)，一個是把一些樣式寫在了自己的樣式里(@mixin)，看代碼看代碼??！@mixin是解放生產力的一種做法

• 基本使用

@mixin large-text{
    font: {
        family: Arial;
        size: 25px;
    }
    color: #ff0;
}
//使用
.title{
    @include large-text;
    padding: 5px;
}

• 進階使用

@mixin large-text($color, $font-size) {
    color: $color;
    font-size: $font-size;
}
//使用
p {
    @include large-text($color: #fff, $font-size: 20px)
}
//可以傳變量， 變量也可以有默認值，當指令被引用的時候，如果沒有給參數賦值，默認值生效，比如：
@mixin large-text($color, $font-size: 15px) {
    color: $color;
    font-size: $font-size;
}