Less總結篇-CSS預處理語言
阿新 • • 發佈:2019-01-10
1.瞭解
Less是一門CSS預處理語言,它擴充套件了CSS語言,增加了變數,Mixin,函式等特性,使CSS更易維護和擴充套件。更少可以執行在Node或瀏覽器端。
2.使用方法
方法一:“袋鼠”工具,下載單獨軟體先在本地轉譯,再把生成的.css檔案引入;
方法二:使用less的指令碼進行實時轉譯,如下:
<link rel="stylesheet/less" href="styles.less" /> ... <script src="less.js" type="text/javascript"></script> 注意: 1.link中自己寫的less的rel=“stylesheet/less”; 2.引入less指令碼之前書寫.less自書寫需轉譯的less ;
方法三:使用npm全域性安裝less,然後逐步轉譯less檔案
//安裝
$ npm install -g less
//解析
$ lessc styles.less
//解析完後儲存
$ lessc styles.less > styles.css
方法四:在vue中使用less-loader,具體修改如下:
step1:安裝 less 和 less-loader ,在專案目錄下執行如下命令: npm install less less-loader --save-dev step2:webpack.config.js中新增如下程式碼,對字尾為less的檔案進行解析依賴 module: { rules: [ ... { test: /\.less$/, loader: "style-loader!css-loader!less-loader", } ] } step3:頁面中<style>標籤中新增 lang="less" <style scoped lang="less"> ... </style>
3.語法
1、變數:其實本質是常量,因為它是不可變的,只允許定義一次。
@val001 : #5B83AD; //變數為:屬性值
@val002 : color; //變數為:屬性值
@val003 : className; //變數為:類名
@val004 : "../image"; //變數為:url
@val005 : "../../themes"; //變數為:匯入半路徑
@val006 : "content string";
@val007 : "val006"; //變數為:變數名稱
@import "@{val005}/backTheme.less";
div {
@{val002}: @val001;
content: @@val007;
background: url("@{val004}/big/big.png");
}
[email protected]{val003}{
font-size: 10px;
}
———————————————————————————————————————————————————————————————————————————————————————————
//輸出
div {
color: #5B83AD;
content: "content string";
background:yrl("../image/big/big.png");
}
.className{
font-size:10px;
}
2、混入(Mixins):一組屬性在其他樣式中出現。
.redColor{ //輸出的被混入物件
color:red;
}
.noshow(){ //不輸出的被混入物件
padding:10px;
&:hover{ //屬性的混入
color:blue;
}
}
.cont{
font-size:16px;
.redColor() !important; //redColor裡的所有屬性都會帶 !important
.noshow; //有木有小括號都是可以的
}
—————————————————————————————————————————————————————————————————————————————————————————
//輸出
.redColor{
color:red;
}
//.noshow不會輸出
.cont{
font-size:16px;
color:red !important;
padding:10px;
}
.cont:hover{
color:blue;
}
注意:
1.混入時屬性混入可以將()小括號去掉;
2.可以使用類名,id名進行混入;
3.不想要引用的樣式輸出,可以使用.noshow(){},加小括號的方式;
3、引數混入:可以理解成函式傳遞引數。
.mixin(@x:10px; @y:10px; @z:10px; @color:#aaa) {
width:@x;
height:@y;
padding:@z;
color:@color;
box-shadom:@arguments;
}
.class1 {
.mixin(@color:#ddd; @x:50px);
}
—————————————————————————————————————————————————————————————————————————————————————————
//輸出
.class1 {
width:50px;
height:10px;
padding:10px;
color:#ddd;
box-shadom:10px 10px 10px #ddd;
}
注意:
1.傳參可以對引數名稱進行規定,如:@color
2.傳參可以設定預設的數值,如:@clor:#aaa
3.傳遞引數可以是多個,如:@x:10px; @y:10px; @z:10px; @color:#aaa
4.傳參定義了名稱,其傳遞的實際引數順序無所謂,如:@color:#ddd; @x:50px
[email protected]類似一個偽陣列,可以直接使用,如:box-shadom:@arguments
//特殊:混入作為函式
.mixin2(@x;@y){
@wid:@x;
@hei:@y;
}
.class2{
.maxin2(10px,20px);
width:@wid;
height:@hei;
}
———————————————————————————————————————————————————————————————————————————————————————————
//輸出
.class2 {
width:10px;
height:10px;
}
注意:
1.混入可作為函式,進行呼叫,然後返回對應的變數再賦值,如:.maxin2(10px,20px);width:@wid;
//特殊:條件混入
.mixin (@a) when (@a >= 50%) {
background-color: black;
}
.mixin (@a) when (@a < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
——————————————————————————————————————————————————————————————————————————————————————————
//輸出
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
//特殊:迴圈在混入中的使用
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
[email protected]{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
———————————————————————————————————————————————————————————————————————————————————————————
//輸出:
.column-1 { width: 25%; }
.column-2 { width: 50%; }
.column-3 { width: 75%; }
.column-4 { width: 100%; }
4、巢狀:有父子關係的寫在一起,接近於html的寫法。
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
———————————————————————————————————————————————————————————————————————————————————————————
//輸出
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
5、運算:利用+ - * / 進行計算得出最後的值並附上單位,常用的是寬高,百分比,顏色值
@val001:5px+10; 15px
@val002:5px+10px; 15px
@val003:5px+10cm; 15px
@val004:5%*2; 10%
注意:
1.計算中出現多單位,單位以最左邊單位為最終結果;
2.計算中最好將單位標清楚,方便修改和設定;
6、格式化:使用“ ~ ”符號,允許任意字串作為屬性或屬性值,並以原樣返回
.weird-element {
content: ~"^//* some horrible but needed css hack";
}
———————————————————————————————————————————————————————————————————————————————————————————
//輸出
.weird-element {
content: ^//* some horrible but needed css hack;
}
7、功能:可以轉換顏色,操縱字串和進行數學運算(使用較少,但在效果變更還是很實用的)
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%` //將0.5%轉換為50%
color: saturate(@base, 5%); //將基色的飽和度增加5%
background-color: spin(lighten(@base, 25%), 8); //將背景顏色設定為減輕25%並旋轉8度的顏色
}
8、範圍作用域:類似js中區域性和全域性的感覺,不一樣的是區域性的變數可以在後邊定義
@var: red;
#page {
#header {
color: @var; //white
}
@var: white; //引用後邊定義變數
}
9、匯入:匯入外部的樣式,可以是less或者css等
@import "foo"; foo.less
@import "foo.less"; foo.less
@import "foo.php"; foo.less
@import "foo.css"; foo.css
@import (optional, reference) "foo.less"; //指令控制匯入檔案
注意:
1.匯入的語句寫在哪裡都無所謂,但是建議寫在最頂端;
2.根據副檔名,有如下規範:
(1)如果檔案有.css副檔名,則將其視為CSS,並將@import語句保留為原樣;
(2)如果它有任何其他副檔名,它將被視為less並匯入;
(3)如果它沒有副檔名,以副檔名.less進行匯入;
[email protected] (keyword) "檔名稱";這才是最全的匯入語法,其中【keyword】代表指令,可進行一些匯入
檔案的控制,並支援多指令控制且用逗號分開,可選指令如下:
reference: 使用Less檔案但不輸出
inline: 在輸出中包含原始檔但不處理它
less: 無論副檔名是什麼,都將檔案視為Less檔案
css: 無論副檔名是什麼,都將檔案視為CSS檔案
once: 只包含一次檔案(預設就是包含一次)
multiple: 多次包含該檔案
optional: 找不到檔案時繼續編譯(預設找不到就停止編譯了)
4.常用內建函式
//字串
替換:replace(字串,要替換的文字,替換成文字,正則標誌);
replace("One + one = 4", "one", "2", "gi"); //2+2=4
//列表
長度:length(list的變數名稱);
@listall:1,2,3,4;
n: length(@listall); //n: 4
提取:extract(list的變數名稱,下標數字);
val: extract(@listall,2) //val: 3
//數字
取整:ceil(小數) 向上取整
floor(小數) 向下取整
round(小數,小數位數) 四捨五入(並保留幾位小數)