1.less
-
Less是一門(mén) CSS 預(yù)處理語(yǔ)言，使用了類(lèi)似CSS的語(yǔ)法剥险，為CSS賦予了動(dòng)態(tài)語(yǔ)言的特征。它擴(kuò)展了 CSS 語(yǔ)言宪肖，增加了變量表制、Mixin(混合)、嵌套控乾、函數(shù)和運(yùn)算等特性么介，使 CSS 更易維護(hù)和擴(kuò)展。此外蜕衡，Less 可以運(yùn)行在 Node 或?yàn)g覽器端壤短。
less語(yǔ)法
1.變量 在less文件中聲明定義
//定義變量
//格式: @變量名稱(chēng): 對(duì)應(yīng)的value
@color:#E9232C;
@fs:16px;
@navH:70;
@w:200px;
@h:50px;
//使用
div,p{
width: @w;
height: @h;
background: @color;
}
注意：一般一些公用的變量，比如寬度慨仿，顏色等 單獨(dú)
抽取一個(gè)less文件
入一下例子
一個(gè)基礎(chǔ)的公用的less文件 名稱(chēng)為base.less文件 內(nèi)容如下:
//定義變量
@color:#E9232C;
@fs:16px;
@navH:70;
@w:200px;
@h:50px;
在另一個(gè)index.less文件中使用
//導(dǎo)入模塊
@import "base.less";
div,p{
width: @w;
height: @h;
background: @color;
}
@ import "xxx"在less文件中 引入另外一個(gè)less文件
2.標(biāo)簽嵌套 使用
//1.定義變量
@color:red;
@width:50px;
@height:50px;
@bgColor:green;
//2.嵌套
//父親盒子
.box{
width: @width*3;
height: @height*3;
background-color:@bgColor;
//子盒子
.test1{
width: @width + 20px;
height: @height + 20px;
background-color: white;
//子子盒子
.test3{
background-color: @color;
}
}
}
3. 運(yùn)算
注意：運(yùn)算符與值之間必須以空格分開(kāi) ; 在運(yùn)算的時(shí)候鸽扁，只要有一個(gè)有單位就行
@width:300px;
@height:100px;
@color1:red;
@color2:green;
div{
//width: @width - 100;//可以
//width: @width - 200px ;//可以
//width: @width * 2;//可以
//width: @width * 3px;//可以
width: 500 - @width; //可以
height: @height;
background-color: red;
//background-color: @color1 + @color2; // 可以
//background-color: @color1 + 15; // 可以
//background-color: @color1 + yellow; // 不可以
}
4.混合-函數(shù)
-
格式 .fn(){}fn是名稱(chēng)
@width:300px;
@height:100px;
@color:green;
//混合：無(wú)參數(shù)
// 類(lèi)似JS中的函數(shù)
// 格式 .fn(){}
.createRadius1(){
border-radius: 30px;
}
//混合：有參數(shù)
.createRadius2(@Radius:50px,@border:3px solid yellow){
border-radius: @Radius;
border: @border;
}
div{
width: 500 - @width; //可以
height: @height;
background-color: red;
//引用
.createRadius1();
}
p{
width: @width *2 ;
height: @height *2 ;
background-color: blue;
//引用
.createRadius2(30px,5px solid blue);
}
2. Sass預(yù)處理器
SASS是一套利用Ruby實(shí)現(xiàn)的, 最早最成熟的CSS預(yù)處理器，它和Less一樣也是 一門(mén) CSS 預(yù)處理語(yǔ)言镶骗，它擴(kuò)展了 CSS 語(yǔ)言，增加了變量躲雅、Mixin(混合)鼎姊、嵌套、函數(shù)和運(yùn)算等特性，使 CSS 更易維護(hù)相寇。
注意: SASS以.sass或者.scss結(jié)尾
.sass結(jié)尾以縮進(jìn)替代{}表示層級(jí)結(jié)構(gòu), 語(yǔ)句后面不用編寫(xiě)分號(hào);
.scss以{}表示層級(jí)結(jié)構(gòu), 語(yǔ)句后面需要寫(xiě)分號(hào);(推薦使用這個(gè))
2.1變量
Sass中定義變量的格式: $變量名:對(duì)應(yīng)的vlue
后定義的 變量會(huì)覆蓋前面的同名變量
SASS中變量不是延遲加載, 不可以先使用后定義
//定義變量
$width:200px;
$height:300px;
//使用
.box{
width:$width;
height:$height;
background: red;
}
變量插值
格式: #{變量名}
//定義變量
$size: 200px;
$w: width;
div{
#{$w}: $size;
height: $size;
background: red;
}
2.2混合
格式: @mixin 名稱(chēng)(){}
使用:@include 名稱(chēng)
- 沒(méi)有參數(shù)
//定義混合
@mixin center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father{
width: 300px;
height: 300px;
background: red;
//使用
@include center();
.son{
width: 200px;
height: 200px;
background: blue;
//使用
@include center();
}
}
-
帶參數(shù)
可以有默認(rèn)值
//定義混合 // $w：默認(rèn)值是100px @mixin whc($w: 100px, $h: 100px, $c: #000){ width: $w; height: $h; background: $c; } // 寬度慰于、高度使用默認(rèn)值的時(shí)候，顏色不用唤衫，必須帶上 **形式參數(shù)** .box2{ @include whc($c: blue); } .box1{ @include whc(300px, 300px, red); } -
可變函數(shù) 和 less一樣
//定義混合 @mixin animate($name, $time, $args...){ transition: $name $time $args; } //使用 div{ width: 200px; height: 200px; background: red; //transition: all 4s linear 0s; //使用 @include animate(all, 4s, linear, 0s); }
2.3引入其他sass文件
//引入其他婆赠，scss文件，后綴名可加佳励，可不加
@import "search.scss";
2.4函數(shù)
-
自定義函數(shù)
格式:@function 函數(shù)名(形式參數(shù)){函數(shù)體}
//定義函數(shù)
@function sum($num){
//返回值
//注意：格式 @return
@return $num + $num +"px";
}
div{
//使用
width: sum(2);
height: 200px;
}
-
內(nèi)置函數(shù)
內(nèi)置函數(shù)休里，執(zhí)行使用就行了
2.5嵌套結(jié)構(gòu)
子級(jí)盒子嵌套使用在父級(jí)盒子里面
.father{
width: 300px;
height: 300px;
background: red;
//使用拼接
&:hover{
width: 100px;
height: 100px;
background: yellow;
}
//嵌套
.son{
width: 200px;
height: 200px;
background: blue;
}
}
2.6繼承
格式:@extend .xxx 其中xxx是要繼承的類(lèi)
//定義
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father{
//繼承
@extend .center;
width: 300px;
height: 300px;
background: red;
.son{
@extend .center;
width: 200px;
height: 200px;
background: blue;
}
}
2.7 Sass中的條件判讀和循環(huán)
-
條件判斷
在sass中可以直接，使用 if(){}elseif()
//定義一個(gè)混合
@mixin triangle($dir, $width, $color){
width: 0;
height: 0;
border-width: $width;
border-style: solid solid solid solid;
//條件判斷
@if($dir == Up){
border-color: transparent transparent $color transparent;
}@else if($dir == Down){
border-color: $color transparent transparent transparent;
}@else if($dir == Left){
border-color: transparent $color transparent transparent;
}@else if($dir == Right){
border-color: transparent transparent transparent $color;
}
}
div{
//使用混合
@include triangle(Left, 50px, blue);
}
-
循環(huán)
@for $i from 起始整數(shù) through 結(jié)束整數(shù){}
@for $i from 起始整數(shù) to 結(jié)束整數(shù){}
兩者的區(qū)別 through包頭包尾, to包頭不包尾
ul{
li{
width: 100%;
height: 50px;
border: 1px solid #000;
font-size: 20px;
color: #fff;
background: red;
//@for $i from 5 through 8{
//@for $i from 5 to 8{
$i:5;
@while($i <= 8){
&:nth-child(#{$i}){
background: deepskyblue;
}
$i:$i+1;
}
}
}
