定制SCSS
boot重點(diǎn)手寫響應(yīng)式+柵格布局+SCSS
1.CSS有一些缺點(diǎn)
語法不夠強(qiáng)大，沒有變量和合理的代碼復(fù)用機(jī)制，導(dǎo)致代碼難以維護(hù)
我們要使用動(dòng)態(tài)樣式語言，賦予css新的特性，提高代碼的可維護(hù)性
常見的動(dòng)態(tài)樣式語言
1.scss/sass （scss兼容sass，scss的語法更接近c(diǎn)ss）
??boot4是使用scss生成的
2.stylus
3.Less
2.scss是什么
一款強(qiáng)化css的輔助工具
scss的語法和css的語法十分相似
scss給css添加了變量，嵌套，混合，導(dǎo)入，函數(shù)等高級(jí)功能
這些高級(jí)功能，讓css更加的強(qiáng)大與優(yōu)雅
使用scss要注意
瀏覽器，不能執(zhí)行scss文件，
需要在后臺(tái)，把scss文件，轉(zhuǎn)換成css文件，才能讓瀏覽器解析運(yùn)行
3.scss的使用
①安裝
1.要求nodejs解釋器，v8.11以上
??如果安裝scss64位，需要nodejs v10.01以上
2.在線安裝 npm install -g node-sass
3.無網(wǎng)安裝，把解壓文件，復(fù)制進(jìn)nodejs安裝文件夾即可
4.檢驗(yàn)scss版本(是否安裝成功)?node-sass ?-v
②scss文件轉(zhuǎn)換成css
1.單文件轉(zhuǎn)換
node-sass ?要轉(zhuǎn)換的scss文件???轉(zhuǎn)換之后的css文件
node-sass ?scss/01.scss ??css/01.css
2.多文件轉(zhuǎn)換
node-sass ?scss文件夾???-o ??css文件夾
node-sass ?scss ?-o ?css
3.單文件監(jiān)聽
node-sass -w要轉(zhuǎn)換的scss文件???轉(zhuǎn)換之后的css文件
node-sass -w??scss/01.scss ?css/01.css
4.多文件監(jiān)聽
node-sass ?-w ?scss文件夾名稱 ?-o ??css文件夾名稱
node-sass ?-w ?scss ?-o ?css
4.SCSS基礎(chǔ)語法
①變量
$開頭，代表聲明變量
：代表賦值
$jd_red:#f10215;
變量名稱，可以包括，字符，數(shù)字，-?,_
不能以數(shù)字開頭，
規(guī)則基本與css選擇器命名規(guī)則相同
注意：
1.在{}內(nèi)部聲明的變量，只能在{}內(nèi)部使用，外部無效
??如果變量聲明在{}外，當(dāng)前scss文件都能使用
2.!default規(guī)則：如果此變量在之前已經(jīng)聲明賦值了，那么就使用之前的值
?如果之前沒有聲明賦值，就使用現(xiàn)在的值
②嵌套
1.根據(jù)html代碼的結(jié)構(gòu)，寫選擇器
#content{
??color:#000;
??.top{
????color:#111;
????h4{color:#333;}
????p{color:#444;}
??}
??.bottom{color:#222;}
}
2.偽類嵌套，需要在偽類前，添加&占位符，不然會(huì)多一個(gè)空格
div{
??color:#111;
??&:hover{color:#222;}
}
3.群組選擇器嵌套
nav,div,#content,ul{
??a{color:#112;}
}
4.屬性嵌套
div{
??border:{style:solid;width:10px;color:#f00;}
}
練習(xí)
一個(gè)200*200px（變量）的div，紅色背景(變量)
鼠標(biāo)懸停(嵌套)，過渡（嵌套）到黃色背景，且變?yōu)閳A形（變量）
③導(dǎo)入
局部scss文件，下劃線開頭的scss，叫局部scss文件
特點(diǎn)，不會(huì)被轉(zhuǎn)換成css文件
如何使用
在全局scss文件中引入
@import "局部scss文件名稱" 注意，不要下劃線，不要后綴
十分有利于css項(xiàng)目管理
局部scss中的變量，可以在引入他的全局scss中使用
④混合器
把多個(gè)選擇器，都會(huì)使用的樣式，封裝進(jìn)一個(gè)混合器
然后在需要使用的時(shí)候，調(diào)用混合器
聲明
@mixin 混合器名稱(形參1,形參2....){樣式}
調(diào)用
@include 混合器名稱(實(shí)參1,實(shí)參2...)；
@mixin bg_linear($angle,$color1,$color2){??background:-webkit-linear-gradient($angle,$color1,$color2);??background:-ms-linear-gradient($angle,$color1,$color2);??background:-moz-linear-gradient($angle,$color1,$color2);??background:-o-linear-gradient($angle,$color1,$color2);}h2{@include bg_linear(right,#ff0,#0ff)}
經(jīng)常用于大量的樣式重用
???????用于css?hack
⑤繼承
一個(gè)選擇器，繼承另外一個(gè)選擇器所有的樣式
在子選擇器中，使用關(guān)鍵字@extend 父選擇器
可以把父選擇器的所有樣式，給子選擇器使用
div{box-shadow: 0px 0px 0px 0px #f00;}
p{
??color:#111;
??@extend div;
}
⑥運(yùn)算，加減乘除模
+?有連接字符串的功能
用帶引號(hào)的字符串?+?不帶引號(hào)，結(jié)果帶引號(hào)
用不帶引號(hào)的字符串?+?帶引號(hào)的，結(jié)果不帶引號(hào)
-?是可以放在變量名稱中的
由于轉(zhuǎn)換的時(shí)候，有可能會(huì)把-認(rèn)為是變量的一部分
所以，在使用減法的時(shí)候，減號(hào)前后加空格
/ scss中,/還有分割符的意思
在以下情況，會(huì)被判定為除法
1.如果運(yùn)算符兩邊，有變量或者函數(shù)的返回值，認(rèn)為是除法
width: $width/2;
2.被()包裹，認(rèn)為是除法
height:(500px/2);
3.除法運(yùn)算式，是其它算術(shù)表達(dá)式的一部分，認(rèn)為是除法
5px+8px/2px;
scss會(huì)在不同單位間，自動(dòng)轉(zhuǎn)換，前提這個(gè)單位能轉(zhuǎn)
相對(duì)單位rem ?em ?% 不能轉(zhuǎn)換
width:1px+1in+1pt+1cm+1mm；這些絕對(duì)可以自動(dòng)轉(zhuǎn)換
scss插值運(yùn)算 ?
content:"liangliang ate #{50+20} baozis"; ??
顏色運(yùn)算，分段運(yùn)算
#112233+#445566 ?紅+紅?綠+綠 藍(lán)+藍(lán)
結(jié)果#557799
rgba的運(yùn)算，需要alpha相等才能運(yùn)算
⑦函數(shù)
scss定義了很多函數(shù)，有些函數(shù)可以在css中直接使用
rgba()
hsl(hue,saturation,lightness)
hue:色調(diào)??取值0~360 0~120 120~240 240~360 ?3個(gè)色段
saturation飽和度??取值0.0%~100%
lightness 亮度????取值0.0%~100%
數(shù)學(xué)函數(shù)
round($val) ?四舍五入
floor($val) ??向下取整
ceil($val) ???向上取整
min($v1,$v2,.....);
max($v1,$v2,.....);
random() ???隨機(jī)數(shù)
字符串函數(shù)
unquote($val)?去掉雙引號(hào)
quote($val) ???添加雙引號(hào)
to_upper_case("abc") ?轉(zhuǎn)大寫
to_lower_case("ABXC") 轉(zhuǎn)小寫
自定義函數(shù)
@function get-width($n,$m){
??@return $n*$m;
}
function和return關(guān)鍵字，添加@
參數(shù)要有$
⑧指令(if-else)
@if(){}
@else if(){}
@else{}
