1. less是什么？有什么作用？如何使用less？其它CSS與編譯器還有哪些？
- less是一種動(dòng)態(tài)層疊樣式表語言，可以對(duì)css樣式表進(jìn)行預(yù)編譯，使代碼更簡潔，邏輯更明晰，易維護(hù)；
- 可以在客戶端使用less，也可以在服務(wù)器端使用less，客戶端直接引入less.js文件，并將寫好的less文件用<link>標(biāo)簽引入，并啟動(dòng)本地服務(wù)器即可；另外在URL中加入
#!watch可以監(jiān)聽less的變化； - 其他編譯器：Sass/Scss、Stylus，postcss等；
2. 寫出less常見的語法，如變量、嵌套、混合等寫法范例
-
變量
變量允許我們單獨(dú)定義一系列通用的樣式，然后在需要的時(shí)候去調(diào)用：- style.less：
@color: orange;
@px_10: 100px;
body {
background-color: @color;
}
.test {
width: @px_10;
height: @px_10;
color: @color;
background-color: cadetblue;
}
- index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js"></script>
</head>
<body>
<div class="test">test</div>
</body>
</html>
-
效果：
- 混合
混合可以將一個(gè)定義好的class A輕松的引入到另一個(gè)class B中，從而簡單實(shí)現(xiàn)class B繼承class A中的所有屬性。我們還可以帶參數(shù)地調(diào)用，就像使用函數(shù)一樣。- style.less
.rounded-corners (@raidus: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.test {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
可以用arguments簡化：
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
- 嵌套
我們可以在一個(gè)選擇器中嵌套另一個(gè)選擇器來實(shí)現(xiàn)繼承，這樣很大程度減少了代碼量，并且代碼看起來更加的清晰。- style.less
@color1: orange;
@color2: green;
@parent_length: 100px;
@child_length: 50px;
.test {
background: @color1;
width: @parent_length;
height: @parent_length;
.child {
background: @color2;
width: @child_length;
height: @child_length;
}
}
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js"></script>
</head>
<body>
<div class="test">
<div class="child">
child
</div>
</div>
</body>
</html>
-
效果
如果想寫串聯(lián)選擇器，而不是寫后代選擇器，就可以用到&了. 這點(diǎn)對(duì)偽類尤其有用如 :hover 和 :focus
#header { color: black;
.navigation { font-size: 12px }
.logo { width: 300px;
&:hover { text-decoration: none }
}
}
- 函數(shù) & 運(yùn)算
運(yùn)算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運(yùn)算，這樣就可以實(shí)現(xiàn)屬性值之間的復(fù)雜關(guān)系。LESS中的函數(shù)一一映射了JavaScript代碼，可以操作屬性值。- style.less
@the-border: 1px;
@base-color: #333;
@red: #881122;
.test {
width: 100px;
height: 100px;
border-top: @the-border solid @red;
border-left: @the-border * 3 solid @base-color;
border-right: @the-border + 5px solid @base-color + blue;
background: @red + #4d5a23;
}
.child {
width: 50px;
height: 50px;
background: desaturate(@red, 20%);
}
-
效果
- 模式匹配和導(dǎo)引表達(dá)式
- 模式匹配：
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}
現(xiàn)在，如果運(yùn)行:
@switch: light;
.class {
.mixin(@switch, #888);
}
就會(huì)得到下列CSS:
.class {
color: #a2a2a2;
display: block;
}
原因是：
* 第一個(gè)混合定義并未被匹配，因?yàn)樗唤邮躣ark做為首參
* 第二個(gè)混合定義被成功匹配，因?yàn)樗唤邮躭ight
* 第三個(gè)混合定義被成功匹配，因?yàn)樗邮苋我庵?/p>
- 引導(dǎo)
當(dāng)我們想根據(jù)表達(dá)式進(jìn)行匹配，而非根據(jù)值和參數(shù)匹配時(shí)，導(dǎo)引就顯得非常有用。
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
導(dǎo)引序列使用逗號(hào)‘,’分割，當(dāng)且僅當(dāng)所有條件都符合時(shí)，才會(huì)被視為匹配成功。
.mixin (@a) when (@a > 10), (@a < -10) { ... }
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
.mixin (@b) when not (@b > 0) { ... }
如果想基于值的類型進(jìn)行匹配，我們就可以使用is*函式：
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
常見檢測函數(shù)：
* iscolor
* isnumber
* isstring
* iskeyword
* isurl
* ispixel
* ispercentage
* isem
- 字符串插值
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
- 避免編譯
在字符串前加上'~'符號(hào)
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
我們可以將要避免編譯的值用 “”包含起來，輸出結(jié)果為:
.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
- JavaScript 表達(dá)式
JavaScript 表達(dá)式也可以在.less 文件中使用. 可以通過反引號(hào)的方式使用:
@var: `"hello".toUpperCase() + '!'`;
@var: "HELLO!";
- color函數(shù) & Math函數(shù)
3. 什么是postcss？ 有哪些工具
- PostCSS 是一個(gè)使用 JS 插件來轉(zhuǎn)換 CSS 的工具。這些插件可以支持使用變量，混入(mixin)，轉(zhuǎn)換未來的 CSS 語法，內(nèi)聯(lián)圖片等操作。
- PostCss是一個(gè)平臺(tái)，為其插件提供一些API，其真正強(qiáng)大之處在于插件，可謂是“一把CSS開發(fā)的瑞士軍刀”；
- 比較著名的工具就是autoprefixer，添加屬性前綴；cssnext未來語法；precss可以使用Sass函數(shù)等。
本文歸本人和饑人谷所有，如需轉(zhuǎn)載請(qǐng)注明來源，謝謝
