SASS的簡單用法

2021-08-04 14:52:28 字數 2479 閱讀 7129

一、sass的由來

由於css不是程式語言,沒有變數,沒有條件語句,編寫起來費事,於是就有了css預處理器(css preprocessor),sass就是其中之一。
sass是一種css的開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得css的開發,變得簡單和可維護。

二、sass的安裝及使用

1.  安裝

sass是ruby語言寫的,但是兩者的語法沒有關係。不懂ruby,照樣使用。只是必須先安裝ruby,然後再安裝sass。

安裝完成ruby後,在命令列輸入 gem instail sass (不同編輯器需要安裝不同的外掛程式來支援sass使用)

2. 使用

sass提供的四種編譯風格

* nested:巢狀縮排的css**,它是預設值。

* expanded:沒有縮排的、擴充套件的css**。

* compact:簡潔格式的css**。

* compressed:壓縮後的css**。

三、基本用法

1. sass中允許使用變數,所有的變數以$開頭
例如 :$color

:red;

div

如果變數需要鑲嵌在字串中,就必須寫在#{}中

例如:$side: left;

div-radius:5px;

}

2.計算功能

sass允許在**中使用計算功能

div

3.巢狀(應用這種方法可以使**結構更加清晰,層級分明)

sass允許選擇器巢狀

例如:

div h2 

可以寫成:

div

}

屬性巢狀 border 後面必須加 : 

div}

在巢狀的**塊中,可以使用&引用父元素。例如:a:hover

a

}

4.注釋:

sass中有兩種注釋風格

1.標準的css注釋/* comment */

2.單行注釋 //comment 只保留在sass原檔案中,編譯後被省略(使用這種注釋優化測試中的**,省去刪除注釋的麻煩)

四、**重用

1. sass允許乙個選擇器繼承另乙個選擇器

例如:

.class1 

.class2

2.mixin

mixin有點類似與c語言中的巨集(macro)是可以重複使用的**塊

使用@mixin定義乙個**塊;

@mixin

left

使用@inclode命令,呼叫mixin
div
mixin 的強之處,在於可以指定引數和預設值
@mixin

left($value:10px)

指定的變數只能在內部使用,外部無法使用,如果指定有變數,還可以在呼叫的時候修改,如果沒有定義變數則不可以修改。

div

用mixin方法生成瀏覽器字首,

@mixin rounded($vert,$horz,$radius:10px)-#-radius:$radius;

-moz-border-radius-##:radius;

-webkit-border-#-#-radius:$radius;

}

呼叫 相當於js中的函式,呼叫乙個函式

.# li

.#

3.顏色函式

sass提供了一些內建的顏色函式,以便生成系列顏色。

lighten(#cc3,10px)//#d6d6d5

darken(#cc3,10%)//#a3a329

grayscale(#cc3)//#808080

complement(#cc3)//#33c

4.插入檔案

@inport命令,用來插入外部檔案

@import

"path/filename.scss"

;

如果插入的是.css檔案,則等同於css的import命令,利用css提供的外部鏈結功能與link相似
@import

"foo.css"

;

mysql的簡單用法 mysql簡單用法

刪除使用者 drop user jack drop比delete刪除的優勢在於drop可以刪除使用者的許可權,更加徹底 更改使用者名稱 rename user jack to jacknew 使用者的都存在與user表中,更改名稱,許可權不變 更改使用者密碼 update mysql.user se...

sudo的簡單用法

sudo 的簡單用法 sudo 是linux 下一種能讓普通使用者執行 root 使用者或者其他使用者的命令 在 linux 中為了能方便的作業系統,同事也為了減輕管理員的負擔,這裡就有了 sudo 這個工具,讓普通使用者能執行 root 使用者的一部分權利。在 linux unix 下專門為 su...

XPath的簡單用法

xpath 使用路徑表示式來選取 xml 文件中的節點或節點集。下面使用乙個簡單的xml檔案內容 定位到節點名稱為parent1的元素 xpath為 tree parent1 其中前面加 表示根元素,此時的xpath就是絕對路徑了,在這裡的例子中,因為tree為根元素,所以這裡的xpath也可以表示...