32.Vue.js :sass學習

1.變量

sass 允許使用變量，所以變量以 $ 開頭

$blue:#1875e7;
div{
    color:$blue
}

如果變量需要鑲嵌在字符串之中，就必須需要寫在 #{} 之中

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

2.計算功能

sass允許在代碼中使用算式：

$var:20;
body{
    margin:(14px/2);
    top:50px+100px;
    right：$var * 10%;
}

3.嵌套

sass 允許選擇器嵌套

div h1 {
    color: red;
}

//可以寫成
div{
hi{
color:red;
}
}

屬性也可以嵌套

p{
    border-color:red;
}

//也可以寫成
p{
    border:{
        color:red;
    }
}

注意：border後面必須加：冒號；

4.註釋

sass 共有兩種註釋風格

標準的css註釋/*comment*/,會保留到編譯後的文件

單行註釋//comment，只保留在sass源文件中，編譯後被省略

5.代碼的重用

• 繼承

//sass 允許一個選擇器，繼承另一個選擇器
.class1{
    border:1px solid #ddd;
}

//class2 要繼承class1，就要使用@extend 命令：
.class2{
    @extend.class1;
    font-size:120%;
}

• Mixin

Mixin 有點像c語言的宏，是可以重用的代碼塊；

使用@mixin 命令，定義一個代碼塊；