這次趁著自己找工作的時間去重新系統(tǒng)化的學(xué)習(xí)Web開發(fā)~重新擼一遍代碼~(^_^) 嘻嘻……這個文集主要是一些Web開發(fā)向的筆記和學(xué)習(xí)記錄，一些庫和工具框架的學(xué)習(xí)。大部分都是入門級的。

今天這部分Sass學(xué)習(xí)教程主要是一些常用函數(shù)和流程控制語句。

為什么使用Sass？

• 可以使得整個項目的CSS的維護和修改變得容易且風格統(tǒng)一（使用變量來進行前端的賦值）
• 減少了多余的CSS的寫法，提高整體的開發(fā)效率
• 增加了語句的嵌套
• SCSS 是 Sass 的新語法格式，從外形上來判斷他和 CSS 長得幾乎是一模一樣，代碼都包裹在一對大括號里，并且末尾結(jié)束處都有一個分號。其文件名格式常常以“.scss”為擴展名。
• 將.scss 編譯成CSS文件進行加載

Sass的基本原理:

Sass的安裝：

1. 1. ruby環(huán)境
2. 2. 使用ruby包管理gem install sass安裝成功
   3.（有可能碰見鏡像問題）

SCSS語法格式：

 

body {font: 100% Helvetica, sans-serif;color: #333;

}

$font-stack: Helvetica, sans-serif;$primary-color: #333;

body {

font: 100% $font-stack;

color: $primary-color;

}

 

SCSS文件編譯過程：

 

單文件編譯：

sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

多文件批量編譯：

sass sass/:css/

常用參數(shù)：

--watch自動檢測代碼，自動重新編譯

 

幾種常見的輸出方式：

 

嵌套輸出方式 -- style nested

展開輸出方式 -- style expanded

緊湊輸出方式 -- style compact

壓縮輸出方式 -- style compressed

這幾種不同的輸出方式可以讓有不同習(xí)慣的程序員可以用起來更爽~

Sass的常用知識：

變量：

 

普通變量：

 

$temp: value;

可以在全局范圍內(nèi)使用（存在作用域）

 

默認變量：

 

$temp: value ！default;

在值的后邊加上！default只要在使用它之前存在一個變量的賦值即不會使用這個變量的默認值。

Sass提供了嵌套功能：

Sass 中還提供了選擇器嵌套功能

但是對于選擇器的嵌套一般不要多層嵌套\\

提供屬性的嵌套：

.box {

    border-top: 1px solid red;

    border-bottom: 1px solid green;

}

 

對于上面的代碼，可以使用下面這種寫法來代替：

.box {

  border: {

   top: 1px solid red;

   bottom: 1px solid green;

  }

}

偽類嵌套：
使用&符號配合使用：.clearfix{&:before}=>clearfix:before

宏：

聲明混合宏：

@mixin 是用來聲明混合宏的關(guān)鍵詞，有點類似 CSS 中的 @media、@font-face 一樣，但是它可以進行傳參，通過函數(shù)化得調(diào)用，設(shè)置宏中的樣式不同。實現(xiàn)復(fù)用。

@include用于調(diào)用宏

繼承和擴展

在 Sass 中是通過關(guān)鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現(xiàn)代碼的繼承。

占位符 %placeholder 功能是一個很強大，很實用的一個功能。因為 %placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會產(chǎn)生任何代碼

注釋：

• CSS注釋方式：使用 ”/ ”開頭，結(jié)尾使用 ”/ ”會保存在CSS中
• JS的注釋方式：使用“//”，這種注釋方式是不會被編譯出來的
• 數(shù)字
• 字符串（有引號或者是無引號字符串）
• 顏色（blue,#000000,rgba(255,255,255,0)）
• 布爾：true，false
• 空值：null
• 值列表：

數(shù)據(jù)類型：

1. 1. nth函數(shù)（nth function） 可以直接訪問值列表中的某一項；
2. 2. join函數(shù)（join function） 可以將多個值列表連結(jié)在一起；
3. 3. append函數(shù)（append function） 可以在值列表中添加值；
4. 4. @each規(guī)則（@each rule） 則能夠給值列表中的每個項目添加樣式。

對于CSS 四則運算：

• 對于基本的CSS運算系統(tǒng)會根據(jù)單位進行自動轉(zhuǎn)換。
• 但是對于乘除法不同的單位會報xxxx isn't a valid CSS value.錯誤
• 除法操作時需要將width: 100px/2=>width: (100px / 2);第一種寫法不會出現(xiàn)錯誤，但是也不會出現(xiàn)你想要的效果。
• 顏色運算，會自動的進行RGB和Alpha各個通道的自動加和。color: #010203 + #040506; 
• 字符串的加和，對于存在“”的加和，會自動的加上“”

 

原文來自：簡書／stiller