LESS從入門到精通

LESS從入門到精通

1、LESS是什麼

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

2、爲何用LESS

SASS/SCSS和Stylus都很強，可是我仍是選擇了LESS，我的喜歡NodeJS，而後stylus空格我又不喜歡，就用了LESS，如今用的也習慣了，下面就給你們介紹一下LESS的一些用法吧。

LESS——像寫javascript同樣書寫css

特色：

• 一、寫樣式更簡單：嵌套
• 二、使用方便：變量、運算、函數
• 三、學習成本低：語法

3、怎麼用LESS

一、安裝使用

1.1 瀏覽器中使用

引用

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

經過以上配置，在訪問頁面時，js會自動編譯less爲css

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 = {
    // 開發環境development，生產模式production
    env: "development", 
    // 異步加載
    async: false, 

    // 在頁面下異步讀取導入
    fileAsync: false, 

    // 觀察模式間隔
    poll: 1000, 

    // 使用函數
    functions: {}, 

    // 行信息輸出comment、mediaQuery、all
    dumpLineNumbers: "all", 

    // 是否調整url爲相對
    relativeUrls: false, 

    // 根路徑
    rootpath: ":/"
};

1.2 使用node編譯後使用

使用此方法須要先安裝node

node下載連接：http://nodejs.cn/download/

安裝了node以後，就能夠正式安裝 less 了

npm install -g less

當less文件寫好後，就能夠使用一下命令進行編譯

lessc index.less index.css

1.3 gulp打包工具

使用此方法須要分別在 全局 與 項目 安裝gulp

//全局
npm install -g gulp

//當前項目
npm install --save-dev gulp

而後在安裝gulp的插件 gulp-less

npm install --save-dev gulp-less

安裝完以後，建立入口文件 gulpfile.js，並寫入:

var origin = './index.less'; //填寫你須要轉化的less文件的路徑
var result = './'; //填寫你轉化後文件存在的目錄路徑
var gulp = require('gulp');
gulp.task('less2css', function(){
    gulp.src(origin)
    .pipe(less())
    .pipe(result);
})

至此，就能夠經過輸入 gulp less2css 命令進行編譯了
可是，每次保存後都要去編譯很麻煩，因而，補充如下代碼

gulp.task('lessc', function(){
    gulp.watch('origin', ['less2css']);
})

如今只須要輸入 gulp lessc 就能夠實現less的觀察者模式了

二、語法

保留CSS的基礎語法，並進行了擴展

@import "reset.css" //less在編譯時不會變更css文件
@import "base" //less導入其餘less文件時能夠省略文件格式
@import url("base.less") //less也能夠使用url形式導入，可是必須有後綴

三、運算

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

例子：header插入了一個padding

@fullWidth: 1200px;
.header{
    width: @fullWidth – 20px * 2;
    padding: 0px 20px*2;
}

四、變量

4.1 格式：以@開頭

@headergray: #c0c0c0;
@fullWidth: 1200px;
@logoWidth: 35%;

4.2 字符串插值

@name: banner;
background: url("images/@{name}.png") no-repeat;

編譯：

background: url("images/banner.png") no-repeat;

4.3 避免編譯

background: ~"red";

編譯：

background: red;

4.4 移動端rem佈局中的使用

@fullWidth: 750;
@toRem: unit(@fullWidth/10,rem);
header{
    height: 150/@toRem;
}

編譯：

header{
    height: 2rem;
}

五、混合

5.1 在一個類中繼承另外一個類

.class1{ }
.class2{
    .class1;
}

5.2 用&替換當前選擇器

a{
    color: #000;
    &:hover{
        color: #f00;
    }
}

5.3 在父類中嵌套子類

.class1{
    p{
        span{
            a{ }
        }
        &:hover{  }
    }
div{  }
}

5.4 帶參混合

.color(@color=red){
    color: @color;
}
.class1{
    .color(#0f0);
}
.class2{
    .color();
}

六、函數

6.1 邏輯控制

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

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

• index.less

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

• index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet/less" href="index.less">
        <script src="../less-1.3.3.min.js"></script>
    </head>

    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
    </body
</html>

例子2：根據條件控制屬性值

background: if( (true), #f00 );

6.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);
}

6.3 列表

@backgroundlist: apple, pear, coconut, orange;

6.4 less函數庫

image-size(「bg.png」) //獲取圖片的Width和Height
image-width() //獲取圖片的Width和Height
image-height() //獲取圖片的Width和Height
convert(9s, ms) //轉換9秒爲毫秒
convert(14cm, mm) //轉換14釐米爲毫米

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

七、使用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執行後，會在必定程度上影響到性能。