SASS的簡單用法

一、sass的由來

由於css不是程式語言，沒有變數，沒有條件語句，編寫起來費事，於是就有了css預處理器（css preprocessor），sass就是其中之一。

二、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

}

sass中有兩種注釋風格

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

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

四、**重用

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

例如：

.class1 

.class2

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 
.#

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

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

darken(#cc3,10%)//#a3a329
grayscale(#cc3)//#808080 
complement(#cc3)//#33c

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