less的基本用法

Less也是一種動態樣式語言. 對CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. Less 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可在服務端運行 (借助 Node.js)。

使用方式

兩種使用方式：第一種全局安裝less，利用命令編譯less;第二種直接引入less.js.

npm安裝

npm install -g less 
npm install -g less-plugin-clean-css 

命令行

lessc styles.less styles.css  // 編譯成css
lessc --clean-css styles.less styles.min.css  // 編譯壓縮css

引入less.js

這里注意要在less.js引入前引入.less樣式文件

<link rel="stylesheet/less" href="style.less">
<script src="less.min.js"></script>

使用

變量

1. 值變量

less 的變量聲明是以@開頭

/* less */
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

2. 選擇器變量

選擇器也可使用變量,變量需要用@{}包括

@mySelector: .wrap;
@{mySelector}{ //變量名 必須使用大括號包裹
  color: #999;
  width: 50%;
}

3. 屬性變量

屬性名稱使用變量

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

4. url變量

@images: "../img";//需要加引號
body {
  background: url("@{images}/dog.png");//變量名 必須使用大括號包裹
}

5. 聲明變量

類似於mixins,用於引入公共代碼塊

• 結構: @name: { 屬性: 值 ;};
• 使用：@name();

// less
@background: {background:red;};
#main{
    @background();
}

// css
#main{
  background:red;
}

6. 變量作用域

less 中變量的作用域是采用就近原則

/* Less */
@var: @a;
@a: 100%;
#wrap {
  width: @var;
  @a: 9%;
}
@a: 8%;

/* 生成的 CSS */
#wrap {
  width: 9%;
}

Mixins

可以直接引入定義好的類的樣式直接混入到當前

1. 無參混入

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;  // 等價於.bordered()
}

2. 默認參數方法

• Less 可以使用默認參數，如果 沒有傳參數，那么將使用默認參數。
• @arguments 猶如 JS 中的 arguments 指代的是 全部參數。
• 傳的參數中 必須帶着單位。

.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:solid 1px @color;
    box-shadow: @arguments;//指代的是 全部參數
}
#main{
    .border(0px,5px,30px,red);//必須帶着單位
}

條件語句when

Less 沒有 if else，它有 when用於做條件判斷

/* Less */
#card{
    
    // and 運算符 ，相當於 與運算 &&，必須條件全部符合才會執行
    .border(@width,@color,@style) when (@width>100px) and(@color=#999){
        border:@style @color @width;
    }

    // not 運算符，相當於 非運算 !，條件為 不符合才會執行
    .background(@color) when not (@color>=#222){
        background:@color;
    }

    // , 逗號分隔符：相當於 或運算 ||，只要有一個符合條件就會執行
    .font(@size:20px) when (@size>50px) , (@size<100px){
        font-size: @size;
    }
}
#main{
    #card>.border(200px,#999,solid);
    #card .background(#111);
    #card > .font(40px);
}
/* 生成后的 CSS */
#main{
  border:solid #999 200px;
  background:#111;
  font-size:40px;
}

嵌套

less 支持嵌套寫法

1. 基本層級嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

2. 父選擇&符

a {
  color: blue;
  &:hover {
    color: green;
  }
}

3. 嵌套指令冒泡

// less
.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
}

/* css */
@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}

運算符

@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

繼承

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

1. extend 關鍵字的使用

/* Less */
.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/*  CSS */
.animation,#main{
  transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}

2. all 全局搜索替換

使用選擇器匹配到的 全部聲明

/* Less */
#main{
  width: 200px;
}
#main {
  &:after {
    content:"Less is good!";
  }
}
#wrap:extend(#main all) {}

/*  CSS */
#main,#wrap{
  width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}

導入

1. 導入 less 文件 可省略后綴

import "main"; 
//等價於
import "main.less";

2. @import 的位置可隨意放置

#main{
  font-size:15px;
}
@import "style";

3. reference

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

/* Less */
@import (reference) "bootstrap.less"; 

#wrap:extend(.navbar all){}

函數

less 提供多種函數可以使用

1. 判斷類型

isnumber(#ff0);     // 判斷給定的值 是否 是一個數字
iscolor(#ccc)      //判斷給定的值 是否 是一個顏色
isurl("")         // 判斷給定的值 是否 是一個 url

2. 顏色操作

rgb(90, 129, 32)   //  #5a8120
mix(#ff0000, #0000ff, 50%)   // #800080
hsl(90, 100%, 50%)   // #80ff00 
argb(rgba(90, 23, 148, 0.5)) // #805a1794
darken(hsl(90, 80%, 50%), 20%)  // #4d8a0f

3. 數學函數

ceil(2.4)  // 3  
floor(2.6)  // 2
percentage(0.5) // 50%
round(1.67, 1) // 1.7
sqrt(25cm)   // 5cm
abs(-18.6%)  // 18.6%

其他

注釋

/* */ CSS原生注釋，會被編譯在 CSS 文件中。
/   / Less提供的一種注釋，不會被編譯在 CSS 文件中

避免編譯

使用 ~' 值 ' 結構可以避免被編譯

• 結構： ~' 值 '

/* Less */
#main{
  width:~'calc(300px-30px)';
}

/*  CSS */
#main{
  width:calc(300px-30px);
}

變量拼串

在平時工作中，這種需求 太常見了。 在下面例子中， 實現了不同的 transtion-delay、animation、@keyframes

• 結構： ~"字符@{變量}字符";

.judge(@i) when(@i=1){
  @size:15px;
}
.judge(@i) when(@i>1){
  @size:16px;
}
.loopAnimation(@i) when (@i<16) {
  
  .circle:nth-child(@{i}){
      .judeg(@i);
      border-radius:@size @size 0 0;
      animation: ~"circle-@{i}" @duration infinite @ease;
      transition-delay:~"@{i}ms";
  }
  @keyframes ~"circle-@{i}" {
      // do something...
  }
  .loopAnimation(@i + 1);
}

使用 JS

因為 Less 是由 JS 編寫，所以 Less 有一得天獨厚的特性：代碼中使用 Javascript

/* Less */
@content:`"aaa".toUpperCase()`;
#randomColor{
  @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";
}
#wrap{
  width: ~"`Math.round(Math.random() * 100)`px";
  &:after{
      content:@content;
  }
  height: ~"`window.innerHeight`px";
  alert:~"`alert(1)`";
  #randomColor();
  background-color: @randomColor;
}
/* 生成后的 CSS */

// 彈出 1
#wrap{
  width: 隨機值（0~100）px;
  height: 743px;//由電腦而異
  background: 隨機顏色;
}
#wrap::after{
  content:"AAA";
}

參考： 學習Less-看這篇就夠了