一、介紹
CSS預(yù)處理器是一個(gè)CSS的增強(qiáng)語法，讓我們可以在 CSS 中使用變量、循環(huán)、嵌套等功能, 可以讓我們的代碼變通性更強(qiáng)，可讀性、層級關(guān)系更加明顯
CSS預(yù)處理器種類繁多，目前三種主流的css預(yù)處理器是Sass（Scss）、Less及Stylus
Sass/Scss、Less、Stylus介紹
-
Sass/Scss：
2007年誕生，最早也是最成熟的CSS預(yù)處理器，擁有ruby社區(qū)的支持和compass這一最強(qiáng)大的css框架。
目前受LESS影響，已經(jīng)進(jìn)化到了全面兼容CSS的SCSS（SCSS 需要使用分號和花括號而不是換行和縮進(jìn)）。1.文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名
2.語法書寫方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語法規(guī)則來書寫，不帶大括號({})和分號(而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
-
Less：
2009年出現(xiàn)，受SASS的影響較大，但又使用CSS的語法，相對于Sacc其優(yōu)點(diǎn)是簡單上手和兼容CSS
其缺點(diǎn)是比起SASS來，他的編程功能不夠，不好用。他反過來也影響了SASS演變到了SCSS的時(shí)代，著名的Twitter Bootstrap就是采用LESS做底層語言的。
-
Stylus：
2010年產(chǎn)生，來自Node.js社區(qū)。
主要用來給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持，在此社區(qū)之內(nèi)有一定支持者，在廣泛的意義上人氣還完全不如SASS和LESS
二、環(huán)境搭建
Windows
1.先從官網(wǎng)下載Ruby，安裝過程中請注意勾選Add Ruby executables to your PATH添加到系統(tǒng) 官網(wǎng)
https://rubyinstaller.org/downloads/
2.ruby -v 如安裝成功會打印版本信息
3.gem update --system //該命令請翻墻一下 升級版本，建議 2.6.x 以上
gem -v
4.安裝sass
gem install sass
gem install compass
sass -v
Mac
1.系統(tǒng)自帶Ruby環(huán)境
2.安裝sass
gem install sass
gem install compass
sass -v
安裝后將sass文件轉(zhuǎn)換成css文件
//單文件轉(zhuǎn)換命令
sass input.scss output.css
//單文件監(jiān)聽命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目錄，你也可以告訴sass監(jiān)聽整個(gè)目錄：
sass --watch app/sass:public/stylesheets
Vue里的Sass 環(huán)境搭建
1.安裝nodejs，擁有nodejs環(huán)境
2.創(chuàng)建vue項(xiàng)目
3.在項(xiàng)目中安裝sass環(huán)境，需要兩個(gè)依賴 sass-loader， sass-loader依賴于node-sass,
npm install -D node-sass sass-loader
4.在style標(biāo)簽上加上一個(gè)屬性：lang=”scss” 就可以了
<style lang="scss">
.app{
.....
}
</style>
參考:
三、Sass/Scss學(xué)習(xí)
1、嵌套寫法
Sass 允許將一套 CSS 樣式嵌套進(jìn)另一套樣式中，內(nèi)層的樣式將它外層的選擇器作為父選擇器
#main {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
// 編譯后, 轉(zhuǎn)為css后的結(jié)果:
#main {
color: #00ff00;
width: 97%; }
#main .redbox {
background-color: #ff0000;
color: #000000; }
2、變量
1. 變量的定義及使用
$width: 1600px;
$pen-size: 3em;
.app {
height: $width;
font-size: $pen-size;
}
2. 局部變量
#foo {
$width: 5px;
width: $width; //編譯時(shí)沒問題
}
#bar {
width: $width; //編譯時(shí)會報(bào)錯
}
3、數(shù)據(jù)類型
SassScript 支持 7 種主要的數(shù)據(jù)類型：
- 數(shù)字，
1, 2, 13, 10px - 字符串，有引號字符串與無引號字符串，
"foo", 'bar', baz - 布爾型，
true, false - 顏色，
blue, #04a3f9, rgba(255,0,0,0.5) - 數(shù)組 (list)，用空格或逗號作分隔符，
1.5em 1em 0 2em, Helvetica, Arial, sans-serif - maps, 相當(dāng)于 JavaScript 的 object，
(key1: value1, key2: value2) - 空值，
null
判斷數(shù)據(jù)類型的方式：type-of($value)
1. 數(shù)字(Numbers)
$my-age: 19;
$your-age: 19.5;
$height: 120px; // 單位會和數(shù)字當(dāng)做一個(gè)整體，進(jìn)行算數(shù)運(yùn)算
2. 字符串 (Strings)
$name: 'Tom Bob';
$container: "top bottom";
$what: heart;
3. 布爾型(Booleans)
$a: true;
$b: false; // 只有自身是false和null才會返回false，其他一切都將返回true
4. 顏色 (Colors)
//有多種表達(dá)方式
$color: #04a3f9;
$color0: green;
$color1: rgb(255, 255, 0);
$color2: rgba(#f3f3f3m 0.3); //這種寫法css會報(bào)錯，但scss支持 特別的好用的寫法
$color3: lighten($color, 15%);
$color4: darken($color, 15%);
5. 數(shù)組 (Lists)
$list0: 1px 2px 5px 6px; //普通的數(shù)組 用空格隔開
$list1: 1px 2px, 5px 6px; //二維數(shù)組 用逗號隔開
6. 映射(Maps)
//以圓括號包含內(nèi)容
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)
7. 空值(Null)
$value: null;
4、運(yùn)算符
1. 數(shù)字運(yùn)算符 +, -, *, /, %
-
+ 號運(yùn)算符// 純數(shù)字 $add2: 1 + 2px; // 3px $add3: 1px + 2; // 3px $add4: 1px + 2px;//3px // 純字符串 $add5: "a" + "b"; // "ab" $add6: "a" + b; // "ab" $add7: a + "b"; // ab $add8: a + b; // ab // 數(shù)字和字符串 $add9: 1 + a; // 1a $adda: a + 1; // a1 $addb: "1" + a; // "1a" $addc: 1 + "a"; // "1a" $addd: "a" + 1; // "a1" $adde: a + "1"; // a1 $addf: 1 + "1"; // "11" // 總結(jié)： a.純數(shù)字：只要有單位，結(jié)果必有單位 b.純字符串：第一個(gè)字符串有無引號決定結(jié)果是否有引號 c.數(shù)字和字符串：第一位有引號，結(jié)果必為引號；第一位對應(yīng)數(shù)字非數(shù)字且最后一位帶有引號，則結(jié)果必為引號
-
- 號運(yùn)算符$add1: 1 - 2; // -1 $add2: 1 - 2px; // -1px $add3: 1px - 2; // -1px $add4: 1px - 2px;//-1px $sub1: a - 1; // a-1 $sub2: 1 - a; // 1-a $sub3: "a" - 1;// "a"-1 $sub4: a - "1";// a-"1"
-
* 號運(yùn)算符$num1: 1 * 2; // 2 $mul2: 1 * 2px; // 2px $num3: 1px * 2; // 2px $num4: 2px * 2px;// 編譯不通過 兩個(gè)字段只能一個(gè)后部分是字符 $num5: 1 * 2abc; // 2abc
-
/ 號運(yùn)算符// 總結(jié)： a.不會四舍五入，精確到小數(shù)點(diǎn)后5位 b.每個(gè)字段必須前部分為數(shù)字，且當(dāng)前者只是單純數(shù)字無單位時(shí)，后者(除數(shù))后部分不能有字符。 其余結(jié)果就按順序去除空格后拼接起來。(因?yàn)榇藭r(shí)后綴被當(dāng)被單位看待了)
-
% 號運(yùn)算符// 總結(jié)： a.值與"%"之間必須要有空格，否則會被看做字符串
2. 關(guān)系運(yùn)算符 >, <, >=,<=
3. 相等運(yùn)算符 ==, !=
4. 布爾運(yùn)算符 and or 以及 not
$a: 1>0 and 0>=5; // fasle 注：值與"and"、"or"和"not"之間必須要有空格，否則會被看做字符串
5. 三目運(yùn)算符 if(條件, 結(jié)果1，結(jié)果2)
p {
color: if(1 + 1 = 2, green, yellow);
}
// 編譯后, 轉(zhuǎn)為css后的結(jié)果:
p{ color: green;}
5、控制指令
1. @if 指令
$age: 19;
p {
@if $age == 18 {
color: red;
} @else if $age == 19 {
color: blue;
} @else {
color: green;
}
}
// 編譯后, 轉(zhuǎn)為css后的結(jié)果:
p {
color: blue;
}
2. @for 指令
@for $i from 1 through 3 { //案例1 through包含end值 值為1,2,3
.item-#{$i} { width: 2em * $i; }
}
@for $i from 1 to 3 { //案例2 to不包含end值 值為1,2
.item-#{$i} { width: 2em * $i; }
}
// 案例1 轉(zhuǎn)為css后的結(jié)果:
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
3. @each 指令
$list: puma, sea-slug, egret, salamander;
@each $animal in list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
// 編譯后, 轉(zhuǎn)為css后的結(jié)果:
.puma-icon {
background-image: url('/images/puma.png'); }
.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }
.egret-icon {
background-image: url('/images/egret.png'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }
4. @while 指令
$i: 6;
@while $i > 0 { //while用的很少
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
// 編譯后, 轉(zhuǎn)為css后的結(jié)果:
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }
六、混合樣式指令 @mixin
1. 正常使用 @mixin @include
// 例1
@mixin large-text { //定義混合指令
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
p {
@include large-text; //引用
}
// 編譯后, 轉(zhuǎn)為css后的結(jié)果:
p {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
}
2. 有參數(shù)的 @mixin
@mixin mp($width) {
margin: $width;
}
body {
@include mp($width: 300px);
}
3. 設(shè)置參數(shù)默認(rèn)值
@mixin mp($width: 500px) {
margin: $width;
}
body {
@include mp(300px);
}
4. 混合樣式擴(kuò)展
@mixin example {
color: #ff0000;
}
@include example{ //擴(kuò)展
background-color: red;
}
p {
@include example;
}
// 編譯后, 轉(zhuǎn)為css后的結(jié)果:
p {
color: #ff0000;
background-color: red;
}
七、函數(shù)指令 @function
// example:
@function fn-name($params...) {
@return nth($params, 1);
}
p {
height: fn-name(1px);
}
// 編譯后, 轉(zhuǎn)為css后的結(jié)果:
p {
height: 1px;
}
八、其他指令
1. @import 引入其他scss文件
@import "foo.scss";
@import "foo"; // 以上兩種方式均可， 注，只能引入scss文件，其他的引入不行，css文件也不行
@import "rounded-corners", "text-shadow"; //同時(shí)引入多個(gè)文件
// 以下方式均不可行
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
2. @extend 繼承屬性
.img {
color: red;
}
.path{
@extend .img;
}
// 編譯后, 轉(zhuǎn)為css后的結(jié)果:
.img .path {
color: red;
}
3. @warn 命令行輸出警告信息
4. @error 命令行輸出錯誤信息
九、其他語法
1. 插值語法
$name: foo;
$attr: border;
p.#{$name} { //通過 `#{}` 插值語句可以在選擇器、屬性名和屬性值中使用變量
#{$attr}-color: $name;
}
// 編譯后：
p.foo {
border-color: foo;
}
2. & 父選擇器
a {
color: yellow;
&:hover{
color: green;
}
&:active{
color: blank;
}
}
3. !default 設(shè)置默認(rèn)值
$content: "First content";
$content: "Second content?" !default; //變量是 null 空值時(shí)將視為未被 `!default` 賦值。
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
// 編譯后, 轉(zhuǎn)為css后的結(jié)果:
#main {
content: "First content";
new-content: "First time reference"; }
四、知識點(diǎn)總結(jié)
什么是Css預(yù)處理器
Sass/Scss、Less、Stylus的區(qū)別
嵌套寫法
變量的定義與使用
7種常見的數(shù)據(jù)類型
數(shù)字、字符串、布爾型、顏色、數(shù)組、map、空值運(yùn)算符
布爾運(yùn)算符、三目運(yùn)算符4種控制指令
@if @for @each @while
**@mixin 混合指令的定義與使用 **
2種其他指令
@import @extend
其他語法
插值語法 、父選擇器
