摘要：前言很久沒有用文章記錄自己的學習歷程了，主要是因為實在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。以前我只使用外部，現在的更加好用，所以在學習過程中記了一些筆記。在后面加一個感嘆號，表示這是重要注釋。
前言
很久沒有用文章記錄自己的學習歷程了，主要是因為實在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。但是今天還是拾起筆來了，雖然沒什么干貨，但是對自己而言，總結的過程可以加深對零碎知識的了解，將來自己如果忘記某些知識，可以迅速查找并撿起來；如果以后忘了自己的當初的目標，也能回頭看看自己曾經做過的努力。
想起總結的另一個原因，就是自己在最近的實習中學到了很多東西，終于把自己看過的零碎知識用起來了。應了那句話，“紙上得來終覺淺，絕知此事要躬行”。當前參與的項目是一個基于React做的單頁應用，技術棧采用React+Redux+Webpack，樣式部分采用SCSS書寫。以前我只使用外部CSS，現在的SCSS更加好用，所以在學習過程中記了一些筆記。SCSS和CSS基本沒什么區別，只是增加了一些編程方法，這些方法都很簡單，用起來受益匪淺。SASS和SCSS區別不大，所以我在本文僅提及SCSS。
SASS簡介
SASS（Sassy CSS）是一種CSS開發工具，提供了CSS的便利寫法，通過編譯生成最終的CSS文件（補充，SASS的預編譯就是針對下述語法的再排版，沒有任何額外的處理加工，我以前覺得會將沖突樣式覆蓋掉什么的，目前看來并沒有）。
SASS安裝：SASS是用Ruby寫的，但是語法上沒有聯系，僅僅是需要安裝Ruby而已，然后在Ruby中安裝SASS，在Ruby的命令行中輸入以下命令即可：
gem install sass
將SASS編譯為CSS很簡單：
sass //將SASS轉化為CSS并顯示在命令行上，
sass //將SASS轉換為CSS并保存在fileName.css中。
sass -watch : //監聽目標文件，一旦有變動就自動生成編譯后的版本。
SASS的編譯風格有四種：
nested: 嵌套縮進的CSS代碼，是默認值；
expanded:沒有縮進的、擴展的CSS代碼；
compact: 簡潔格式的CSS代碼；
compressed: 壓縮后的CSS代碼，也就是去掉注釋和空格。生產環境中，一般采用compressed風格降低代碼體積。一個完整的sass轉換命令如下：
sass --style compressed test.sass test.css
//--style compressed表示編程風格
SASS簡單編程風格
SASS的簡單用法包含使用變量、選擇器嵌套以及加減乘除運算，復雜用法包括extend實現樣式繼承、Mixin實現代碼塊、顏色函數、@import插入外部CSS或SCSS文件、@if/@while/@each/@function實現的函數功能。
1允許使用變量，變量以$開頭，定義方式類似于CSS。如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。變量使用場景是那些需要全局復用的值，例如字體樣式，定義完之后直接調用有利于保持較大型CSS文件中字體的一致性。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
一個有意思的特點是變量定義具有類似作用域的特性，嵌套的內部標簽能使用外部標簽的變量，但是如果不存在嵌套關系或者在外部使用內部定義的變量，會導致錯誤：
1)不存在嵌套關系不能引用：
2) 外部定義內部可以使用：
3) 內部定義外部不能使用：
如果一個變量想在全局引用，可以通過!global關鍵字實現這一點：
2允許使用加減乘除，最終結果會在編譯后的CSS文件中體現出來：
3 SASS允許選擇器嵌套，好處是避免了父級選擇器的重復，復雜CSS樣式可以借助類似HTML式的嵌套結構表示出來。比如，下面的CSS代碼：
div h1 {
color : red;
}
可以寫成：
div {
hi {
color:red;
}
}
屬性也可以嵌套，比如border-color屬性，可以寫成：
p {
border: {
color: red;
}
}
注意，border后面必須加上冒號。
在嵌套的代碼塊內，可以使用&引用父元素。比如a:hover偽類，可以寫成：
&必須位于復合選擇符的起始位置，但是可以加后綴。如果父級不能添加后綴，SASS會拋出錯誤。
#main {
color: black;
&-sidebar { border: 1px solid; }
}
嵌套式寫法對具有命名空間的CSS屬性可以進一步簡化，例如font-family, font-size, and font-weight可以寫成
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
4 SASS共有兩種注釋風格。標準的CSS注釋 / comment / ，會保留到編譯后的文件。單行注釋 // comment，只保留在SASS源文件中，編譯后被省略。在/*后面加一個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用于聲明版權信息。
SASS高級用法
1 實現繼承
SASS允許一個選擇器繼承另一個選擇器，實現繼承的關鍵字和ES6實現class繼承的關鍵字類似是extend，例如希望class2繼承class1，在class2的樣式聲明中加入 @extend .class1即可。
2 實現Mixin
Mixin類似于c語言的宏，也就是可以重用的代碼塊，使用@mixin命令可以定義一個代碼塊。使用@include命令調用這個minxin即可。
代碼塊中可以指定默認參數，調用時可以賦值：
一個更經典的例子是加入瀏覽器前綴，用法如下：
3 顏色函數生成系列顏色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4 插入文件
@import命令插入外部文件，sass的導入(@import)規則和CSS的有所不同，編譯時會將@import的scss文件合并進來只生成一個CSS文件。但是如果你在sass文件中導入css文件如@import "reset.css"，那效果跟普通CSS導入樣式文件一樣，導入的css文件不會合并到編譯后的文件中，而是以@import方式存在。
使用@import的一個好處是所有外部文件的引入僅需要一個HTTP請求，但是CSS中使用@import命令就會引入多個HTTP請求，就網頁優化而言在SASS中使用@import更有優勢。
所有的sass導入文件都可以忽略后綴名.scss，但是CSS導入文件不可以省略后綴名。一般來說基礎的文件命名方法以_開頭，如_mixin.scss。這種文件在導入的時候可以不寫下劃線，可寫成@import "mixin"。
5 條件語句
使用@if和$else表示判斷
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
6 循環語句使用@for、@while和$each語句。
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
7 自定義函數
可以看出循環以及函數的使用類似于JavaScript，只是需要在關鍵字前加上@字符。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81622.html
