less
1、注釋: //這種注釋不能夠編譯到CSS 文件中
/*這種注釋 能夠編譯到CSS 文件中*/
2、less 的基礎語法
(1)、聲明變量: @變量名 : 變量值
使用變量: @變量名
>>>變量使用的基本原則:
多次頻繁出現的值,后期需要統一修改的值,牽扯到數值運算的值,推薦使用變量
>>>less 中的變量類型
①數值類: 不帶單位的 123, 帶單位的 1px
②字符串類型: 不帶引號的 red #FF0000 帶引號的"hahhaha"
③顏色類: red #FF0000 rgb(255,255,0)
④值列表連類型:多個值用逗號或空格分隔, 10px solid red
(2)、混合(Mixins)
①無參混合
聲明: .class{}
調用: 在選擇器中,使用 .class; 直接調用
②有參無默認值混合
聲明: .class(@param){}
調用: .class(paramValue);
③有參有默認值混合
聲明: .class(@param:默認值){}
調用: .class(paramValue); 或 .class();
>>>如果聲明時,沒有給參數賦默認值,則調用時必須賦值,否則報錯
>>>無參混合,實際上就是一個普通的class選擇器,會被編譯到css文件中;
而有參混合,在編譯時,不會出現在css文件中
(3)、less 中的匹配默認
①聲明
@pipei(條件1,參數){} @pipei(條件2,參數){} @pipei(@_,參數){}
②調用:@pipei(條件的值,參數的值){}
③匹配規則: 根據調用時輸入的條件值,去尋找與之匹配的混合執行
@_表示不管匹配成功與否,都會執行的選項
(4)、@arguments 特殊變量
在混合中, @arguments 表示混合傳入的所有參數, @arguments 中的多個參數之間,用空格分隔
.border(@width,@style,@color){
border: @arguments; --> //border: @width @style @color;
}
(5)、less 中的加減乘除運算
less 中的所有變量和數值,可以進行 + - * / 運算
需要注意的是,當顏色值運算時,紅綠藍分三組運算。組內單獨運算,組間互不干涉
(6)、 less 中的嵌套
less 允許css選擇器 按照html代碼 的結構進行嵌套
#section{
>p{}
ul{
&:hover{}
}
}
① less 中的嵌套,默認是后代選擇器。 如果需要子代選擇器,需要在前面加 >
② & 符號, 表示這個&所在的上一層選擇器, 比如上述&,表示 #section ul : hover
二、Sass
1、注釋
// 注釋一: 編譯時不會被編譯到 css文件中
/* 注釋二: 在非compressed壓縮模式下,會被編譯到css文件中 */
/*! 注釋三: 重要注釋 ——— 各種壓縮模式下,都會被編譯到css文件中 */
2、 SCSS基礎語法
(1)、SCSS中的變量
① 聲明變量: $變量名:變量值;
SCSS中,允許將變量嵌套在字符串中,但是變量必須使用 井{} 包裹
eg: border-井{$position}: 10px solid yellow;
(2)、 SCSS 中的運算,會帶單位進行運算,使用時需注意最終的單位是否正確
eg: height: $width/10; height: $width*10;
(3)、 SCSS 中的嵌套: 選擇器嵌套 屬性嵌套 偽類嵌套
①選擇器嵌套 ul{ li{} }
嵌套默認使用后代選擇器,若需要子代選擇器,可以在選擇器前加 >
可以在選擇器的 {} 中,使用 &表示上一層的選擇器
②偽類嵌套: li{ &:hover{} }
在選擇器的 {} 中,使用 & 配合偽類事件,可以表示當前選擇器的偽類
③屬性嵌套: font:{
size: 16px;
weight: bold;
family: "微軟雅黑";
style: "italic";
};
對於屬性名有 - 分割為多段的屬性,可以使用屬性嵌套; 屬性名的前半部分必須緊跟 :{}, 才能用{}包裹屬性的后半部分
(4)、混合宏、繼承、占位符
①混合宏:使用 @mixin 聲明混合宏,在其他選擇器中使用 @include 調用混合宏
@mixin hunhe .class{ @include hunhe; }
@mixin hunhe(@param) .class{ @include hunhe(value); }
@mixin hunhe(@param:value) .class{ @include hunhe(); }
>>>聲明時,可以有參數,也可以沒有參數; 參數可以有默認值,也可以沒有默認值,但是調用時,必須符合聲明時的要求 與less 中的混合相同
>>>優點 : ①可以傳參 ②不會產生同名的class
>>>缺點 : 調用時,會把混合宏中的所有代碼 copy 到選擇器中,產生大量重復代碼
②繼承 :聲明一個普通的class,在其他選擇器中使用 @extend 繼承這個class
.class1{} .class2{ @extend .class1; }
>>>優點 : 將相同代碼,提取到並集選擇器,減少冗余代碼
>>>缺點 : ①不能傳參 ②會生成一個多余的class
③ 占位符 : 使用 % 聲明占位符,在其他選擇器中使用 @extend 繼承占位符
%class1{} .class2{ @extend %class1; }
>>>優點 : ①將相同代碼,提取到並集選擇器,減少冗余代碼;
②不會生成一個多余的class
>>>缺點 : 不能傳參
(5)、if條件結構:
條件結構需要寫在選擇器里面,條件結構的大括號直接包裹樣式屬性
@if 條件 {}
@else {}
(6)、for 循環
@for $i from 1 to 10{} //不包含10
@for $i from 1 through 10{} // 包含10
(7)、while 循環
$i:0;
@while $i<10{
$i : $i + 1;
}
(8)、each 循環遍歷
@each $item in a,b,c,d{ //$item 表示 a,b,c,d 的每一項}