學習 前端 sass學習筆記

2022-08-30 08:15:12 字數 947 閱讀 4847

字尾:

sass有兩種字尾檔案:一種字尾名為sass,不使用大括號和分號;另一種就是我們這裡使用的scss檔案,這種和我們平時寫的css檔案格式差不多,使用大括號和分號。

下面舉出 字尾為sass檔案寫法:

body

background:#eee

font-size:12px

匯入sass的匯入(@import)規則和css的有所不同,編譯時會將@import的scss檔案合併進來只生成乙個css

@import "reset.scss"

@import "a"

p編譯出來的檔案

@import "reset.css"

body

注釋:sass兩種注釋,一種是標準css注釋/** **/另一種則是//雙斜槓單行注釋

/***我是css標準注釋

**/body

//我是雙斜槓單行注釋

body

變數:sass變數必須是$開頭,後面緊跟變數名,而變數值和變數名之間需要:隔離。

$fontsize:12px;

body

預設變數

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

$baselineheigh: 1.5!default;

sass的預設變數一般是用來設定預設值,然後根據需求覆蓋的,覆蓋的方式就是在預設變數前寫個相同的變數

////

$baseheight: 2;

$baseheight:1.5 !default;

body

//body

特殊變數

一般我們定義的變數都為屬性值,可以直接使用,但是如果變數作為屬性或在某些特殊情況下等則必須要以 #形式使用。

$borderdirection: top !default;

//應用於class和屬性

.border-#

}

Sass學習筆記

安裝 2.開啟ruby的命令視窗 start command prompt with ruby 輸入gem install sass gem install sass pre 要安裝beta版本的 gem update sass 公升級sass vsass hgit安裝 git clone git ...

Sass學習筆記

1.全域性變數p background color color red span div2.default 第二種,使用前面定義的值 color red 變數申明帶有 default,但是前面還有這個變數的申明 color blue default p3.變數用 包裹 btnclass btn de...

Sass學習筆記。

定義 css預處理器定義了一種新的語言,其基本思想是,用一種專門的程式語言,為css增加了一些程式設計的特性,將css作為目標生成檔案,然後開發者就只要使用這種語言進行編碼工作。採用ruby語言編寫的一款css預處理語言 副檔名 sass 嚴格的縮排式語法 scss 與平時css語法書寫類似 scs...