Sass預處理語言

2021-08-07 19:56:41 字數 761 閱讀 4109

一種css的預處理器。

sass 擴充套件了 css3,增加了規則、變數、混入、選擇器、繼承等等特性。

sass 生成良好格式化的 css **,易於組織和維護。

sass的變數定義格式

$變數名:屬性值;

預設變數

sass的預設變數僅需要在值後面加上!default即可。

特殊變數

如果變數作為屬性則必須要以#形式使用。

全域性變數

在變數值後面加上!global即為全域性變數。

選擇器巢狀

所謂選擇器巢狀指的是在乙個選擇器中巢狀另乙個選擇器來實現繼承,從而增強了sass檔案的結構性和可讀性。

在選擇器巢狀中,可以使用&表示父元素選擇器

屬性巢狀

所謂屬性巢狀指的是有些屬性擁有同乙個開始單詞,如border-width,border-color都是以border開頭

sass中使用@mixin宣告混合

可以傳遞引數,引數名以$符號開始

多個引數以逗號分開,也可以給引數設定預設值。

宣告的@mixin通過@include來呼叫。

傳參時需要傳入對應引數名與引數值(鍵值對方式傳參)

基礎繼承 運算

數值型的value (如:數字、顏色、變數等)可進行加減乘除四則運算

注意運算子前後請留乙個空格,不然會出錯。

@if判斷

@if可乙個條件單獨使用,也可以和@else結合多條件使用

SASS 預處理語句

安裝 經過無數次的嘗試後終於成功的安裝了sass到本地版本。v3.4 3 如果還是不成功 瞎子啊乙個cacert.pem到ruby的根目錄下面,然後新增系統的環境變數 ssl cert file carcet.pem的絕對路徑 4 在執行3 一般應該是可以成功的。實現了css的程式設計化 基本語法開...

sass預處理初入門

關於 中文編譯 出錯的問題,需要指定字符集。charset utf 8 必須設定了這個才能編譯有中文的注釋 fontsize 12px body 測試注釋 side left rounded radius 5px 注釋的問題 sass有兩種注釋方式,一種是標準的css注釋方式 另一種則是 雙斜桿形式...

css預處理器sass學習

叫做css預處理器,他的基本思想是用一門專門的程式語言來進行頁面樣式的設計,然後在編譯成正常的css檔案。sass的用法 gem install sass使用sass就是普通的文字檔案,字尾名為.scss。然後讓我們用sass的語法寫好檔案之後,需要編譯成.css檔案才能供html檔案使用 即通過l...