關於Less裡的css一些規則，瞭解入門less
阿新 • • 發佈：2019-01-27
3、在引入less.js前先要把樣式檔案引入 :
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
4、混合：混合可以將一個定義好的class A輕鬆的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶引數地呼叫，就像使用函式一樣。
// LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/* 生成的 CSS */
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
5、巢狀規則：我們可以在一個選擇器中巢狀另一個選擇器來實現繼承，這樣很大程度減少了程式碼量，並且程式碼看起來更加的清晰。
// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/* 生成的 CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
6、函式 & 運算
運算提供了加，減，乘，除操作；可以做屬性值和顏色的運算，
這樣就可以實現屬性值之間的複雜關係。LESS中的函式一一映射了JavaScript程式碼，可以操作屬性值。
// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
/* 生成的 CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
7.在客戶端使用
引入你的 .less 樣式檔案的時候要設定 rel 屬性值為 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
然後點選頁面頂部download按鈕下載 less.js, 在<head> 中引入:
<script src="less.js" type="text/javascript"></script>
注意你的less樣式檔案一定要在引入less.js前先引入。
備註：請在伺服器環境下使用！本地直接開啟可能會報錯！
監視模式
監視模式是客戶端的一個功能，這個功能允許你當你改變樣式的時候，客戶端將自動重新整理。
要使用它，只要在URL後面加上'#!watch'，然後重新整理頁面就可以了。另外，也可以通過在終端執行less.watch()來啟動監視模式。
8、用變數名定義為變數
@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
輸出：
content: "I am fnord.";
9 定義不帶引數屬性集合,如果你想隱藏這個屬性集合，
不讓它暴露到CSS中去，但是你還想在其他的屬性集合中引用，
你會發現這個方法非常的好用:
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
輸出:
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
10 @arguments 變數包含了所有傳遞進來的引數. 如果你不想單獨處理每一個引數的話就可以像這樣寫:
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
將會輸出:
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
11 模式匹配和導引表示式
有些情況下，我們想根據傳入的引數來改變混合的預設呈現，比如下面這個例子：
.mixin (@s, @color) { ... }
.class {
.mixin(@switch, #888);
}
如果想讓.mixin根據不同的@switch值而表現各異，如下這般設定：
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}
現在，如果執行:
@switch: light;
.class {
.mixin(@switch, #888);
}
就會得到下列CSS:
.class {
color: #a2a2a2;
display: block;
}
如上，.mixin就會得到傳入顏色的淺色。如果@switch設為dark，就會得到深色。
具體實現如下：
第一個混合定義並未被匹配，因為它只接受dark做為首參
第二個混合定義被成功匹配，因為它只接受light
第三個混合定義被成功匹配，因為它接受任意值
只有被匹配的混合才會被使用。變數可以匹配任意的傳入值，而變數以外的固定值就僅僅匹配與其相等的傳入值。
我們也可以匹配多個引數：
.mixin (@a) {
color: @a;
}
.mixin (@a, @b) {
color: fade(@a, @b);
}
Now if we call .mixin with a single argument, we will get the output of the first definition,
but if we call it with two arguments, we will get the second definition, namely @a faded to @b.
引導
當我們想根據表示式進行匹配，而非根據值和引數匹配時，導引就顯得非常有用。如果你對函數語言程式設計非常熟悉，那麼你很可能已經使用過導引。
為了儘可能地保留CSS的可宣告性，LESS通過導引混合而非if/else語句來實現條件判斷，因為前者已在@media query特性中被定義。
以此例做為開始：
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
when關鍵字用以定義一個導引序列(此例只有一個導引)。接下來我們執行下列程式碼：
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
就會得到：
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
導引中可用的全部比較運算有： > >= = =< <。此外，關鍵字true只表示布林真值，下面兩個混合是相同的：
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
除去關鍵字true以外的值都被視示布林假：
.class {
.truth(40); // Will not match any of the above definitions.
}
導引序列使用逗號‘,’—分割，當且僅當所有條件都符合時，才會被視為匹配成功。
.mixin (@a) when (@a > 10), (@a < -10) { ... }
導引可以無引數，也可以對引數進行比較運算：
@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }
最後，如果想基於值的型別進行匹配，我們就可以使用is*函式：
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }
下面就是常見的檢測函式：
iscolor
isnumber
isstring
iskeyword
isurl
如果你想判斷一個值是純數字，還是某個單位量，可以使用下列函式：
ispixel
ispercentage
isem
最後再補充一點，在導引序列中可以使用and關鍵字實現與條件：
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
使用not關鍵字實現或條件
.mixin (@b) when not (@b > 0) { ... }
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
4、混合：混合可以將一個定義好的class A輕鬆的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶引數地呼叫，就像使用函式一樣。
// LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/* 生成的 CSS */
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
5、巢狀規則：我們可以在一個選擇器中巢狀另一個選擇器來實現繼承，這樣很大程度減少了程式碼量，並且程式碼看起來更加的清晰。
// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/* 生成的 CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
6、函式 & 運算
運算提供了加，減，乘，除操作；可以做屬性值和顏色的運算，
這樣就可以實現屬性值之間的複雜關係。LESS中的函式一一映射了JavaScript程式碼，可以操作屬性值。
// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
/* 生成的 CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
7.在客戶端使用
引入你的 .less 樣式檔案的時候要設定 rel 屬性值為 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
然後點選頁面頂部download按鈕下載 less.js, 在<head> 中引入:
<script src="less.js" type="text/javascript"></script>
注意你的less樣式檔案一定要在引入less.js前先引入。
備註：請在伺服器環境下使用！本地直接開啟可能會報錯！
監視模式
監視模式是客戶端的一個功能，這個功能允許你當你改變樣式的時候，客戶端將自動重新整理。
要使用它，只要在URL後面加上'#!watch'，然後重新整理頁面就可以了。另外，也可以通過在終端執行less.watch()來啟動監視模式。
8、用變數名定義為變數
@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
輸出：
content: "I am fnord.";
9 定義不帶引數屬性集合,如果你想隱藏這個屬性集合，
不讓它暴露到CSS中去，但是你還想在其他的屬性集合中引用，
你會發現這個方法非常的好用:
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
輸出:
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
10 @arguments 變數包含了所有傳遞進來的引數. 如果你不想單獨處理每一個引數的話就可以像這樣寫:
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
將會輸出:
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
11 模式匹配和導引表示式
有些情況下，我們想根據傳入的引數來改變混合的預設呈現，比如下面這個例子：
.mixin (@s, @color) { ... }
.class {
.mixin(@switch, #888);
}
如果想讓.mixin根據不同的@switch值而表現各異，如下這般設定：
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}
現在，如果執行:
@switch: light;
.class {
.mixin(@switch, #888);
}
就會得到下列CSS:
.class {
color: #a2a2a2;
display: block;
}
如上，.mixin就會得到傳入顏色的淺色。如果@switch設為dark，就會得到深色。
具體實現如下：
第一個混合定義並未被匹配，因為它只接受dark做為首參
第二個混合定義被成功匹配，因為它只接受light
第三個混合定義被成功匹配，因為它接受任意值
只有被匹配的混合才會被使用。變數可以匹配任意的傳入值，而變數以外的固定值就僅僅匹配與其相等的傳入值。
我們也可以匹配多個引數：
.mixin (@a) {
color: @a;
}
.mixin (@a, @b) {
color: fade(@a, @b);
}
Now if we call .mixin with a single argument, we will get the output of the first definition,
but if we call it with two arguments, we will get the second definition, namely @a faded to @b.
引導
當我們想根據表示式進行匹配，而非根據值和引數匹配時，導引就顯得非常有用。如果你對函數語言程式設計非常熟悉，那麼你很可能已經使用過導引。
為了儘可能地保留CSS的可宣告性，LESS通過導引混合而非if/else語句來實現條件判斷，因為前者已在@media query特性中被定義。
以此例做為開始：
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
when關鍵字用以定義一個導引序列(此例只有一個導引)。接下來我們執行下列程式碼：
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
就會得到：
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
導引中可用的全部比較運算有： > >= = =< <。此外，關鍵字true只表示布林真值，下面兩個混合是相同的：
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
除去關鍵字true以外的值都被視示布林假：
.class {
.truth(40); // Will not match any of the above definitions.
}
導引序列使用逗號‘,’—分割，當且僅當所有條件都符合時，才會被視為匹配成功。
.mixin (@a) when (@a > 10), (@a < -10) { ... }
導引可以無引數，也可以對引數進行比較運算：
@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }
最後，如果想基於值的型別進行匹配，我們就可以使用is*函式：
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }
下面就是常見的檢測函式：
iscolor
isnumber
isstring
iskeyword
isurl
如果你想判斷一個值是純數字，還是某個單位量，可以使用下列函式：
ispixel
ispercentage
isem
最後再補充一點，在導引序列中可以使用and關鍵字實現與條件：
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
使用not關鍵字實現或條件
.mixin (@b) when not (@b > 0) { ... }