Less 教程

前言

CSS的短板

作為前端學(xué)習(xí)者的我們都要學(xué)些 CSS ，它作為前端開發(fā)的三大基石之一，時刻引領(lǐng)著 Web 的發(fā)展潮向。而 CSS 作為一門標(biāo)記性語言，可能給初學(xué)者第一印象就是簡單易懂，毫無邏輯，不像編程該有的樣子。在語法更新時，每當(dāng)新屬性提出，瀏覽器的兼容又會馬上變成絆腳石，可以說 CSS 短板不容忽視。問題的誕生往往伴隨著技術(shù)的興起，在 Web 發(fā)展的這幾年，為了讓 CSS 富有邏輯性，短板不那么嚴(yán)重，涌現(xiàn)出了一些神奇的預(yù)處理語言。它們讓 CSS 徹底變成一門可以使用變量、循環(huán) 、繼承、自定義方法等多種特性的標(biāo)記語言，邏輯性得以大大增強(qiáng)。

預(yù)處理語言：Sass、Less 、Stylus 。

Sass 誕生于 2007 年，Ruby 編寫，其語法功能都十分全面，可以說它完全把 CSS 變成了一門編程語言。另外在國內(nèi)外都很受歡迎，并且它的項目團(tuán)隊很是強(qiáng)大，是一款十分優(yōu)秀的預(yù)處理語言。
Stylus 誕生于 2010 年，來自Node.js 社區(qū)，語法功能也和 Sass 不相伯仲，是一門十分獨特的創(chuàng)新型語言。
Less 誕生于 2009 年，受Sass的影響創(chuàng)建的一個開源項目。它擴(kuò)充了 CSS 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充。

什么是LESS？

Less是一種動態(tài)樣式語言；為提高css應(yīng)用的靈活性和效率，LESS 將 CSS 賦予了動態(tài)語言的特性，如變
量，繼承，運(yùn)算，函數(shù)。LESS 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可以借助
Node.js在服務(wù)端運(yùn)行

LESS是一個CSS預(yù)處理器，可以為網(wǎng)站啟用可自定義，可管理和可重用的樣式表。 LESS是一種動態(tài)樣式表語言，擴(kuò)展了CSS的功能。
CSS預(yù)處理器是一種腳本語言，可擴(kuò)展CSS并將其編譯為常規(guī)CSS語法，以便可以通過Web瀏覽器讀取。它提供諸如變量，函數(shù)， mixins 和操作等功能，可以構(gòu)建動態(tài)CSS。

為什么要使用LESS？

LESS支持創(chuàng)建更清潔，跨瀏覽器友好的CSS更快更容易。
LESS是用JavaScript設(shè)計的，并且創(chuàng)建在 live 中使用，其編譯速度比其他CSS預(yù)處理器更快。
LESS保持你的代碼以模塊化的方式，這是非常重要的，通過使其可讀性和容易改變。
可以通過使用LESS 變量來實現(xiàn)更快的維護(hù)。

優(yōu)點

LESS輕松地生成可在瀏覽器中工作的CSS。
LESS使您能夠使用嵌套編寫更干凈，組織良好的代碼。
通過使用變量可以更快地實現(xiàn)維護(hù)。
LESS使您能夠通過在規(guī)則集中引用它們來輕松地重用整個類。
LESS提供使用操作，使得編碼更快并節(jié)省時間。

缺點

學(xué)習(xí)如果你是新的CSS預(yù)處理需要時間。
由于模塊之間的緊密耦合，應(yīng)當(dāng)采取更多的努力來重用和/或測試依賴模塊。
與舊的預(yù)處理器(例如Sass)相比，LESS具有較少的框架，Sass由框架 Compass ， Gravity和 Susy 組成。

安裝easy less

cfc2893c29154d29a4d238d24636cb05.png

0a844fcba151416db6fd5cc5a394516d.png

0f109d872e404e9bb3e70e173c036061.png

8eaffa2f2b4e4423b485ec0557c56a1a.png

c8ab0cc745da49368124c5ff337cfac3.png

Less 變量

變量作為 Less 的一個強(qiáng)大的功能，它可以讓我們像在其它高級語言中一樣聲明變量，這樣我們將重復(fù)出現(xiàn)的顏色，尺寸，選擇器，字體名稱和 URL 等存儲起來。
LESS允許使用 @ 符號定義變量。變量分配使用冒號(:)完成。
LESS中聲明變量的格式為“@變量名：變量值”。
下表詳細(xì)說明了使用LESS 變量。

使用場景及類型

值變量
選擇器變量
屬性名變量
URL 變量
聲明變量
變量運(yùn)算


// 定義屬性常規(guī)
@color1: red;
.div1 {
  background-color: @color1;
}
.div2 {
  background-color: @color1;
}

// 選擇器名插值
@head: h;
.@{head} {
  font-size: 16px;
}

