CSS預(yù)處理器
用某一種語(yǔ)言用來(lái)為 CSS 增加一些動(dòng)態(tài)語(yǔ)言的的特性(變量、函數(shù)、繼承等)，CSS預(yù)處理器可以讓你的 CSS 更見(jiàn)簡(jiǎn)潔，適應(yīng)性更強(qiáng)，代碼更直觀等諸多好處
- 簡(jiǎn)而言之：CSS預(yù)處理器就是升級(jí)版CSS
- 常見(jiàn)的css預(yù)處理器:
Less, Sass, Stylus
Less(Leaner Style Sheets)
一門(mén) CSS 預(yù)處理語(yǔ)言，為CSS賦予了動(dòng)態(tài)語(yǔ)言的特征
- 利于維護(hù)與復(fù)用
- CSS 語(yǔ)言，增加了變量、Mixin(混合)、嵌套、函數(shù)和運(yùn)算等特性，使 CSS 更易維護(hù)和擴(kuò)展
- 一句話：用類(lèi)似JS的語(yǔ)法去寫(xiě)CSS
基本使用
- 編寫(xiě)less文件-->引入less文件-->引入less.js-->運(yùn)行
- ==注意==：一定要先引入less.css再引入less.js
<link rel="stylesheet/less" href="css/01.less">
<script src="js/less.js"></script>
- ==注意==：如果less代碼是寫(xiě)到單獨(dú)的文件中,一定要在服務(wù)端環(huán)境運(yùn)行才能生效
注釋
- less中的注釋和JS中的注釋一樣, 也有單行注釋和多行注釋
- less中單行注釋和多行注釋最大的區(qū)別在于: 是否會(huì)被編譯
- 單行注釋不會(huì)被編譯(不會(huì)出現(xiàn)在編譯后的文件中)
- ==多行注釋會(huì)被編譯==(會(huì)出現(xiàn)在編譯后的文件中)
變量
- 格式：@變量名稱(chēng): 值;
@w: 400px;
@h: @w;
- 局部變量全局變量與js一樣
- ==注意==：less中的變量是延遲加載的, 寫(xiě)到后面也能在前面使用
- 和js一樣在訪問(wèn)變量時(shí)會(huì)采用就近原則
- 和js一樣不同作用域的變量不會(huì)相互影響
變量插值：格式: @{變量名稱(chēng)}
- 在less中如果屬性的取值可以直接使用變量
- 如果是屬性名稱(chēng)或者選擇器名稱(chēng)并不能直接使用變量
- 如果屬性名稱(chēng)或者選擇器名稱(chēng)想使用變量中保存的值,那么必須使用變量插值的格式
@size: 200px;
@w: width;
@s: div;
@{s}{
@{w}: @size;
height: @size;
background: red;
}
運(yùn)算
- CSS3中新增了一個(gè)calc函數(shù),可以實(shí)現(xiàn)簡(jiǎn)單的+ - * / 運(yùn)算
margin-left: calc(-200px * 0.5)
- less中的運(yùn)算和CSS3中新增的calc函數(shù)一樣, 都支持+ - * / 運(yùn)算
margin-left: (-200px / 2)
混合(Mix in)
- 如果混合名稱(chēng)的后面沒(méi)有(),那么在預(yù)處理的時(shí)候, 會(huì)保留混合的代碼
- 如果混合名稱(chēng)的后面加上(),那么在預(yù)處理的時(shí)候, 不會(huì)保留混合的代碼
.center(@w:100px, @h:100px, @c:red){
width: @w;
height: @h;
background: @c;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father{
.center(200px,200px,red);
.son{
.center(@c:skyblue);
}
}
可變參數(shù)
- less中的@arguments和js中的arguments一樣, 可以拿到傳遞進(jìn)來(lái)的所有形參
- less中的...表示可以接收0個(gè)或多個(gè)參數(shù)
- 如果形參列表中使用了...,那么...必須寫(xiě)在形參列表最后
.animate(@name, @time, ...){
transition: @arguments;
}
.a{
.center(@c:green);
.animate(all, 1s, linear, 0.5s);
}
.a:hover{
width: 300px;
height: 300px;
}
匹配模式
- @_: 表示通用的匹配模式
- 無(wú)論同名的哪一個(gè)混合被匹配了, 都會(huì)先執(zhí)行通用匹配模式中的代碼
.triangle(@_, @w, @c){
width: 0;
height: 0;
border-style: solid solid solid solid;
}
.triangle(Right, @w, @c){
border-color: transparent transparent transparent @c;
border-width: @w;
}
.triangle(Down, @w, @c){
border-color: transparent transparent @c transparent;
border-width: @w;
}
.triangle(Left, @w, @c){
border-color: transparent @c transparent transparent;
border-width: @w;
}
.triangle(Top, @w, @c){
border-color: @c transparent transparent transparent;
border-width: @w;
}
.a{
.triangle(Down, 20px, pink);
}
導(dǎo)入其它文件
@import "triangle";
內(nèi)置函數(shù)
由于less的底層就是用JavaScript實(shí)現(xiàn)的,所以JavaScript中常用的一些函數(shù)在less中都支持
// 混雜方法
/*
image-size("file.jpg"); // => 100px 50px
image-width("file.jpg"); // => 100px
image-height("file.jpg"); // => 50px
// 單位轉(zhuǎn)換
convert(9s, "ms"); // => 9000ms
convert(14cm, mm); // => 140mm
convert(8, mm); // => 8
// 列表
@list: "A", "B", C, "D";
length(@list); // => 4
extract(@list, 3); // => C
*/
// 數(shù)學(xué)
/*
ceil(2.1); // => 3 向上取整
floor(2.1); // => 2 向下取整
percentage(.3); // => 30% 轉(zhuǎn)百分比
round(1.67, 1); // => 1.7 四舍五入，保留一位小數(shù)點(diǎn)
sqrt(25cm); // => 5cm 取平方根
abs(-5cm); // => 5cm 取絕對(duì)值
pi(); // => 3.141592653589793 圓周率π
max(3px, 42px, 1px, 16px); // => 42px
min(3px, 42px, 1px, 16px); // => 1px
*/
// 字符串
/*
replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"
*/
// 判斷類(lèi)型
/*
isnumber(56px); // => true 是否含數(shù)字
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
iskeyword(keyword); // => true
isurl(url(...)); // => true
ispixel(56px); // => true
isem(7.8em); // => true
ispercentage(7.8%); // => true
isunit(4rem, rem); // => true 是否為指定單位
isruleset(@rules); // => true 是否為變量
*/
// 顏色操作
/*
增加飽和度
saturate(color, 20%)
減少飽和度
desaturate(color, 20%)
增加亮度
lighten(color, 20%)
減少亮度
darken(color, 20%)
降低透明度
fadein(color, 10%)
增加透明度
fadeout(color, 10%)
設(shè)置絕對(duì)不透明度(覆蓋原透明度)
fade(color, 20%)
旋轉(zhuǎn)色調(diào)角度
spin(color, 10)
將兩種顏色混合，不透明度包括在計(jì)算中。
mix(#f00, #00f, 50%)
與白色混合
tint(#007fff, 50%)
與黑色混合
shade(#007fff, 50%)
灰度，移除飽和度
greyscale(color)
返回對(duì)比度最大的顏色
contrast(color1, color2)
*/
// 顏色混合
/*
每個(gè)RGB 通道相乘，然后除以255
multiply(color1, color2);
與 multiply 相反
screen(color1, color2);
使之更淺或更暗
overlay(color1, color2)
避免太亮或太暗
softlight(color1, color2)
與overlay相同，但顏色互換
hardlight(color1, color2)
計(jì)算每個(gè)通道(RGB)基礎(chǔ)上的兩種顏色的平均值
average(color1, color2)
*/
@str1: "../images/1.jpg";
@str2: replace(@str1, "1", "2");
.a{
width: 200px;
height: 200px;
//background: url("../images/1.jpg");
//background: url(@str2);
background:desaturate(yellow, 50%);
}
.a:hover{
background:saturate(yellow, 50%);
}
層級(jí)結(jié)構(gòu)
- 如果在某一個(gè)選擇器的{}中直接寫(xiě)上了其它的選擇器,會(huì)自動(dòng)轉(zhuǎn)換成后代選擇器
- &的作用,是告訴less在轉(zhuǎn)換的時(shí)候不用用后代來(lái)轉(zhuǎn)換,直接拼接在當(dāng)前選擇器的后面即可
.father{
.center(200px,200px,red);
.pot;
&:hover{
background: yellowgreen;
}
&::before{
content: "子元素";
display: block;
background: pink;
width: 100px;
height: 100px;
}
.son{
.center(@c:skyblue);
.pot;
}
}
繼承
- 使用時(shí)的語(yǔ)法格式不同
- 轉(zhuǎn)換之后的結(jié)果不同(混合是直接拷貝, ==繼承是并集選擇器==)
.father:extend(.pot){
.center(200px, 200px, red);
.son:extend(.pot){
.center(100px, 100px, yellow);
}
}
條件判斷
less中可以通過(guò)when給混合添加執(zhí)行限定條件,只有條件滿足(為真)才會(huì)執(zhí)行混合中的代碼
- when表達(dá)式中可以使用比較運(yùn)算符(> < >= <= =)、邏輯運(yùn)算符、或檢查函數(shù)來(lái)進(jìn)行條件判斷
- (),()相當(dāng)于JS中的||
.size(@width,@height) when (@width = 100px),(@height = 100px){
width: @width;
height: @height;
}
- ()and()相當(dāng)于JS中的&&
.center(@w:100px, @h:100px, @c:red) when(ispixel(@w))and(ispixel(@h)){
width: @w;
height: @h;
background: @c;
}
