CSS 預處理語言之 less 篇

less

前言

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製作主題、擴充。

安裝

客戶端使用

// 引入 .less 文件，rel 屬性值爲：“stylesheet/less”
<link rel="stylesheet/less" type="text/css" href="index.less">

// 在引入 .less 文件之後，引入 less.js 文件，官網下載或者使用CDN;
<script src="https://cdn.bootcss.com/less.js/3.9.0/less.js" type="text/javascript"></script>

監控模式

​ 是客戶端的一個功能，當改變樣式的時候，客戶端將自動刷新。

​ 使用：只需在URL後面加上'#!watch'，然後刷新頁面就可以了。

服務端使用

// 安裝 （通過 npm）
    > npm install less ( npm install less@latest // 安裝最新穩定版本 )
    
// 使用
    // 在node中調用編譯器
    var less = require("less");
    less.render(".class{color:#184e1}", function(e, css){
        console.log(css);
    })
    // 輸出
    .class {
        color:#184e1;
    }
    
// 在命令行下使用
    > lessc index.less > index.css
    // ( 如何要將編譯後的 CSS 壓縮掉，那麼加一個 -x 參數就可以了.)

詳情請點擊 less 官網 。

語法

1.變量

Less 變量 ：

以 @ 開頭 定義變量

允許我們定義一系列通用樣式，在需要的地方調用。

後期調整全局樣式|主題的時候，只需修改幾行代碼就可以，方便快捷，易於維護。

// less
@boxW:1220px;
.container{
    width : @boxW;
}

// 生成css
.container{
    width : 1220px;
}

屬性變量

// less
@borderStyle: border-style;
@Soild:solid;
#wrap{
    @{borderStyle}: @Soild;//變量名 必須使用大括號包裹
}

// 生成的 CSS
#wrap{
    border-style:solid;
}

使用變量名定義變量

// less
@say:" Hello Less ~";
@var:"say";
.el{
    content: @@var;
}

// 生成css
.el {
  content: " Hello Less ~";
}

[注]：當變量作爲選擇器、屬性、URL變量時，變量名 必須使用大括號包裹

2.混合

Less 混合 ：可以將一個定義好的 style1 引入到另一個 style 中，使後者繼承前者的所有屬性

. 與 # 皆可作爲 方法前綴。

1）.無參調用

定義一些通用的屬性集爲一個class，然後在另一個class中去調用這些屬性

// less
.br2 { border-radius: 2px; } // 這樣定義，.br2 會暴露到 css 中
button{
    width:100px;
    height:50px;
    .br2;  // 等價於 .br2();
}

// 生成css
button {
  width: 100px;
  height: 50px;
  border-radius: 2px;
}

2）.帶參調用

可以像函數一樣定義一個帶參數的屬性集合:

// less
.mt(@mt) { margin-top: @mt; }
.mb(@mb) { margin-bottom: @mb; }
div{
    .mt(10px);
    .mb(20px)
}

// 生成css
div {
  margin-top: 10px;
  margin-bottom: 20px;
}

給參數設置默認值

// less
.mt(@mt:10px) { margin-top: @mt; }
.mb() { margin-bottom: 20px; } // 這樣定義，.mb 不會暴露到 css 中
div{
    .mt;
    .mb;
}

// 生成css
div {
    margin-top: 10px;
    margin-bottom: 20px;
}

[注]：在 Less 中定義的不帶參屬性集合，如果想隱藏這個集合( 即 不讓它暴露到css 中)，但可以在其他地方引用，可以這樣寫：

.mb { margin-bottom: 20px; } 要寫成 .mb() { margin-bottom: 20px; }

@arguments 變量

@arguments 變量 包含了所有傳遞進來的參數

// less
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
}
.el{
    .box-shadow(2px, 5px);
}

// 生成css
.el{
    box-shadow: 2px 5px 1px #000;
}

數量不定的參數

如果你希望你的方法接受數量不定的參數，你可以使用... ，猶如 ES6 的擴展運算符。