// 屬性名插值
@my-property: color;
.myclass {
  background-@{my-property}: #81f7d8;
}

// URL插值
@host: 'http://www.waibo.wang/';
h2 {
  color: @color1;
  background: url('@{host}img/bg.png');
}

// import插值
@host: 'http://www.waibo.wang/';
@import '@{host}/reset.less';

Less 繼承

Extend 是 Less 語法中的一個偽類，它可以繼承所匹配的全部樣式。
Extend 是為了解決樣式表中重復(fù)的樣式，這一點與其它語言中的繼承功能相似。
Extend 主要用于復(fù)用重復(fù)的樣式類，可附加在選擇器上或放置到樣式集中。

使用場景及類型

選擇器上使用
單樣式類
多個樣式類
‘a(chǎn)ll’ 關(guān)鍵字
聲明變量
變量運(yùn)算


// 1.常規(guī)
nav {
  &:extend(.line);
  background: blue;
}

.line {
  color: red;
}

// 2.附加在選擇器上使用 <selector>:extend(<extendSelector>) { }
.b {
  color: red;
}

.a:extend(.b) {
  background: blue;
}

// 3.在樣式集中使用
// <selector> {
//  &:extend(<extendSelector>);
// }
.c {
  &:extend(.d);
}

.d {
  color: red;
}

// 4.繼承多個樣式類
.style1 {
  &:extend(.style2,
  .style3);
}

.style2 {
  color: red;
}

.style3 {
  background-color: red;
}

// 5.繼承中的 ‘a(chǎn)ll’ 關(guān)鍵字
.a {
  &:extend(.b all);
}

.b {
  color: red;
  .c {
    background: #8a2be2;
  }
}

總結(jié)

利用重復(fù)代碼
減小CSS代碼體積

混合

“mix-in” 的中文翻譯為 “混合” 。簡而言之，在 Less 中 Mixins 的作用就是，在已有的樣式中添加其他已經(jīng)定義好的屬性集合，從而達(dá)到屬性復(fù)用的效果。

使用場景及類型

選擇器中的樣式
選擇器偽類
多!important 關(guān)鍵字的 Mixins
不輸出 Mixins 源碼
Mixins 命名空間
變量運(yùn)算


// mixin
.a {
  color: red;
}

.mixin {
  .a();
}

// 選擇器的 Mixins
.hover-mixin {
  &:hover {
    border: 1px solid red;
  }
}

button {
  .hover-mixin();
}

// 包含 !important 關(guān)鍵字的 Mixins
.color {
  color: red;
  background: blue;
}

.background {
  .color() !important;
}

// 不輸出 Mixins 源碼 （）區(qū)分
.color-mixin() {
  //加上()
  color: red;
}

.bg {
  .color-mixin();
}

// 命名空間

// .namespace > .bg;
// .namespace > .bg();
// .namespace .bg;
// .namespace .bg();
// .namespace.bg;
// .namespace.bg();
.namesapce {
  .bg() {
    color: red;
  }
}

.content {
  .namesapce > .bg(); //調(diào)用
}


代碼解釋：使用 Mixins 前提是需要先定義一個樣式類（.a），然后在引用的樣式類（.mixin-class）中寫入之前定義的樣式類名稱，并在名稱后加上 “()” 來表示一個 Minxins 。我們可以把 Mixins 當(dāng)作一個樣式的集合，同樣后面需要加上 “;” ，避免造成語法錯誤。

總結(jié)

定義的 Mixins 名稱后面如果不加 “()” ，則會編譯到生成的 css 中，反之則不會。
引用的 Mixins 名稱后的 “()” 可以省略，但是為了避免代碼混淆，建議大家在引用時加上 ‘()’
  .a {
    color: red;
  }

  .b {
    // .a() 或者 .a 都可以
    .a();
  }

  ## 區(qū)別

  本章節(jié)主要介紹了 Mixins 在樣式復(fù)用方面的內(nèi)容，在該功能上與上一個章節(jié)講到的 :extend() 比較類似 ，如果復(fù)用的代碼不用出現(xiàn)在編譯后的代碼中，推薦使用 Mixins 進(jìn)行代碼的復(fù)用，反之使用 :extend() 比較好。

  混合的本質(zhì)是拷貝,只是減少了less文件中的冗余代碼,并沒有減少css文件中的冗余
  繼承的本質(zhì)是并集選擇器,減少了css中的代碼

參數(shù)混合（Parametric Mixins）

含有傳入?yún)?shù)的 Mixins 。

// 設(shè)置默認(rèn)參數(shù)
.circle(@radius: 5px) {
  border-radius: @radius;
}

button {
  .circle();
}

// 多參數(shù)
.primary(@color; @padding; @margin: 2px) {
  color: @color;
  padding: @padding;
  margin-top: @margin;
}

