scss中宣告變數

2021-10-24 08:36:48 字數 1093 閱讀 8939

1.scss中定義變數

$bg-color


: #ed795a; //也可以$bg-color


: #ed795a !default;這樣寫 !default 表示是預設值


.btn-default


.btn-default
scss中的變數也存在作用域，類似於js中的區域性變數

$bg-color


: #ed795a;


.btn-default
關於scss中引數傳遞

//@mixin 進行宣告 多個引數 , 分割


@mixin


wd($width)


@mixin


h($height


:18px)


.btn


編譯後是


.btn
2.less樣式 定義變數以@符號開頭即可

@bg-color


:#8ab945;


定義變數bg-color的顏色為#8ab945


.btn-default


.btn-default
less樣式中進行引數傳遞

//less中定義可傳參的樣式相比較scss中要簡單  多個引數;分割


.wd(


@width) 


.height(@h


:18px)


.btn


//編譯後是


.btn
3.css樣式 中定義變數以–開頭即可，在需要用到的地方以var()函式呼叫定義的變數名即可獲取對應值。

body


.btn-default
目前css中定義的變數在ie(具體哪些版本不相容本人並未測試)中並不相容，請大家謹慎使用!

scss 宣告變數與引用

一 變數的宣告 使用 符號可以標識乙個變數 bg color ffffff 二.變數的引用 變數的引用有乙個原則，那就是標準css屬性值存在的地方，變數就可以存在。當編譯成css檔案的時候，變數會被變數值所替代。當要修改css的乙個屬性值時，只要修改對應的變數值即可，沒有必要處處修改，這也是scss...

scss值列表 SCSS筆記1 變數

名詞解釋 li 包起來，表示這是個變數名。字串變數 變數的值如果是字串，一定要用單引號引起來，儘管不引起來也不會出錯。單引號引起來是為了能一眼認出這是變數的值而且是字串值，而不是普通屬性的值。唯一例外是css中類似initial或sans serif的識別符號無須引用起來。乙個最典型的例子 bord...

scss 變數作用域

scss之所以便利，是因為它具有了程式語言的某些特性。讓原本規則刻板的css變的靈活起來，下面介紹一下scss中的作用域概念。幾乎所有程式語言都有作用域概念的涉及，原理大同小異，scss中的也是如此。scss中，變數具有兩種作用域型別 1 全域性作用域。2 區域性作用域。預設情況下，定義在選擇器之內...