CSS預編譯語言-LESS

LESS的作用

CSS層疊樣式表，它是標記語言，不是編程語言；所有的預編譯CSS語言（less/sass…）都是賦予了CSS的面向對象思想

LESS的編譯

LESS叫做預編譯CSS：寫好的LESS代碼瀏覽器是不能渲染的，需要我們把它編譯成為能渲染的CSS才可以

開發環境

在本地開發中這是開發環境 
生產環境 
本地開發完成了，我們需要把代碼上傳到服務器上，服務器上的環境叫做生產環境

在開發環境下，我們一般都通過導入LESS插件（less-2.5.3.min.js）來隨時編譯LESS代碼

<!--rel的值變為了stylesheet/less-->
<linL rel='stylesheet/less' href='css/1.less'>
<script src='js/less-2.5.3.min.js'></script>
 
<!--由於每一次加載頁面，都需要導入less.js，並且把less文件重新編譯為css（很消耗性能，頁面打開速度肯定會變慢），
所以真實項目中，只有開發環境下我們使用這種模式，生產環境下，我們肯定需要事先把寫好的less編譯為正常的css后，
在上線，以后用戶訪問的都是編譯好的css，而不是拿less現編譯-->

生產環境中，我們需要事先把less編譯成為css：
1、使用node編譯

　　1、下載安裝node

　　2、在node全局環境下使用npm包管理器，安裝一個less模塊

　　　　npm install less -g 安裝命令行

　　3、在執行的目錄中執行

　　　　lessc xxx.less xxx.css 把less編譯為css

　　　　lessc xxx.less xxx.min.css -x 不僅編譯成css，而且還把css壓縮了

2、使用編譯工具

LESS中的基礎語法

變量

/*
* 設置變量使用@[變量名]：變量值（傳統css支持的值都可以作為變量值）
* 1、變量名中可以出-
* 在部分減法數學運算的時候，我們需要明確是運算符還是名字中的-
* （@shadow-px）-20
* 2、不是所有的情況下都要使用變量，只有：很多樣式都是使用相同的值，而且以后如果改變的話，所有元素的樣式都要跟着改變，此時我們才用變量存儲起來
*
* LESS中可以支持數學運算
*/
@a:1;
@b:30%;
@c:1000px;
@d:#000;
@shadow-px:100;
.box{
opacity:@a;
filter: alpha(opacity=(@a*100));
}

函數封裝

/*
* 在LESS中只要設置了一個樣式類，我們就可以把它稱之為一個方法，其它地方需要用到這些樣式，直接“.[類名]”調用即可（原理：把當前樣式類中的代碼原封不動的copy一份過去）
* 不加括號即是普通樣式類，也是封裝的一個函數，編譯的時候，這個樣式類中的代碼依然跟着編譯
* 加括號僅僅是封裝的函數，編譯的時候是不編譯函數的
*
* 函數
* .xxx(@xxx:xxx,@xxx){
@arguments
}
*/
 
/*1、*/
.pub(){
width: 100px;
height: 100px;
background: green;
}
 
.box {
.pub();
background: red;
}
 
/*2、*/
.transition(@property:all,@duration,@timing:linear,@delay:0s){
transition:@arguments;
/*transition:@property @duration @timing @delay; */
}
.box{
.transition(all,1s,linear,0s);
transition(@timing:ease,@duration:1s);
}
 
/*3、*/
.sum(@n,@m;0){
@result:@n+@m;
}
.box{
.sum(10,20);
width:unit(@result,px);
/*unit是less提供的方法
* unit（[value],'px'） 給value值設置單位（但是如果之前已經有單位了，此處是把原有單位去掉）
*/
}

命名空間和作用域

@a:10;
.box{
width:unit(@a,px);
@a:20;
.mark{ //=>相當於.box .mark{}
width:unit(@a,px);
}
}
//結果：
.box{
width:20px;
}
.box .mark{
width: 20px;
}
/*less中也有變量提升，而且less把聲明和定義在私有作用域中事先完成了*/

LESS中的extend繼承

.pub{
width: 100px;
height: 100px;
background: red;
}
/*
* LESS中的extend繼承並不是copy代碼，而是讓當前的樣式類和繼承的樣式類公用一套樣式（編譯為群組選擇器的方式）
*/
.box:extend(.pub){
background: green;
}
//或者
.box{
&:extend(.pub);//=>原理是一樣的，也是把它放在.box的末尾
background: green;
}
//結果
.box
.pub{
width: 100px;
height: 100px;
background: red;
}
 
/*真實項目中，如果想使用extend實現繼承，我們一定都把需要繼承的樣式類寫在最外層（而不是里層私有作用域），如果想繼承當前私有作用域的某個樣式類，需要把前綴都准備好*/

LESS中的條件和遞歸

條件

常用的條件運算符：>、>=、<、<=、=； 
設定的條件還可以使用IS函數： 
iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage…

.pub(@x) when(@x<=10){
width: 100px;
height: 200px;
}
.pub(@x) when(@X>10){
width: 200px;
height: 400px;
}
.box{
.pub(20);
background: green;
}
//結果：
.box{
width: 200px;
height: 400px;
background: green;
}

 

遞歸

.columns(@i) when(@i<=4){
.box@{i}{
width:unit(@i*10,%);
}
.columns(@i+1);
}
.columns(1);
//結果：
.box1{
width:10%;
}
.box2{
width:20%;
}
.box3{
width:30%;
}
.box4{
width:40%;
}

LESS中的連接符和import

@import "reset.min.css";
//=>在自己的less中把reset導入進來
@import (reference) "public";
//=>加了reference導入進來使用，但是不編譯里面的代碼
 
.box {
　　.mark { //=> .box .mark
 
　　}
　　//&:在.box后面緊跟着誰
　　&.pp { //=>.box.pp
　　　　background: red;
　　}
　　& > .mm {
　　　　background: green;
　　}
　　&:hover {
　　　　background: orange;
　　}
}

 

讓你快速進行web前端開發的途徑-LESS學習:了解LESS和編譯LESS

http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-07-22/527.html

通過LESS的基礎語法的學習,提高web前端開發的效果

http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-07-22/528.html