1. CSS預處理器
- 定義了一種新的專門的編程語言,編譯後成正常的CSS文件。爲CSS增加一些編程的特性,無需考慮瀏覽器的兼容問題,讓CSS更加簡潔,適應性更強,可讀性更佳,更易於代碼的維護等諸多好處。
- CSS預處理器語言:scss(sass)、LESS等;
2.Sass和SCSS的區別
- 文件擴展名不同:“.sass”和“.scss”;
- Sass是以嚴格縮進式語法規則來書寫的,不帶大括號和分號;而SCSS的語法和CSS書寫語法類似。
3.Sass安裝(Windows版)
- 先安裝ruby:Ruby 的官網(http://rubyinstaller.org/downloads)下載對應需要的 Ruby 版本
- 安裝sass:
- 方法一(通過命令安裝sass):打開命令終端,輸入:gem install sass
- 方法二(本地安裝sass):從http://rubygems.org/gems/sass 下載sass安裝包,然後在終端輸入: “gem install <把下載的安裝包拖到這裏>” 然後直接額回車即可安裝成功。
4.scss語法格式
css代碼:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
使用scss代碼:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
tip:如果使用sass舊語法(sass語法),文件後綴名應爲“.sass”;如果使用sass新語法(scss語法),文件後綴名應爲".scss“語法,否則編譯時編譯不出來。
5. sass編譯
5.1 sass編譯的方法:
- 命令編譯
- GUI工具編譯
- 自動化編譯
5.1.1 sass命令編譯(在命令終端輸入sass指令來編譯sass,最直接,最簡單)
- 單文件編譯:
sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
- 多文件編譯:
上面的命令表示將項目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件,並且將這些 CSS 文件都放在項目中“css”文件夾中。sass sass/:css/
-
缺點及解決方法:
缺點:每次保存scss文件後都要重新編譯太麻煩;
解決方法:開啓“watch”功能:sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
-
tip:文件路徑不要帶中文,如果有中文,watch功能無法正常使用。
6.sass嵌套輸出方式nested
只要在編譯的時候帶上參數“ --style nested”:
sass --watch test.scss:test.css --style nested
7.sass展開輸出方式expanded
在編譯的時候帶上參數“ --style expanded”:
sass --watch test.scss:test.css --style expanded
8.sass展開輸出方式compact
在編譯的時候帶上參數“ --style compact”:
sass --watch test.scss:test.css --style compact
9.sass展開輸出方式compressed
在編譯的時候帶上參數“ --style compressed”:
sass --watch test.scss:test.css --style compressed
10.sass變量聲明
$+變量名+:+變量值;
$width:200px;
11.普通變量和默認變量
- 普通變量聲明後可以在全局範圍內使用;
- 默認變量僅需在值後面加上!default 即可;
- 默認變量一般是用來設置默認值,然後根據需求來覆蓋的,覆蓋的方式是在默認變量之前重新聲明下變量即可。默認變量的價值在進行組件化開發的時候會非常有用。
編譯後的CSS代碼:$baseLineHeight: 2; $baseLineHeight: 1.5 !default; body { line-height: $baseLineHeight; }
body { line-height:2; }
12.局部變量和全局變量
- 局部變量:在元素裏面聲明的變量;
- 全局變量:在元素外面定義的變量;
- 全局變量的影子:和全局變量名字相同的局部變量叫做全局變量的影子。
$color:green;//全局變量 $width:200px;//全局變量 $height:200px;//全局變量 body { background-color:$color;//調用全局變量 } div { $color:yellow;//定義局部變量,全局變量$color的影子 .div { background-color:$color;//調用局部變量 width:$width;//調用全局變量 height:$height;//調用全局變量 } }
13.sass嵌套
13.1 選擇器嵌套
<header>
<nav>
<a href="#">home</a>
<a href="#">page</a>
</nav>
</header>
css:
nav a {
color:red;
}
header nav a {
color:green;
}
scss:
nav {
a {
color: red;
header & {
color:green;
}
}
}
13.2 屬性嵌套(有相同的屬性前綴)
css:
.box {
font-size: 12px;
font-weight: bold;
}
scss:
.box {
font: {
size: 12px;
weight: bold;
}
}
13.3 僞類嵌套
scss:
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
}
css:
clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
14. sass混合宏
14.1 聲明混合宏
@mixin border-radius {
-webkit-border-radius: 5px;
border-radius: 5px;
}
@mixin :聲明混合宏的關鍵詞;
border-radius:混合宏的名稱;
大括號內:複用的樣式代碼;
14.2 調用混合宏
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}//聲明混合宏border-radius
button {
@include border-radius;
}//調用混合宏border-radius
編譯爲CSS:
button {
-webkit-border-radius: 3px;
border-radius: 3px;
}
14.3 混合宏的參數
- 不帶任何值的參數
@mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; }//聲明一個帶有參數$radius的混合宏 .box { @include border-radius(3px);//調用混合宏並給混合宏傳參數“3px” }
- 傳一個帶值參數(傳入一個默認值)
編譯出來的CSS:@mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; }//聲明一個傳入了默認參數值的混合宏 .btn { @include border-radius;//使用默認參數值的混合宏 } .box { @include border-radius(50%);//可以自己傳入參數值 }
.btn { -webkit-border-radius: 3px; border-radius: 3px; } .box { -webkit-border-radius: 50%; border-radius: 50%; }
- 傳多個參數值
編譯出來的css:@mixin size($width,$height){ width: $width; height: $height; } .box-center { @include size(500px,300px); }
.box-center { width: 500px; height: 300px; }
15.sass 繼承
scss:
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
編譯出來後:
.btn, .btn-primary {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
在sass中的繼承,可以繼承類樣式塊中所有樣式代碼,而且編譯出來的css會將選擇器合併在一起,形成組合選擇器。
16.sass佔位符%
用佔位符聲明的代碼,如果不被@extend調用就不會被編譯。
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
color:red;
}
編譯後:
.btn {
color:red;
}//%佔位符聲明的代碼沒有被編譯產生css代碼
使用@extend調用:
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;//使用@extend調用佔位符代碼
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
編譯後的css代碼:
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
通過@extend調用的佔位符,編譯出來的代碼會將相同的代碼合併在一起,代碼變得十分簡潔。
17.sass插值
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {//對每個在$properties中的$prop,即$properties中的margin、padding
#{$prop}-#{$side}: $value;//$prop連接參數$side,值爲參數$value
}
}
.login-box {
@include set-value(top, 14px);//調用混合宏
}
編譯出來的css:
.login-box {
margin-top: 14px;
padding-top: 14px;
}
不可以:
$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
margin-top: $margin-#{$size};
}
.login-box {
@include set-value(big);
}
也不可以:
@mixin updated-status {
margin-top: 20px;
background: #F00;
}
$flag: "status";
.navigation {
@include updated-#{$flag};
}
可以在使用@extend時使用插值:
%updated-status {
margin-top: 20px;
background: #F00;
}
.selected-status {
font-weight: bold;
}
$flag: "status";
.navigation {
@extend %updated-#{$flag};
@extend .selected-#{$flag};
}
18. sass 註釋
/*註釋內容*/
:會在編譯出來的css文件中顯示//註釋內容
:不會在編譯出來的css文件中顯示
編譯出來的css://定義一個佔位符 %mt5 { margin-top: 5px; } /*調用一個佔位符*/ .box { @extend %mt5; }
.box { margin-top: 5px; } /*調用一個佔位符*/
19. sass運算
19.1 sass 加法/減法
變量或屬性中都可以做加法/減法運算
.box {
width: 20px + 8in;
height:20px - 5px;
}
編譯出來的css:
.box {
width: 788px;
height:25px;
}
不用類型的單位做加法/減法會報錯:
.box {
width: 20px + 1em;//不同類型單位不能做加法
}
19.2 sass 乘法
這樣子會有問題:
.box {
width:10px * 2px;
}
應該這樣子:
.box {
width: 10px * 2;
}
編譯出來的css:
.box {
width: 20px;
}
- 同加法減法一樣,不同類型單位做乘法也會報錯。
19.3 sass除法
- 如果除式中沒有變量或者不是在一個數學表達式中(有加法減法等),就要將除式運算用小括號括起來,否則“/”不會被當做除號運算。
編譯出來的css:p { font: 10px/8px; // 純 CSS,不是除法運算 $width: 1000px; width: $width/2; // 使用了變量,是除法運算 width: round(1.5)/2; // 使用了函數,是除法運算 height: (500px/2); // 使用了圓括號,是除法運算 margin-left: 5px + 8px/2px; // 使用了加(+)號,是除法運算 }
p { font: 10px/8px;//這種是無意義的css width: 500px; height: 250px; margin-left: 9px; }
- 除法中相同單位相除不會報錯,會產生一個無單位的值:
編譯出來的css:.box { width: (1000px / 100px); }
.box { width: 10; }
19.4 sass 變量計算
$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;
.container {
width: $content-width + $sidebar-width + $gutter;
}
編譯出來的css:
.container {
width: 960px;
}
19.5 sass數字運算
.box {
width: ((220px + 720px) - 11 * 20 ) / 12 ;
}
編譯出來的css:
.box {
width: 60px;
}
19.6 sass顏色運算
所有算術運算都支持顏色值,並且是分段計算的。
p {
color: #010203 + #040506;
}
計算公式爲 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09, 並且被合成爲:
p {
color: #050709;
}
- 數字和顏色一起運算:
計算公式爲 01 2 = 02、02 2 = 04 和 03 * 2 = 06, 並且被合成爲:p { color: #010203 * 2; }
p { color: #020406; }
19.7 sass 字符運算
- 用“+”對字符串進行連接:
編譯出來的css:$content: "Hello" + "" + "Sass!"; .box:before { content: " #{$content} "; }
.box:before { content: " Hello Sass! "; }
- 可以使用“+”直接連接字符:
編譯出來的css:div { cursor: e + -resize; }
div { cursor: e-resize; }
- 有引號的字符串和沒有引號的字符串相加,看哪個在“+”號的左邊,如果有引號的在左邊,結果爲有引號的;如果沒有引號的在左邊,結果爲沒有引號的:
編譯出來的css:p:before { content: "Foo " + Bar; font-family: sans- + "serif"; }
p:before { content: "Foo Bar"; font-family: sans-serif; }