less

less

---

環境安裝

一、安裝nodejs

在部分win8系統當中沒法安裝：

解決辦法的是 已管理員權限運行cmd而後再按寫命令切換到安裝包目錄，直接命令執行

二、安裝完成nodejs以後

檢測是否安裝完成 node –v 查看版本

而後檢測 npm是否自帶 npm –v 查看版本

三、命令行安裝：npm install –g less

四、Lessc –v 查看版本 是否安裝成功

五、lessc test.less test.css,編譯成css

介紹

官網 http://lesscss.org/

中文網 (http://lesscss.cn/) http://www.1024i.com/demo/less/

本質上，LESS 包含一套自定義的語法及一個解析器，用戶根據這些語法定義本身的樣式規則，這些規則最終會經過解析器，編譯生成對應的 CSS 文件。LESS 並無裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 語法的基礎上，爲 CSS 加入程序式語言的特性。

webstorm中自動編譯：

自動：新建一個less文件，webstorm頂部會有提示是否監聽動態編譯，點擊yes，肯定

手動：設置=》Tools=》File Watchers =》設置選項

file type：less

program：找到node中的lessc.cmd解析器

語法

一、/註釋：在css當中可使用，全部編譯的過程中生成在css文件/ 二、//註釋：css不支持,不會編譯在css文件

三、必須寫好 @charset "UTF-8";在編譯，若是晚了就刪掉css從新編譯

變量

一、必須@前綴，：是等於的意思，必須分號結束；

二、不能以數組開頭，不能包含特殊字符，區分大小寫

三、變量用於字符拼接使用方法

 

 

 

 

 

 

 

 

@mainColor:#e92323;

@className:box;

div{

  background: @mainColor;

}

a:hover{

  color: @mainColor;

}

.@{className}{

  color: @mainColor;

}

 

 

Mixin混入

類混入

 

 

 

xxxxxxxxxx

 

 

 

 

.w50{

  width: 50%;

}

.f_left{

  float: left;

}

.f_right{

  float: right;

}

/*類混入*/

.w50-f_left{

  .w50();

  .f_left();

}

 

 

函數混入

定義函數

函數不會被翻譯成css，調用纔會

 

 

 

xxxxxxxxxx

 

 

 

 

.f_left(){

  float: left;

}

.f_right(){

  float: right;

}

 

 

帶參數的函數及調用

參數能夠有默認值

 

 

 

xxxxxxxxxx

 

 

 

 

.w50(){

  width: 50%;

}

.f(@direction:left){//給參數設置默認值

  float: @direction;

}

.borderRadius(@width:100px){

  border-radius: @width;

  -webkit-border-radius:@width;

  -moz-border-radius:@width;

  -o-border-radius:@width;

  -ms-border-radius:@width;

}

.w50-f_left{

  .w50();//調用函數

  .f(right);//調用函數

  .borderRadius(20px);//調用函數

}

 

 

嵌套

一、後代關係

二、須要鏈接的狀況

 

 

 

xxxxxxxxxx

 

 

 

 

.wjs_app{

  display: block;

  img{

    display: none;

  }

  /*須要鏈接的狀況：&*/

  &:hover{

    img{

      display: block;

      position: absolute;

      left: 50%;

      margin-left:-60px;

      border: 1px solid #ccc;

      border-top: none;

      top:40px;

      z-index: 100000;

    }

  }

  > div{

    display: block;

  }

}

 

 

import導入

已有一個banner.less

 

 

 

xxxxxxxxxx

 

 

 

 

@import "banner";

 

 

運算及函數

 

 

 

xxxxxxxxxx

 

 

 

 

@num:5;

ul{

  width: 100%*@num;

  li{

    width: 100%/@num;//數值計算

    color: red+yellow+blue;//顏色計算

    background: gray*0.3;

    /*內置函數*/

    border-color: darken(red,20%);//內置函數

  }

}

 

 

使用

• 沒法在瀏覽器端直接使用、
• 瀏覽器不識別less
• 必須解析成css代碼
• 經過less解析插件（javascript插件）http://lesscss.cn/#download-options下載less.js
• 要加type屬性
• less.watch()自動更新無需刷新
• 以http形式打開網頁預覽

 

 

內置函數

例子

 

 

 

xxxxxxxxxx

 

 

 

 

@back:#333;

.test{

  border: 1px solid @back*2;

  background: lighten(#000, 10%);

  color:darken(#000, 10%);

}

 

 

escape(@string); // 經過 URL-encoding 編碼字符串

e(@string); // 對字符串轉義

%(@string, values...); // 格式化字符串

unit(@dimension, [@unit: ""]); // 移除或替換屬性值的單位

color(@string); // 將字符串解析爲顏色值

data-uri([mimetype,] url); // * 將資源內嵌到css中，可能回退到url()

ceil(@number); // 向上取整

floor(@number); // 向下取整

percentage(@number); // 將數字轉換爲百分比，例如 0.5 -> 50%

round(number, [places: 0]); // 四捨五入取整

sqrt(number); // * 計算數字的平方根

abs(number); // * 數字的絕對值

sin(number); // * sin函數

asin(number); // * arcsin函數

cos(number); // * cos函數

acos(number); // * arccos函數

tan(number); // * tan函數

atan(number); // * arctan函數

pi(); // * 返回PI

pow(@base, @exponent); // * 返回@base的@exponent次方

mod(number, number); // * 第一個參數對第二個參數取餘

convert(number, units); // * 在數字之間轉換

unit(number, units); // * 不轉換的狀況下替換數字的單位

color(string); // 將字符串或者轉義後的值轉換成顏色

rgb(@r, @g, @b); // 轉換爲顏色值

rgba(@r, @g, @b, @a); // 轉換爲顏色值

argb(@color); // 建立 #AARRGGBB 格式的顏色值

hsl(@hue, @saturation, @lightness); // 建立顏色值

hsla(@hue, @saturation, @lightness, @alpha); // 建立顏色值

hsv(@hue, @saturation, @value); // 建立顏色值

hsva(@hue, @saturation, @value, @alpha); // 建立顏色值

hue(@color); // 從顏色值中提取 hue 值（色相）

saturation(@color); // 從顏色值中提取 saturation 值（飽和度）

lightness(@color); // 從顏色值中提取 'lightness' 值（亮度）

hsvhue(@color); // * 從顏色中提取 hue 值，以HSV色彩空間表示（色相）

hsvsaturation(@color); // * 從顏色中提取 saturation 值，以HSV色彩空間表示（飽和度）

hsvvalue(@color); // * 從顏色中提取 value 值，以HSV色彩空間表示（色調）

red(@color); // 從顏色值中提取 'red' 值（紅色）

green(@color); // 從顏色值中提取 'green' 值（綠色）

blue(@color); // 從顏色值中提取 'blue' 值（藍色）

alpha(@color); // 從顏色值中提取 'alpha' 值（透明度）

luma(@color); // 從顏色值中提取 'luma' 值（亮度的百分比表示法）

saturate(@color, 10%); // 飽和度增長 10%

desaturate(@color, 10%); // 飽和度下降 10%

lighten(@color, 10%); // 亮度增長 10%

darken(@color, 10%); // 亮度下降 10%

fadein(@color, 10%); // 透明度增長 10%

fadeout(@color, 10%); // 透明度下降 10%

fade(@color, 50%); // 設定透明度爲 50%

spin(@color, 10); // 色相值增長 10

mix(@color1, @color2, [@weight: 50%]); // 混合兩種顏色

greyscale(@color); // 徹底移除飽和度，輸出灰色

contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 若是 @color1 的 luma 值 > 43% 輸出 @darkcolor，不然輸出 @lightcolor

multiply(@color1, @color2);

screen(@color1, @color2);

overlay(@color1, @color2);

softlight(@color1, @color2);

hardlight(@color1, @color2);

difference(@color1, @color2);

exclusion(@color1, @color2);

average(@color1, @color2);

negation(@color1, @color2);

iscolor(@colorOrAnything); // 判斷一個值是不是顏色

isnumber(@numberOrAnything); // 判斷一個值是不是數字（可含單位）

isstring(@stringOrAnything); // 判斷一個值是不是字符串

iskeyword(@keywordOrAnything); // 判斷一個值是不是關鍵字

isurl(@urlOrAnything); // 判斷一個值是不是url

ispixel(@pixelOrAnything); // 判斷一個值是不是以px爲單位的數值

ispercentage(@percentageOrAnything); // 判斷一個值是不是百分數

isem(@emOrAnything); // 判斷一個值是不是以em爲單位的數值

isunit(@numberOrAnything, "rem"); // * 判斷一個值是不是指定單位的數值