Sass學習
介紹
Sass 有兩種語法規則(syntaxes),目前新的語法規則（從 Sass 3開始）被稱為 “SCSS”( 時髦的css（Sassy CSS）),它是css3語法的的拓展級，就是說每一個語法正確的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作為拓展名。第二種語法別成為縮進語法（或者 Sass），它受到了Haml的簡潔精煉的啟發，它是為了人們可以用和css相近的但是更精簡的方式來書寫css而誕生的。它沒有括號，分號，它使用 行縮進 的方式來指定css 塊，雖然sass不是最原始的語法，但是縮進語法將繼續被支持，在縮進語法的文件以 .sass 為拓展名。
安裝
1.安裝rvm
<pre>
1.安裝rvm$ curl -L get.rvm.io | bash -s stable
2.裝載rvm$ source ~/.rvm/scripts/rvm
3.安裝2.3.0版本ruby$ rvm install 2.3.0
4.將2.3.0設為默認$ rvm use 2.3.0 --default
rvm -v 驗證是否安裝成功
</pre>
2.利用rvm安裝ruby
<code>
sudo rvm install ruby
</code>
3.安裝sass
<pre>
sudo gem install sass
sass -v 測試是否安裝成功
</pre>
4.webStorm配置
在設置頁面中，選擇Preferences -> Tools -> File Watcher 配置
基礎
0.注釋
有三種形式：
（1）//comment：該注釋只是在.scss源文件中有，編譯后的css文件中沒有。
（2）/! /：重要注釋，任何style的css文件中都會有，一般放置css文件版權說明等信息。
（3）/ /：該注釋在compressed的style的css中沒有，其他style的css文件都會含有。
1.變量
變量的定義一般以$開頭:$name，某個變量的作用域僅限于他們定義的層級以及子層級。
1.1局部變量
sass中局部變量定義與其他語言定義一樣，比如：
<pre>
body {
$color:red;
color:$color;
}
</pre>
編譯以后:
<pre>
body {
color: red;
}
</pre>
1.2全局變量
如果希望某個在子選擇器中定義的變量能夠成為全局變量，可以使用!global關鍵字
<pre>
body {
$color:red !global;
color:$color;
}
</pre>
1.3變量默認值
如果想給定義的變量初始化默認值，可以使用!default關鍵字
<pre>
$color:red !default;
</pre>
1.4 多值變量
多值變量分為兩種形式: 數組和字典
數組:
<pre>
$paddings:5px 10px 5px 10px;
通過nth取其中的某一個值：nth($paddings,1):取padding的第一個值
</pre>
字典：
<pre>
$maps:(color:red, borderColor:blue);
可以通過map_get($maps,boderColor)獲取其中某一個key值
</pre>
1.5變量特殊用法
嵌套引用在其他編程語言中即是字符串插值，需要用#{}進行包裹
<pre>
$left:left;
.div1{
border-#{$left}-width:5px;
}
</pre>
在變量定義中，下劃線與橫線相同，比如：
$text_info === $text-info
2.文件導入
在sass中，定義文件以下劃線 “_” 開頭 代表部分文件，不會編譯出css，這為了表面生成多余css
比如：定義 _part.scss
其中導入使用 @import 'part'
如何區分原生css導入
被導入文件名字以.css結尾
被導入文件是以URL地址
被導入的文件是css的url()值
3.嵌套
3.1選擇器嵌套
<pre>
body{
header {
color: red;
}
}
</pre>
編譯后結果：
<pre>
body header {
color: red;
}
</pre>
3.2屬性嵌套
<pre>
body{
header {
color: red;
}
footer {
background: {
color: green;
size: 20%;
};
}
}
</pre>
編譯后結果：
<pre>
body footer {
background-color: green;
background-size: 20%; }
</pre>
3.3引用父選擇器 &
<pre>
body{
a {
color: red;
&:hover{
color: green;
}
}
}
</pre>
編譯后的結果：
<pre>
body a {
color: red; }
body a:hover {
color: green; }
</pre>
3.4 @at-root ，跳出嵌套
- 默認@at-root只會跳出選擇器嵌套，而不能跳出@media 或 @support；
- 若要跳出，則需要@at-root(without:media) | @at-root(without:support)
- 其中還有:all 表示所有 ； rule表示常規css
<pre>
body{
header {
color: red;
@at-root .container {
width: 100px;
}
}
footer {
background: {
color: green;
size: 20%;
};
}
}
</pre>
編譯后的結果：
<pre>
body header {
color: red; }
.container {
width: 100px; }
body footer {
background-color: green;
background-size: 20%; }
</pre>
3.5 @at-root 與 &混用
<pre>
.text-info {
color: red;
@at-root nav &{
color: blue;
}
}
</pre>
編譯后結果：
<pre>
.text-info {
color: red; }
nav .text-info {
color: blue; }
</pre>
4.繼承
4.1簡單繼承
<pre>
.A{
background-color: red;
}
.A1 {
@extend .A;
color: red;
}
</pre>
<pre>
.A, .A1 {
background-color: red; }
.A1 {
color: red; }
</pre>
4.2多繼承
在簡單基礎上，類似于@entend .A,.B;
4.3鏈型繼承
<pre>
.one {
color: red;
}
.two {
@extend .one;
size: 100px;
}
.three{
@extend .two;
border-radius: 10px;
}
</pre>
<pre>
.one, .two, .three {
color: red; }
.two, .three {
size: 100px; }
.three {
border-radius: 10px; }
</pre>
4.4繼承局限性
- 包含選擇器 或者 相鄰兄弟選擇器 不支持
- 如果繼承元素是a,恰巧這個元素a又有hover狀態的形式，那么狀態hover也會被繼承
<pre>
a :hover{
color: red;
}
.four {
@extend a;
}
</pre>
<pre>
a :hover, .four :hover {
color: red; }
</pre>
4.5繼承交叉合并
沒有在同一父級下，會產生交叉編譯結果
<pre>
.five a{
color: red;
}
.six {
@extend a;
}
</pre>
<pre>
.five a, .five .six {
color: red; }
</pre>
4.6繼承的作用域
繼承在指令中是有作用域問題的，繼承是無法使在指令如(@media)之外的選擇器繼承的，要是繼承就只能寫在指令中
4.7特別--占位選擇器%
有時候你想繼承一個類名，但是并不想再在HTML中使用，就單單想寫一個能夠繼承的類名。尤其是不想讓它出現在css樣式中。我們可以用占位符來寫一些繼承的樣式(如“%one”)，然后再通過@extend繼承，這樣就可以防止被渲染到CSS的規則集中。
<pre>
.B a%long {
color: red;
}
.C {
@extend %long;
}
</pre>
<pre>
.B a.C {
color: red; }
</pre>
5.進階
5.1 數據類型
Sass涉及到的數據類型有以下幾個：
Number,String,List,Map,Color,Boolean,Null
以上類型基本在實例中見過，不多介紹了，另外存在一些函數查看文檔就可以了
5.2變量操作
和其他語言基本類似，不多介紹了
5.3 Mixin
@mixin的調用方式是@include,@include產生的樣式是以復制拷貝的方式存在的,而@extend產生的樣式是以組合申明的方式存在的
<pre>
@mixin count($color1:red){
color: color1;
}
body{
@include count(#fff)
}
有點#define的趕腳
</pre>
<pre>
body {
color: #fff; }
</pre>
如何設置多值參數呢？
<pre>
@mixin count($color1...){
color: color1;
}
</pre>
@content應用：
<pre>
@mixin header{ #header{ @content; } }
</pre>
<pre>
@include header{ width:1000px; height:200px; .logo{ width:200px; } }
</pre>
5.4函數
- 內置函數
點開這里自己看吧 - 自定義函數
<pre>
@function double($width){
@return $width * 2;
}
</pre>
- @debug,@error,@warn
用來調試
5.5條件控制
條件關鍵字如下，沒有什么特別的
@if
@for
@while
@each
參考文檔
1.Sass文檔