// less
.boxShadow(...){
    box-shadow: @arguments;
}
.textShadow(@a,...){
    text-shadow: @arguments;
}
#main{
    .boxShadow(1px,4px,30px,red);
    .textShadow(1px,4px,30px,red);
}

// 生成 CSS
#main{
    box-shadow: 1px 4px 30px red;
    text-shadow: 1px 4px 30px red;
}

循環方法( 遞歸實現 )

// less
.generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
        width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
}
.generate-columns(4);

// 生成 CSS
.column-1 {
    width: 25%;
}
.column-2 {
    width: 50%;
}
.column-3 {
    width: 75%;
}
.column-4 {
    width: 100%;
}

屬性拼接

+_ 代表的是 空格；+ 代表的是 逗號。

// less 
.boxShadow() {
    box-shadow+: inset 0 0 10px #555;
}
.main {
    .boxShadow();
    box-shadow+: 0 0 20px black;
}

// 生成 CSS
.main {
    box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

///////////////////////////////
// less 
.Animation() {
    transform+_: scale(2);
}
.main {
    .Animation();
    transform+_: rotate(15deg);
}

// 生成 CSS
.main {
    transform: scale(2) rotate(15deg);
}

3.嵌套

Less 嵌套 ：我們可以在父選擇器中嵌套子選擇器，實現子繼承父。

優點：減少了代碼量，是結構更加清晰。

// less
.btn-blue { 
    background-color: #118431;color: #fff;
    p{ color:#1184e1; }
    &:hover { background-color: #39a2ed; }
}

// 生成css
.btn-blue {
  background-color: #118431;
  color: #fff;
}
.btn-blue p {
  color: #1184e1;
}
.btn-blue:hover {
  background-color: #39a2ed;
}

& 符號：串聯選擇器時使用，代表的上一層選擇器的名字。

此處例子中：& 直接替換爲 .btn-blue 。

4.運算

Less 提供了加，減，乘，除操作，可以做屬性值和顏色值的運算

// less
@v2-contWidth: 1220px;
@v2-m: 20px;
@v2-col-1:(@v2-contWidth - @v2-m * 11) / 12;
@v2-col-3:@v2-col-1 * 3 + @v2-m * 2;
.v2-col-1 { width: @v2-col-1; }
.v2-col-3 { width: @v2-col-3; }

// 生成css
.v2-col-1 {
  width: 83.33333333px;
}
.v2-col-3 {
  width: 290px;
}

[注]：- 加減法時 以第一個數據的單位爲基準

​ - 乘除法時 注意單位一定要統一

5. 繼承

extend 是 Less 的一個僞類。它可繼承 所匹配聲明中的全部樣式。

// less
.par{
    color:#1184e1;
    .child{color:#333;}
}
.sib{
    &:extend(.par);
}

// 生成css
.par, .sib {
  color: #1184e1;
}
.par .child {
  color: #333;
}

6.Color 函數

引用官網的例子

// return a color which is 10% *lighter* than @color
// 返回比@color輕10％*的顏色
lighten(@color, 10%);     
// return a color which is 10% *darker* than @color
darken(@color, 10%);      

// return a color 10% *more* saturated than @color
// 返回比@color飽和10％*以上的顏色
saturate(@color, 10%);    
// return a color 10% *less* saturated than @color
desaturate(@color, 10%);  

// return a color 10% *less* transparent than @color
// 返回比@color少10％*的顏色*透明
fadein(@color, 10%);      
// return a color 10% *more* transparent than @color
fadeout(@color, 10%);     
// return @color with 50% transparency
// 返回@color，透明度爲50％
fade(@color, 50%);        

// return a color with a 10 degree larger in hue than @color
// 返回顏色比@color大10度的顏色
spin(@color, 10);         
// return a color with a 10 degree smaller hue than @color
spin(@color, -10);        

// return a mix of @color1 and @color2
// 返回@ color1和@ color2的混合
mix(@color1, @color2);    

7.Math 函數

引用官網的例子

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`

// 將一個值轉化爲百分比
percentage(0.5); // returns `50%`

8.匹配| 引導

1）.匹配 (根據值和參數匹配)

只有被匹配的混合纔會被使用。變量可以匹配任意的傳入值，而變量以外的固定值就僅僅匹配與其相等的傳入值。

// 語法
.mixin (@s, @color) { 。。。 }
.class {
  .mixin(@switch, #888);
}

// 讓.mixin根據不同的@switch值而輸出內容
// less
.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) { // 如果匹配的參數 是變量，則將會匹配，如 `@_` 。
  display: block;
}

@switch: light;
.class {
  .mixin(@switch, #888);
}

// 生成css
.class {
  color: #a2a2a2;
  display: block;
}

2）.引導 (根據表達式進行匹配)

when關鍵字用以定義一個導引序列，來實現條件判斷。

導引中可用的全部比較運算有： >、 >=、 =、 =<、 < 。

= 代表的是等於

// less
.posi (@posi, @bdw) when (@posi = 'top') {
  border-top-width:@bdw;
}
.posi (@posi, @bdw) when (@posi = 'bottom') {
  border-bottom-width:@bdw;
}
.line(@posi, @bdw){
    .posi(@posi, @bdw);
}
.v2-line_t_s-e5{
    .line('top', 1px);
}
.v2-line_b_s-e5{
    .line('bottom', 10px);
}

// 生成css
.v2-line_t_s-e5 {
  border-top-width: 1px;
}
.v2-line_b_s-e5 {
  border-bottom-width: 10px;
}

導引序列使用逗號‘,’—分割，當且僅當所有條件都符合時，纔會被視爲匹配成功。

.mixin (@a) when (@a > 10), (@a < -10) { ... }

基於值的類型進行匹配，我們就可以使用is*函式

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }

// 常見的檢測函式：
iscolor
isnumber
isstring
iskeyword
isurl

// 判斷一個值是純數字，還是某個單位量
ispixel
ispercentage
isem

在導引序列中可以使用and關鍵字實現與條件；使用not關鍵字實現或條件

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
.mixin (@b) when not (@b > 0) { ... }

9.命名空間

爲了更好組織CSS或者單純是爲了更好的封裝，將一些變量或者混合模塊打包起來，之後可以重複使用

#bundle {
  .button () {
    border: 1px solid black;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

// #header 的子元素 a 有 .button 的樣式，
// 可以這樣：#header a 中引入 .button
#header a {
  color: orange;
  #bundle > .button;
}
-->
// 等價於
#header a {
  color: orange;
  #bundle;
  .button;
}
<--

// 生成css
#header a {
  color: orange;
  border: 1px solid black;
}
#header a:hover {
  background-color: #ffffff;
}

[注]：

​ 1.父元素不能加 括號。如：#bundle > .button

​ 2.不得單獨使用命名空間的方法。如：.button // 會報錯

10.作用域

LESS 中的作用域跟其他編程語言非常類似，首先會從本地查找變量或者混合模塊，如果沒找到的話會去父級作用域中查找，直到找到爲止.

一句話理解就是：就近原則

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red  
}

11.字符串插值

變量可以用類似ruby和php的方式嵌入到字符串中，像@{name}這樣的結構:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

12.避免編譯

有時候我們需要輸出一些不正確的CSS語法或者使用一些 LESS不認識的專有語法.

要輸出這樣的值我們可以在字符串前加上一個 ~

將要避免編譯的值用 “”包含起來，結構： ~' 值 '

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

// 輸出爲
.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

13. JavaScript 表達式

JavaScript 表達式也可以在.less 文件中使用。

// 可以通過反引號的方式使用
@var: `"hello".toUpperCase() + '!'`;
    --> @var: "HELLO!";

// 可以同時使用字符串插值和避免編譯
@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;
    --> @var: HELLO!;

// 可以訪問JavaScript環境
@height: `document.body.clientHeight`;

// 將一個JavaScript字符串解析成16進制的顏色值, 你可以使用 color 函數
@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

14.其他

reference

// 使用@import (reference)導入外部文件，但不會添加 把導入的文件 編譯到最終輸出中，只引用。
@import (reference) "bs.less";