sass技術(shù)剖析課件

1、SASS應(yīng)用第1頁，共21頁。SASS使用背景 CSS 是一些非常基礎(chǔ)簡單的語句的組合，既然簡單的語句，就不可避免的有很多重復(fù)，冗余的東西。而且沒有傳統(tǒng)編程語言變量、控制語句等高級特性，所以造成了 CSS 編寫低效，往往需要通過查找替換、大量復(fù)制來修改或者編寫。 Sass 就是用來彌補(bǔ)這個(gè)缺陷，為 CSS 提供額外的高級功能，使其開發(fā)更加方便快捷，更加方便管理。所以你需要使用 Sass 的語法來編寫代碼，然后通過 Sass 編譯成具體的 CSS 代碼，然后使用。所以這里就需要學(xué)習(xí)一下 Sass 的語法。 Sass 的語法是按照一定規(guī)則進(jìn)行縮進(jìn)然后編寫有關(guān) CSS 屬性，與傳統(tǒng) CSS 代碼差別

2、較大，學(xué)習(xí)成本高，于是 Sass 就有了一套 Scss 語法規(guī)則。Scss 中你可以直接寫 CSS，即便你不會 Sass 的語法特性，直接編寫 CSS 代碼也是可以通過編譯的，你只需要保存成 .scss 后綴的文件名即可。第2頁，共21頁。 Sass是一種CSS預(yù)處理語言，當(dāng)你使用Sass這門語言時(shí)，你使用編譯程序來轉(zhuǎn)換Sass文件，通常以SCSS文件格式書寫然后轉(zhuǎn)換成CSS文件.SASS簡介Sass通過使用命令行工作。 在它做任何事情前必須先安裝Ruby，然后安裝SASS。也可使用可視化界面的GUI工具來書寫Sass。 可視化工具：Codekit, Prepro, Mixture, Koal

3、a, compass.第3頁，共21頁。開始使用SASS在開始之前，確保ruby和sass已安裝。創(chuàng)建如下目錄：project sassstyle.scss css index.htmlSASS提供四個(gè)編譯風(fēng)格的選項(xiàng)：nested： 嵌套縮進(jìn)的CSS代碼，它是默認(rèn)值。expanded：沒有縮進(jìn)的，擴(kuò)展的CSS代碼。compact：簡潔格式的CSS代碼。compressed：壓縮后的CSS代碼。第4頁，共21頁。設(shè)置項(xiàng)目 進(jìn)入project目錄，命令行中輸入：sass style compressed style.scss style.css 設(shè)置編譯風(fēng)格，輸入sass watch sass:c

4、ss 監(jiān)聽某個(gè)文件或目錄，一旦文件有變動，就自動生成編譯后的版本。html文件中只需簡單引入css文件即可。第5頁，共21頁。SASS變量定義方法：$name:value使用方式：作為css名稱的一部分：#$name作為屬性值：$name例：$i: 1;$padding-value: 10px;.#$i padding: $padding-value;第6頁，共21頁。SASS宏：mixin不帶參數(shù)宏定義：mixin name 帶參數(shù)宏定義：mixin name($param1,)功能：使用宏，可以避免編寫重復(fù)代碼，一次編寫，多次使用。例：mixin rounded($radius) -web

5、kit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;調(diào)用方式：a display:block;width: 10px;height: 10px;include rounded(5px);第7頁，共21頁。SASS嵌套html元素結(jié)構(gòu)：首頁 紳藍(lán)移動辦公 紳藍(lán)移動醫(yī)療 關(guān)于我們SASS樣式嵌套控制：nav a display: inline-block; text-decoration: none; color: $font-color; margin-left: 20px; &:hove

6、r color: darken($blue-light, 10%); 第8頁，共21頁。Sass 的數(shù)據(jù)類型Sass 進(jìn)階Sass 中主要有六種數(shù)據(jù)類型：數(shù)字型 (e.g. 1.2, 13, 10px)文本型，單引號、雙引號或者不加都可以 (e.g. foo, bar, baz)顏色值類型 (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5)布爾值 (e.g. true, false)nulls (e.g. null)值列表，通過空格或者逗號分割值 (e.g. 1.5em 1em 0 2em,Helvetica, Arial, sans-serif)值映射，一個(gè)關(guān)

