一、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也可以表示...