less是一門css預(yù)處理語言柠并，它擴(kuò)充了 CSS 語言岭接，增加了諸如變量、混合（mixin）臼予、函數(shù)等功能鸣戴，讓 CSS 更易維護(hù)、方便制作主題粘拾、擴(kuò)充窄锅。良好的使用可以讓代碼輸入節(jié)省很多時(shí)間
一般less的使用，可以下載一個(gè)叫koala的軟件 百度即可缰雇，安裝時(shí)最好不要有中文路徑入偷，然后在文件下創(chuàng)建一個(gè)Less格式（文件后綴.less）的文件 在koala中添加文件夾后右鍵編譯文件，就會(huì)生成一個(gè)css文件械哟，這樣就可以在less文件中書寫時(shí)疏之，就會(huì)把編譯后的css樣式自動(dòng)寫在css文件里，使用的時(shí)候引用css文件 就可以了暇咆。
下面是less一些常見的用法：
首先了解什么是變量锋爪，變量就是沒有固定的值是可以改變的，在使用時(shí)我們需要給變量取個(gè)名字叫變量名爸业，然后在進(jìn)行聲明
- 變量: 存儲(chǔ)數(shù)據(jù)的容器其骄，數(shù)據(jù)本身可以修改
- 聲明：@變量名稱:變量的值;
less的使用可以有幾種用法
使用
屬性值中：@變量名稱
選擇器名中：@{變量名稱}
屬性名中：@{變量名稱}
在路徑中使用：@{變量名稱} **注意加引號(hào)
在變量值中使用：@變量名稱
在變量名中使用：@變量名稱
@w: 100px;
@b: box;
@bg： background;
#{@b} ｛
width: @w;
height: @w;
@{bj}: red
｝
顯示為
#box ｛
width： 100px;
height： 100px;
background: red;
｝
可以給變量增添運(yùn)算
#｛@b｝1 ｛
width: @w*2;
height: @w*3;
background: red;
｝
顯示為
#box1 ｛
width: 200px;
height: 300px;
background: red;
｝
運(yùn)算的使用
運(yùn)算時(shí)的單位識(shí)別
如果運(yùn)算符的左右兩側(cè)都有單位，
加減乘除識(shí)別的是運(yùn)算符左側(cè)的單位
乘法識(shí)別的是運(yùn)算符右側(cè)的單位
@w: 100rem;
@rem: 64px;
#box {
width: @w/@rem;
width: @w*@rem;
width: @w+@rem;
width: @w-@rem;
}
顯示為
#box {
width: 1.5625rem;
width: 6400px;
width: 164rem;
width: 36rem;
}
*變量名重名之后扯旷，后邊會(huì)覆蓋前邊的
@w2: 100;
@rem2: 64;
#box {
width: @w2+@rem2+px;
}
顯示
#box {
width：164 px年栓；
}
這樣寫在單位和值之間用空格,盡量在變量中添加單位
作用域
寫在{}之間 叫做局部變量，只可以在{}之間起作用
@w: 100px;
.box {
@w: 200px;
width: @w;
}
#box {
width: @w;
}
顯示
.box {
width: 200px;
}
#box {
width: 100px;
}
less中的嵌套
優(yōu)先識(shí)別自己樣式
#box {
@w: 100px;
width: @w*3;
height: 200px;
}
li ｛
@w: 200px;
width: @w;
｝
div {
width：@w;
}
a {
color: red;
&:hover { // &上一級(jí)
color: blue;
}
}
顯示
#box {
width: 300px;
height: 200px;
}
li {
width: 200px;
}
a {
color: red;
}
#box a:hover ｛
color: blue;
｝
混合
添加多個(gè)樣式給一個(gè)變量中去使用
.bor {
background: red;
border: 2px solid #000;
}
//想讓樣式在css中不編譯薄霜，添加一個(gè)（）在名字后 例.bor() {...}
#box {
width: 100px;
height: 100px;
.border
}
.div {
width: 200px;
height: 200px;
.border;
}
顯示
#box {
width: 100px;
height: 100px;
background: red;
border: 2px solid #000;
}
.div {
width: 200px;
height: 200px;
background: red;
border: 2px solid #000;
}
帶參數(shù)的混合
.name(@color) {
border: 1px solid @color;
}
#box {
.name(red)
}
#box2 {
.name(blue)
}
#box3 {
.name(#000)
}
顯示
#box {
border: 1px solid #ff0000;
}
#box2 {
border: 1px solid #0000ff;
}
#box3 {
border: 1px solid #000000;
}
帶多個(gè)參數(shù)的混合
**只要給了@屬性后某抓， 下面的樣式中就必須要添加具體的數(shù)值
.name(@w,@color) {
border: @w solid @color;
}
#box {
.name(1px,red);
}
div {
.name(red);
}
//上面的沒有給@w數(shù)值纸兔，2個(gè)變量只有1個(gè) 就不能顯示，所以是錯(cuò)誤的
#box2 {
.name(2px,blue);
}
#box3 {
.name(@color:#000,@w:3px);
}
顯示
#box {
border: 1px solid #ff0000;
}
#box2 {
border: 2px solid #0000ff;
}
#box3 {
border: 3px solid #000000;
}
添加了參數(shù)默認(rèn)值的混合
.name{@w:1px,@color:red} {
border: @w solid @color;
}
#box {
.name;
}
#box2 {
.name()
}
#box3 {
.name(2px,blue);
}
#box4 {
.name(@w:2px,@color:yellow);
}
.numble(@x,@y) {
@name: ((@x+@y) / 2);
}
div {
.numble（16px,50px）;
padding: @name;
}
結(jié)果
#box {
border: 1px solid #ff0000否副；
}
#box2 {
border: 1px solid #ff0000汉矿；
}
#box3 {
border：2px solid #0000ff；
}
#box4 ｛
border: 2px solid #ffff00备禀；
｝
div {
padding: 33px;
}
這樣Less就可以在多項(xiàng)樣式上添加更加方便
.boxS() {
box-shadow+: 0 0 10px #000;
}
#box {
.boxS;
box-shadow+: inset 0 0 10px red;
}
顯示
#box {
box-shadow: 0 0 10px #000, inset 0 0 10px red;
}
混合中的判斷
給樣式設(shè)置條件洲拇，只有條件成立后才會(huì)識(shí)別其中的樣式
例
.width(@w) when (@w >= 200px)
{
width：@w；
}
#box1 {
.width(100px);
}
#box2 {
.width(200px);
}
#box3 {
.width(300px);
}
在css中顯示
#box2 {
width: 200px;
}
#box3 {
width: 300px;
}
給出不同的條件下的樣式曲尸，根據(jù)條件成立來選取不同的樣式
.name(@w,@c,@dir) when (@dir = 1)
{
border-top: @w solid @c;
}
.name(@w,@c,@dir) when (@dir = 2)
{
border-right: @w solid @c;
}
.name(@w,@c,@dir) when (@dir = 3)
{
border-bottom: @w solid @c;
}
.name(@w,@c,@dir) when (@dir = 4)
{
border-left: @w solid @c;
}
#box {
.name(2px,red,3);
}
結(jié)果
#box {
border-bottom: 2px solid #ff0000;
}
上面設(shè)置不同的變量赋续，當(dāng)滿足變量所要的條件后，就會(huì)執(zhí)行其中的內(nèi)容另患。當(dāng)下面需要變量的樣式時(shí)纽乱，就會(huì)找到所含的變量名稱后，變量有確定數(shù)值的就按照變量走昆箕，沒有確定數(shù)值鸦列，就需要自己設(shè)置，當(dāng)對應(yīng)設(shè)置的數(shù)值滿足上面變量的條件后鹏倘，就會(huì)執(zhí)行
> < = >= <=
.name(@w,@c,@dir) when (判斷條件)
{
//條件成立之后薯嗤，執(zhí)行的內(nèi)容
}
.name(@dir) when (@dir = top)
{
border-top: 10px solid #000;
}
.name(@dir) when (@dir = right)
{
border-right: 10px solid #000;
}
.name(@dir) when (@dir = bottom)
{
border-bottom: 10px solid #000;
}
.name(@dir) when (@dir = left)
{
border-left: 10px solid #000;
}
#box {
.name(left); //找到所有叫 .name()的混合
}
循環(huán)
.name(@numble) when (@numble >= 0)
{
.name(@numble - 10); //函數(shù)調(diào)用
width: @numble; //執(zhí)行語句
}
.box {
.name(100px);
}
結(jié)果
.box {
width: 0px;
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
width: 60px;
width: 70px;
width: 80px;
width: 90px;
width: 100px;
}
從小到大排列 先寫函數(shù)調(diào)用后寫執(zhí)行語句;
函數(shù)調(diào)用，都是上面的執(zhí)行完后才會(huì)往下執(zhí)行纤泵，當(dāng).box給了.name變量的數(shù)值為100px往后執(zhí)行骆姐；
滿足了when >=0,繼續(xù)往下執(zhí)行；
這時(shí).name為100px-10;繼續(xù)往下width: 就為90px了捏题；
這時(shí) .name(@numble - 10);這一條還沒執(zhí)行完玻褪，會(huì)繼續(xù)在條件滿足下運(yùn)行，當(dāng)最后結(jié)果為不小于0后涉馅；
就會(huì)往下執(zhí)行width=0了；
然后繼續(xù)回到上面執(zhí)行之前的結(jié)果黄虱，一直到最后為結(jié)果顯示
從大到小排列 先執(zhí)行語句后寫寫函數(shù)調(diào)用
.name(@numble) when (@numble >= 0)
{
width: @numble; //執(zhí)行語句
.name(@numble - 10);//函數(shù)調(diào)用
}
.box {
.name(100px);
}
結(jié)果
.box {
width: 100px;
width: 90px;
width: 80px;
width: 70px;
width: 60px;
width: 50px;
width: 40px;
width: 30px;
width: 20px;
width: 10px;
width: 0px;
}
當(dāng).box給了最上面.name數(shù)值條件得到滿足稚矿，直接執(zhí)行width: 為100px了；
然后往下執(zhí)行捻浦，-10后 繼續(xù)執(zhí)行width: 90px;...
后面循環(huán) 直到最后結(jié)果小于0的條件晤揣。
