鐵人賽快要過完一半,發現有點山窮水盡,代表之前庫存快要用完了慘,連假前真的要趕工了,不然連假就不用們要乖乖寫鐵人囉
今天來到scss的Values,就直接進入範例來說明,一般來講很常有用到$的部分,之前範例也有舉例到,不過今天會介紹一些比較不常用的變數使用方式,
//編譯前
$black: rgba(#000, 0.9); //另外設定
$black: #000 !default; //預設值
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
code {
color: $black;
border-radius: $border-radius;
box-shadow: $box-shadow;
}
//編譯後
code {
color: rgba(0, 0, 0, 0.9);
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
上面的範例我們設定兩個black的變數,有default跟沒有default狀況,如果上述兩個如果都沒有default,正常編譯結果通常都會是所謂後蓋前,顯示數值會是#000,不過我們如果有設定default,他會根據我們是否有重新設定,如果有重新設定會以新的變數的value為主,通常我們在一些框架中,顏色樣式很常會看到這樣方式管理,讓我們可已另外設定新的值進去
//編譯前
$myColor: red;
h1 {
$myColor: green !global;
$myColor: blue;
color: $myColor;
}
p {
color: $myColor;
}
.text2 {
color: $myColor;
}
//編譯後
h1 {
color: blue;
}
p {
color: green;
}
.text2 {
color: green;
}
global這個變數用來定義全域變數作為使用,範例中h1 定義兩個相同的變數,一般通常我們不會這樣使用兩個一樣變數,這時候我們其中一個變數有做了global,讓他變為全域,後面兩個標籤所編譯出來的檔案確實是設定全域變數得值,通常變數通常在定義層裡面才會有效果,透過這個方法可以把他變成全域部分,吃到我們的另外設定值,不過這樣我們一開始設定的$myColor也廢了,就可以這樣陷害同事(X,上面的這個用法副作用比較大在使用上可能要好好考量