7、鍵詞對應(yīng)一個(gè)值 (e.g. (key1: value1, key2: value2)第9頁，共21頁。Sass 變量的作用域變量聲明必須在調(diào)用變量語句的上面，這樣才能正確的調(diào)用變量Sass 中的變量沒有塊級作用域特性，而是隨執(zhí)行隨覆蓋隨調(diào)用。調(diào)用的前面沒有變量聲明，就報(bào)錯(cuò)，有很多變量聲明，就調(diào)用在它上面離它最近的變量值例：$width: 10px;.wrap $width: 20px; .main width: $width; .sidebar $width: 30px; width: $width; $width: 20px;.content width: $width;編譯后：.wrap

8、.main width: 20px;.wrap .sidebar width: 30px;.content width: 20px;第10頁，共21頁。引用父級的 &.parent color: green; .son color: red; &:hover color: blue; body.orange & color: orange; 在嵌套結(jié)構(gòu)中引用父級選擇器，這時(shí)候就可以用 & 符號代替父級選擇器例：編譯后：.parent color: green;.parent .son color: red;.parent .son:hover color: blue;body.orange .

9、parent color: orange;第11頁，共21頁。讓一切變成字符串 #變量能作為屬性值來用，也能用在選擇器或者屬性上面需要#來將變量值轉(zhuǎn)換為字符串，這樣就可以用在選擇器和屬性上了例：$name: foo;$attr: border;p.#$name #$attr-color: blue;編譯后：p.foo border-color: blue;神奇的四則運(yùn)算Sass 支持 加法（）、減法（）、乘法（）、除法（）以及取余（）第12頁，共21頁。Sass 中的加法p $width: 10px; $width2: 20px; width: $width + $width2;編譯后：p w

10、idth: 30px;在 Sass 數(shù)據(jù)類型中提到了，10px 這類數(shù)值雖然帶有字符單位，但是也算是數(shù)值，Sass 會進(jìn)行計(jì)算并對單位進(jìn)行處理加法連接字符串時(shí)，對于引號的合并也有一定規(guī)則，如果前面字符串帶有引號，后面字符串會自動包含在引號中，如果前面沒有，后面帶有引號的字符串也會去掉引號p:before content: Foo + Bar; font-family: sans- + serif;編譯后：p:before content: Foo Bar; font-family: sans-serif; 第13頁，共21頁。如果你想在一段字符串中進(jìn)行計(jì)算并輸出，就需要用 # 了$w : 10

11、;p:before content: I ate #5 + $w pies!;編譯后：p:before content: I ate 15 pies!;Sass 中的除法以下幾種情況會參與除法運(yùn)算：如果兩個(gè)值其中一個(gè)或兩個(gè)存放在變量中或者是由函數(shù)返回的值。如果值被包裹在一對括號里面如果值被作為另一個(gè)表達(dá)式的一部分因?yàn)槌ǖ倪\(yùn)算符 / 在 CSS 中也有遇到，例如 font 縮寫屬性時(shí)候的 font-size 和 line-height 屬性，就需要 / 來分割。所以，在這些包含 / 的 CSS 屬性中對應(yīng)位置的值，是不會參與運(yùn)算的p font: 10px/8px; / 純 CSS 不會運(yùn)算 $

12、width: 1000px; width: $width/2; / 使用變量，執(zhí)行運(yùn)算 width: round(1.5)/2; / 使用函數(shù)返回值，執(zhí)行運(yùn)算 height: (500px/2); / 使用括號包裹，執(zhí)行運(yùn)算 margin-left: 5px + 8px/2px; / 用了加法，作為表達(dá)式的一部分，執(zhí)行運(yùn)算編譯后：p font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; 如果想要避免在使用變量的時(shí)候，進(jìn)行了運(yùn)算，在上面提到了那個(gè)例子，使用 # 來包裹變量，轉(zhuǎn)換成字符串第14頁，共21頁。Sass 運(yùn)算注意事

13、項(xiàng)建議運(yùn)算符之間空開一個(gè)空格注意運(yùn)算單位。雖然 10px 也被看做是數(shù)值型，可以進(jìn)行數(shù)值運(yùn)算，但是對于單位是有要求的。單位也會參與運(yùn)算。在運(yùn)算中，兩個(gè)操作數(shù)單位可以一致，也可以一個(gè)數(shù)沒有單位，也可以都沒有，而對于不同的運(yùn)算操作符，單位運(yùn)算結(jié)果也不同，一般來說測試結(jié)果如下：加法：都沒有單位輸出純數(shù)字；一方有單位，則結(jié)果輸出該單位；兩方相同單位，結(jié)果輸出該單位；雙方單位不同，報(bào)錯(cuò)。減法：類似加法。除法：兩方相同單位，結(jié)果無單位；都沒有單位，結(jié)果無單位；一方有單位另一方無單位，報(bào)錯(cuò)。乘法：兩方相同單位，報(bào)錯(cuò)；一方有單位，結(jié)果輸出該單位；兩方都無單位，輸出無單位。深入理解 extend應(yīng)用其他類：.p

14、ost extend .clearfix; .extend 可擴(kuò)展的選擇器：只能擴(kuò)展單個(gè)選擇器，可以將多個(gè)選擇器寫進(jìn)一條 extend 命令中，用逗號分割extend .message, .important;，表示當(dāng)前結(jié)構(gòu)復(fù)用 .message 和 .important 的代碼第15頁，共21頁。深入理解 mixinmixin 與 extend 區(qū)別mixin 定義的是一個(gè)片段，這個(gè)片段可以是類似變量的一段文字一條屬性，也可以是一整個(gè)選擇器和內(nèi)容，也可以是一個(gè)選擇器的一部分 CSS 代碼。此外還可以傳遞參數(shù)，通過參數(shù)生成不同代碼。它需要配合 inclde 命令來引用這段代碼，類似復(fù)制的效果。

15、mixin 定義的內(nèi)容，不會編譯輸出。extend 就是簡單的擴(kuò)展，基于某個(gè)選擇器，以提高復(fù)用程度mixin帶參數(shù)默認(rèn)值mixin font($color, $fontSize: 14px) color: $color; font-size: $fontSize;p include font(blue); h1 include font(blue, 20px); h2 include font($fontSize: 18px,$color: red); mixin 傳遞多值參數(shù)，需要在參數(shù)后面加上三個(gè)點(diǎn)，表示這個(gè)參數(shù)可能包含多條屬性box-shadow: 0px 4px 5px #666, 2

16、px 6px 10px #999;第16頁，共21頁。mixin box-shadow($shadows.) -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows;.shadows include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);例：編譯后：.shadows -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #

17、666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;第17頁，共21頁。多值參數(shù)還可以用在 include 傳參的時(shí)候，分解某個(gè)變量值例：mixin colors($text, $background, $border) color: $text; background-color: $background; border-color: $border;$values: #ff0000, #00ff00, #0000ff;.primary include colors($values.);$value-

18、map: (text: #00ff00, background: #0000ff, border: #ff0000);.secondary include colors($value-map.);編譯后：.primary color: red; background-color: lime; border-color: blue;.secondary color: lime; background-color: blue; border-color: red;在 .primary 中，將 $values 分解變成三個(gè)參數(shù)傳遞進(jìn)去。而在 .secondary 中，將映射型的變量也分解進(jìn)行了傳參。

19、第18頁，共21頁。向 mixin 傳遞內(nèi)容mixin apply-to-ie6-only * html content; include apply-to-ie6-only #logo background-image: url(/logo.gif); * html #logo background-image: url(/logo.gif);例：編譯后：靈活的控制語句for 循環(huán)，就是簡單的循環(huán)，只能使用數(shù)字，每次固定一個(gè)步長for $i from 5 through 1 .item-#$i width: 2em * $i; 例：編譯后：.item-5 width: 10em;.item-

20、3 width: 6em;.item-1 width: 2em;.item-4 width: 8em;.item-2 width: 4em;第19頁，共21頁。while 循環(huán)，while 和 for 命令是非常接近的，只不過 while 循環(huán)可以自己定義步長$i: 6;while $i 0 .item-#$i width: 2em * $i; $i: $i - 2;例：編譯后：.item-6 width: 12em; .item-4 width: 8em; .item-2 width: 4em; each 遍歷循環(huán)，這個(gè)是最靈活最實(shí)用的循環(huán)命令了。你可以用它遍歷一個(gè)列表或者映射型的變量，然后循環(huán)輸出例：編譯后：each $animal in puma, sea-slug, egret, salamander .#$animal-icon background-image: url(/images/#$animal.png); .puma-icon background-image: url(/images/puma.png); .sea-slug-icon background-image: u