強悍的 CSS 擴充套件語言 Sass

2022-01-10 04:51:58 字數 3142 閱讀 8186

<


div 


class 


= 'testborder'


>


<


p>


<


input


/>


p>


div>
假設上面這 3 個 dom 元素有這樣的需求， div 去邊框， p 顯示邊框， input 只顯示底部邊框, 而且統一用 !important 關鍵字提高樣式的優先權；

如果手寫純 css 會是這樣：

.testborder.testborder p.testborder p input
會發現，有重複的**".testborder", ".testborder p", "!important"。 這只是簡單的需求，如果專案龐大對樣式的需求複雜，這樣手寫 css 和搬磚真沒區別；

而換用 sass 來寫：

$imp: !important; /*定義變數*/


.testborder}


}
**可巢狀了；

css 是層疊樣式表，不是語言，缺乏程式語言中強大的特性：變數、函式、運算、迴圈、判斷、繼承等；

而它的擴充套件語言 sass 就支援這些特性，sass 讓我們用程式設計方式來寫 css **從而提高效率節約程式設計師的時間；

sass 的官網：  裡面文件非常精確齊全，都不用再看其它介紹文章了，顯示得多餘。文件雖然是雞腸，但都是比較常用的單詞，且還有例子，基本能看明白；

下面就最近自己常用的 sass 知識點做下簡要的記錄，方便以後複習；

1.變數

定義變數 "$[name]: [value];"

$columncount: 5; 


/*數字


*/$columnwidth: 100px;


/*樣式


*/$columnclassname: 'column';


/*字串


*/$domtypearr: ('input','select','div');


/*陣列


*/$canextend:true; 


/*布林


*/
2.函式、判斷定義函式： "@function [funcname]([parameters])"

呼叫方式： [functionname]([parameter]);

@function extendwidth($width)@else}
上面加粗的**就是判斷，和 js 的判斷一樣，區別只是關鍵字前面要加 @字元，如 @if  @else

3.混合指令 @mixin ， 迴圈for

mixin 不知怎麼翻譯，搜了一遍翻譯為 "混合指令"， 作用是把一串 css 包在一起，供呼叫；

定義： "@mixin [mixinname]([parameters])", ([parameter]) 括號和parameter 是可選的，即沒有引數時可不加括號(); 

呼叫方式： @include [mixinname]([parameter])

@mixin push($pushwidth)@mixin column($columnindex,$pushwidth:null)}


@mixin generatetable#}


}}.my-form
注意： mixin 與函式的主要區別：mixin 相當於一段**塊，和函式一樣可在其它地方重複呼叫，它不像函式那樣返回乙個值，它是返回乙個**塊，呼叫前要加關鍵字 @include；

@for $i from 1 through $columncount 這是 for 迴圈，把 $i 從 1 開始遞增到 $columncount；

如果要迴圈乙個陣列或集合，要用到 @each $var in [array]{}

把上面三段** copy 到乙個檔案(如 test.scss), 在命令視窗中呼叫 sass 命令：

sass c:\test.sass c:\test.css
生成的 css ：

@charset "gbk";


/*數字


*//*


樣式*/


/*字串


*//*


陣列*/


/*布林


*/.my-form .my-form .my-table .my-form .my-table .column1 .my-form .my-table .column2 .my-form .my-table .column3 .my-form .my-table .column4 .my-form .my-table .column5
效果：

4.匯入其它sass 檔案：

@import '


test.scss


';
很明顯用 sass 來寫 css, 不但**量倍數級減少，且優雅簡潔易於維護和擴充套件；其實 sass 語法有點像 js ，如果會 js，舉一反三學起來很容易；

window 下的編譯環境：

再安裝 sass, 

gem install sass
就可以用 sass 命令進行編譯了：

sass input.scss output.css

CSS擴充套件「less 和」sass「

css擴充套件技術是對css原生 一種擴充套件，其中less和sass就是css擴充套件技術兩種方式，通過擴充套件技術，可以使我們在寫css 時候，更加的方便和快捷。首先要了解css擴充套件技術的含義 擴充套件技術並不是另外一種全新的技術，它是建立在css基礎上進行擴充套件，實現一些css原生 所不...

CSS框架sass的簡單一覽

sass結尾的檔案有著更嚴格的格式要求，scss檔案更貼近原生css 比如sass檔案 css code複製內容到剪貼簿 等同於scss的 css code複製內容到剪貼簿 編譯後為 其中代表父級元素的 只可出現在頭部，否則解析不出來。巢狀屬性 css code複製內容到剪貼簿 編譯為css cod...

CSS的擴充套件選擇器

基本選擇器有三個，當設定樣式的時候不是很方便。目前有三個擴充套件選擇器 關聯選擇器 組合選擇器 偽元素選擇器。一 關聯選擇器 設定巢狀標籤的樣式。例 關聯選擇器.html 可是大家發開始 卡和手機 這一行的背景是blue。aaaaaaaa 二 組合選擇器 設定巢狀標籤的樣式 例 組合選擇器.html...