LESS從入門到精通

Sass · 發表 2019-03-18 06:46:46

摘要： LESS是CSS預處理語言，是CSS的擴充套件。然後說說比較流行的幾款預編譯器：SASS/SCSS、LESS、Stylus。 SASS學習網站： https://www.sass.hk/ https://www.w3cschool.cn/sass/ https://github....

LESS是CSS預處理語言，是CSS的擴充套件。

然後說說比較流行的幾款預編譯器：SASS/SCSS、LESS、Stylus。

SASS學習網站：

https://www.sass.hk/
https://www.w3cschool.cn/sass/
https://github.com/sass/sass
複製程式碼

LESS學習網站：

http://lesscss.cn/
https://less.bootcss.com/
https://www.w3cschool.cn/less/
https://github.com/less/less.js
複製程式碼

Stylus學習網站：

https://stylus.bootcss.com/
https://github.com/stylus/stylus
複製程式碼

二、為什麼用LESS

SASS/SCSS和Stylus都很強，但是我還是選擇了LESS，個人喜歡NodeJS，然後stylus空格我又不喜歡，就用了LESS，現在用的也習慣了，下面就給大家介紹一下LESS的一些用法吧。

LESS——像寫javascript一樣書寫css

特點：

1、寫樣式更簡單：巢狀

2、使用方便：變數、運算、函式

3、學習成本低：語法

三、怎麼用LESS

1、安裝使用

(1)瀏覽器中使用

在head中引用：

<link rel="stylesheet/less" type="text/css" href="index.less" />//必須加上/less
<script src="less-1.3.3.min.js"></script>//js必須在less後引用

CDN：
https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js
https://cdn.bootcss.com/less.js/3.9.0/less.js
複製程式碼

觀察模式，不呼叫也可以：

<link rel="stylesheet/less" href="index.less">
<script>less = { env: 'development'};</script>//宣告開發模式
<script src="less-1.3.3.min.js"></script>
<script>less.watch();</script>//呼叫觀察模式
複製程式碼

根據個人需求進行配置，不配置也可以:

<script>
less = {
env: "development", // 開發(development)模式/生產(production)模式
async: false, // 非同步載入
fileAsync: false, // load imports async when in a page under
// a file protocol
poll: 1000, // 觀察模式間隔
functions: {}, // user functions, keyed by name
dumpLineNumbers: "all", // "comment" or "mediaQuery" or "all"
relativeUrls: false,// whether to adjust url's to be relative
// if false, url's are already relative to the
// entry less file
rootpath: ":/"// a path to add on to the start of every url
//resource
};
</script>
複製程式碼

(2)在node.js中使用

安裝：

npm install -g less
複製程式碼

編譯：

lessc index.less index.css
複製程式碼

2、語法

保留CSS的基礎語法，並進行了擴充套件

import "reset.css"less在編譯時不會變動css檔案
import "base"less匯入其他less檔案時可以省略檔案格式
import url("base.less")less也可以使用url形式匯入，但是必須有後綴
複製程式碼

3、運算

在less中，可以在書寫屬性時直接進行加減乘除

例子：header插入了一個padding

@fullWidth: 1200px;
.header{
width: @fullWidth – 20px * 2;
padding: 0px 20px*2;
}
複製程式碼

4、變數

(1)格式：以@開頭

@headergray: #c0c0c0;
@fullWidth: 1200px;
@logoWidth: 35%;
複製程式碼

(2)字串插值

@name: banner;
background: url("images/@{name}.png") no-repeat;
編譯：
background: url("images/banner.png") no-repeat;
複製程式碼

(3)避免編譯

background: ~"red";
編譯：
background: red;
複製程式碼

(4)移動端rem佈局中的使用

less:
@fullWidth: 750;
@toRem: unit(@fullWidth/10,rem);
header{
height: 150/@toRem;
}
編譯：
header{
height: 2rem;
}
複製程式碼

5、混合

(1)在一個類中繼承另一個類

.class1{ }
.class2{
.class1;
}
複製程式碼

(2)用&替換當前選擇器

a{
color: #000;
&:hover{
color: #f00;
}
}
複製程式碼

(3)在父類中巢狀子類

.class1{
p{
span{
a{ }
}
&:hover{}
}
div{}
}
複製程式碼

(4)帶參混合

.color(@color=red){
color: @color;
}
.class1{
.color(#0f0);
}
.class2{
.color();
}
複製程式碼

6、函式

(1)邏輯控制

格式：statement when(conditons)、prop: if((conditions),value);

例子1：在less中使用一個帶參類名展示上下左右四個方向的純CSS三角形

.triangle(@val) when(@val=left){
width: 0;
height: 0;
border-left: none;
border-right: 20px solid #f00;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.triangle(@val) when(@val=right){
width: 0;
height: 0;
border-right: none;
border-left: 20px solid #f00;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.triangle(@val) when(@val=top){
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: none;
border-bottom: 20px solid #f00;
}
.triangle(@val) when(@val=bottom){
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
border-bottom: none;
}
.div1{
.triangle(left);
}
.div2{
.triangle(right);
}
.div3{
.triangle(top);
}
.div4{
.triangle(bottom);
}
複製程式碼

例子2：

background: if((true), #f00);
複製程式碼

(2)迴圈

例子：將8個td的背景依次更換為bg_1.png、bg_2.png、…、bg_8.png

table td{
width: 200px;
height: 200px;
.loop(@i) when(@i<9){
&:nth-child(@{i}){
background: url(~"../images/partner_@{i}.png") no-repeat;
}
.loop(@i+1);
}
.loop(1);
}
複製程式碼

(3)列表

@backgroundlist: apple, pear, coconut, orange;
複製程式碼

(4)less函式庫

image-size(“bg.png”)獲取圖片的Width和Height
image-width()獲取圖片的Width和Height
image-height()獲取圖片的Width和Height
convert(9s, ms)轉換9秒為毫秒
convert(14cm, mm)轉換14釐米為毫米
複製程式碼

更多函式參考官方函式庫，包括混合函式、數學函式、字串函式、列表函式等等

7、使用JS表示式

less中還可以引用js表示式，不過一般都不推薦使用，此種方式在使用nodejs將less編譯css時可能會報錯。

格式：`javascript`

例子：將高度設定為當前獲取到的瀏覽器的高度

@fullHeight: unit(` window.screen.height `, px);
div{
height: @fullHeight;
}
複製程式碼

嘗試將@width: unit(` window.screen.width `, px)引進vw佈局？

不推薦，不建議less在正式環境中使用，使用LESS時需要在頭部引入js，而在js執行時的時候，會消耗時間，而less編譯需要在js執行後，會在一定程度上影響到效能。

碼字不易，後面還會放出各種文章，喜歡的關注一下我吖，你們的關注是我最大的動力

github：github.com/hn-failte

個人部落格：hn-failte.github.io

部落格園：cnblogs.com/failte