今天小編給大家分享的是css Less 語言的詳細(xì)介紹，相信大部分人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，話不多說，一起往下看吧。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、廣漢ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的廣漢網(wǎng)站制作公司

 一、什么是Less

  css的Less好比是js的Jquery，可以讓人們更方遍快捷的使用css，使css代碼更簡潔，可以減少重復(fù)的代碼，減少開發(fā)人員的工作量。

Less CSS是一種動(dòng)態(tài)樣式語言，屬于CSS預(yù)處理語言的一種，它使用類似CSS的語法，為CSS賦予了動(dòng)態(tài)語言的特性，如變量、繼承、運(yùn)算、函數(shù)等，更方便CSS的編寫和維護(hù)。

二、編譯工具

1.Koala：國人開發(fā)的LESS/SASS編譯工具

下載地址：

2.Node.js庫

3.瀏覽器端使用

三、koala配置及使用

1.新建后綴為.less文件：index.less

頭部寫上：@charset "utf-8"; 　　//設(shè)定字符集

2.把文件夾拖到koala中，設(shè)置輸出路徑為style下的index.css

  使用koala進(jìn)行編譯，然后就生成了一個(gè)index.css文件。

3.之后我們只要編輯index.less文件即可。

四、注釋

1./*編譯后會(huì)被保留*/

2.//編譯后不會(huì)被保留

五、變量

1.設(shè)定變量：

@text_width: 300px;

2.使用變量：示例如下

.box{
　　width: @text_width;
　　height: @text_width;
　　background: #000;
}

六、混合

1.混合簡介：與原有的在class中新追加class的方法有所不同（原有

使用示例一：

.box{
　　width: @text_width;
　　height: @text_width;
　　background: #000;

.border;
}

.border{

border: 5px solid yellow;

}

使用示例二：新增一個(gè)box2，但是它和box1只有一點(diǎn)點(diǎn)細(xì)微的區(qū)別，可以直接拿來box1使用，然后加上它自己的樣式。

.box2{

.box1;

margin-left: 100px;

}

2.混合是可以帶參數(shù)的

在index.less中使用帶參數(shù)的值，在border_02后面加一個(gè)（），里面聲明一個(gè)變量；

然后傳入?yún)?shù)30px。

在編譯后的index.css文件中，帶參數(shù)的變量不顯示

3.混合也可以帶默認(rèn)值

在border_03后面加一個(gè)（），里面聲明一個(gè)變量，變量后面附一個(gè)初始值“:10px”；

如果不想用默認(rèn)值，只要在text_hunhe下的border_03的()中寫入值即可。

默認(rèn)值必須帶（），不然會(huì)報(bào)錯(cuò)。

4.混合高級(jí)使用示例，兼容性也可以使用

在編譯后的index.css文件中，展示如下

七、匹配模式

1.簡介：相當(dāng)于js中的if，但不完全是

2.示例

先介紹一個(gè)畫倒三角的方法

.sanjiao{
　　width: 0;
　　height: 0;
　　overflow: hidden;
　　border-width: 10px;
　　border-color: red transparent transparent transparent;
　　border-style: solid dashed dashed dashed;
}

匹配模式示例一：

.triangle(top,@w:5px,@c:#ccc){

border-width: @w;

border-color: @c transparent transparent transparent;

border-style: solid dashed dashed dashed;

}

.triangle(right,@w:5px,@c:#ccc){

border-width: @w;

border-color:  transparent @c transparent transparent;

border-style:  dashed solid dashed dashed;

}

.triangle(bottom,@w:5px,@c:#ccc){

border-width: @w;

border-color:  transparent transparent @c transparent;

border-style:  dashed dashed solid dashed;

}

.triangle(left,@w:5px,@c:#ccc){

border-width: @w;

border-color:  transparent transparent transparent @c;

border-style:  dashed dashed dashed solid;

}

.triangle(@_,@w:5px,@c:#ccc){　　　　// @_ 是固定格式，表示不管你匹配到誰，都會(huì)帶上這些內(nèi)容

width: 0;
　　height: 0;
　　overflow: hidden;

}

.sanjiao{

.triangle(right,100px);

}

匹配模式示例二：

匹配模式定位

.pos(r){position:relative;}
.pos(a){position:absolute;}
.pos(f){position:fixed;}
.posi{
　　width: 100px;
　　height: 100px;
　　background: blue;
　　.pos(r);
}

八、運(yùn)算

1.less中的運(yùn)算可以是任何數(shù)字、顏色、變量，運(yùn)算要包裹在括號(hào)中。如：+ - * /

2.示例如下：

@test_01:300px;

.box_02{

width: (@test_01 - 20) * 5; 　　//未強(qiáng)制規(guī)定必須要帶px單位，只要有一個(gè)帶即可

color: #ccc - 10;                      //不太常用到

}

九、嵌套規(guī)則

1.示例

原css　

.list{}
.list li{}
.list a{}
.list span{}

使用Less嵌套：

.list{
　　width: 600px;
　　margin: 30px auto;
　　padding: 0;
　　list-style: none;
　　font-size: 16px;　　　　li{

height: 30px;
　　　　line-height: 30px;
　　　　background: blue;
　　　　margin-bottom: 5px;
　　　　padding: 0 10px;
　　}
　　a{
　　　　float: left;
　　　　color: #000;

&:hover{　　　　//&代表上一層選擇器

color: red;

}
　　}
　　span{
　　　　float: right;
　　}
}

十、arguments變量

.border_arg(@w:30px,@c:#ccc,@xx:solid){border:@arguments}     //省了一點(diǎn)點(diǎn)事兒，懶人必備

.test_arguments{.border_arg(40px);}

十一、避免編譯、!important

1.避免編譯：在我們需要輸入一些不正確的css語法或者使用一些less不認(rèn)識(shí)的專有語法時(shí)使用。在字符串前加上一個(gè)~即可

.test_03{
　　width: ~'calc(300px - 30px)';    //~'...'避免編譯，把單引號(hào)里的內(nèi)容按照原樣傳給瀏覽器
}

2.!important關(guān)鍵字：適合用來調(diào)試，一般不會(huì)用到

.test_important{

.box !important;　　　　//給所有樣式加上!important

}

關(guān)于css Less語言就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果喜歡這篇文章，不如把它分享出去讓更多的人看到。