button {
  .primary(#ffffff; 5px);
}

// 參數(shù)順序
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}

.primary {
  .mixin(@margin: 20px; @color: #33acfe);
}

.success {
  // 第一個參數(shù)未填寫參數(shù)名稱，所以代表的是 @color
  // 第二個參數(shù)名稱為 @padding ，所以說 @margin 參數(shù)未傳入會取默認(rèn)值
  .mixin(#efca44; @padding: 40px);
}

// @argument 變量
.box-shadow(@x: 0; @y: 0; @z: 1px; @color: #000) {
  box-shadow: @arguments;
}

button {
  .box-shadow(2px; 5px);
}

// 匹配
.img(@color) {
  bgckground: @color;
}

.img(@color; @padding: 2px) {
  color: @color;
  padding: @padding;
}

div {
  .img(#000);
}

總結(jié)

本章節(jié)主要學(xué)習(xí)了 Mixins 參數(shù)使用的幾種方式，這幾種方式與 ES6 中函數(shù)的參數(shù)思想較為類似，有默認(rèn)參數(shù)、@argument、剩余參數(shù)等，熟練應(yīng)用可以使你的 Mixins 靈活性更強(qiáng)，但是一定要注意兩個同名 Mixins 之間的覆蓋問題，為 Mixins 加上命名空間可以防止類似的問題發(fā)生。

Less 混合函數(shù) Mixins as Functions

Mixins 可以作為一個函數(shù)使用返回參數(shù)或者一個新的 Mixins

Mixins 不僅可以對樣式表進(jìn)行復(fù)用，它也可以看作是一個函數(shù)。

類似于 JS 等編程語言中函數(shù)，它也具有函數(shù)的諸多特征，比如傳入?yún)?shù)、返回參數(shù)等。

比如我們需要聲明一個函數(shù)返回 @width、@height 兩個變量，我們可以這樣定義一個 Mixins 。


// 無參
.return() {
  @width: 80%;
  @height: 20px;
}
.callback {
  .return();
  width: @width;
  height: @height;
}

// 返回參數(shù)
.img(@line, @row) {
  @width: ((@row+ @line) / 2);
}

img {
  .img(20px, 50px); // 引入 mixin
  width: @width; // 使用返回值（@width）
}

// 返回 Mixins
.return-mixins(@color; @size) {
  .mixins() {
    //返回 mixins
    background: @color;
    font-size: @size;
  }
}

.id {
  .return-mixins(red; 28px);
  .mixins(); //引用返回的 mixins
}

總結(jié)

混合函數(shù)返回值時可以處理傳入的參數(shù)，對參數(shù)進(jìn)行一系列復(fù)雜的參數(shù)處理。

混合函數(shù)返回 Mixins 時注意需要先調(diào)用混合函數(shù)，才能調(diào)用返回的 Mixins

樣式導(dǎo)入

通過導(dǎo)入指令引入其他樣式表的內(nèi)容

導(dǎo)出并不需要特殊的語法，但是導(dǎo)入需要我們使用 @import 語法并加上文件名稱。此外導(dǎo)入機(jī)制僅編譯我們用到的代碼，并不會編譯多余的代碼。

類似于原生 CSS 語法的導(dǎo)入指令，在 Less 中我們也是通過 @import 指令引入其他樣式表。

比如引入normal.less文件：


@import './normal.less';

.apple {
  background: yellow;
}

.apple {
  background: palegreen !important;
}
@import './normal.less';

@import './normal';
@import './normal.less';

https://mobile.ant.design/zh/components/button/

小結(jié)

文件導(dǎo)入順序
優(yōu)先級設(shè)置
重名函數(shù)
組件庫樣式重寫

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Less 教程

Less 教程

Less 教程

前言

CSS的短板

預(yù)處理語言：Sass、Less 、Stylus 。

什么是LESS？

為什么要使用LESS？

優(yōu)點

缺點

安裝easy less

Less 變量

使用場景及類型

Less 繼承

使用場景及類型

總結(jié)

混合

使用場景及類型

總結(jié)

參數(shù)混合（Parametric Mixins）

總結(jié)

Less 混合函數(shù) Mixins as Functions

總結(jié)

樣式導(dǎo)入

小結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Less 教程

Less 教程

前言

CSS的短板

預(yù)處理語言：Sass、Less 、Stylus 。

什么是LESS？

為什么要使用LESS？

優(yōu)點

缺點

安裝easy less

Less 變量

使用場景及類型

Less 繼承

使用場景及類型

總結(jié)

混合

使用場景及類型

總結(jié)

參數(shù)混合（Parametric Mixins）

總結(jié)

Less 混合函數(shù) Mixins as Functions

總結(jié)

樣式導(dǎo)入

小結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

預(yù)處理語言：Sass、Less 、Stylus 。

什么是LESS？

為什么要使用LESS？