資訊專(zhuān)欄INFORMATION COLUMN
摘要：命名參數(shù)變量函數(shù)循環(huán)合并逗號(hào)括號(hào)
1. Mixins 1.1 Selectors in Mixins
.my-hover-mixin() {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
output:
button:hover {
border: 1px solid red;
}
1.2 The !important keyword
.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
}
.unimportant {
.foo();
}
.important {
.foo() !important;
}
output:
.unimportant {
background: #f5f5f5;
color: #900;
}
.important {
background: #f5f5f5 !important;
color: #900 !important;
}
1.3 Parametric Mixins
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius;
}
1.4 命名參數(shù)
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
output:
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}
1.5 arguments 變量
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block {
.box-shadow(2px; 5px);
}
output:
.big-block {
-webkit-box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
box-shadow: 2px 5px 1px #000;
}
1.6 函數(shù)
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // "call" the mixin
padding: @average; // use its "return" value
}
output:
div {
padding: 33px;
}
循環(huán)
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
output:
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
合并
逗號(hào)
.mixin() {
box-shadow+: inset 0 0 10px #555;
}
.myclass {
.mixin();
box-shadow+: 0 0 20px black;
}
output:
.myclass {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
括號(hào)
.mixin() {
transform+_: scale(2);
}
.myclass {
.mixin();
transform+_: rotate(15deg);
}
output:
.myclass {
transform: scale(2) rotate(15deg);
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111504.html
摘要：值得慶幸的是，這三款預(yù)處理器語(yǔ)言的語(yǔ)法和語(yǔ)法都差不多。在這一節(jié)中，我們依次來(lái)對(duì)比一下這三款預(yù)處理器語(yǔ)言各種特性的異同之處，以及使用方法。預(yù)處理器語(yǔ)言支持任何變量例如顏色數(shù)值文本。 一、Sass、LESS和Stylus的語(yǔ)法 每一種語(yǔ)言都有自己一定的語(yǔ)法規(guī)則，CSS預(yù)處理器語(yǔ)言也不例外，在真正使用CSS預(yù)處器語(yǔ)言之前還有一個(gè)不可缺少的知識(shí)點(diǎn)，就是對(duì)語(yǔ)法的理解。值得慶幸的是，這三款CSS預(yù)...
摘要：學(xué)習(xí)之按鈕篇如我上一篇學(xué)習(xí)之里面，介紹了的目錄結(jié)構(gòu)，說(shuō)明了在這個(gè)文件里面，定義了主題色，也包括了按鈕的主題色。偽連接，按鈕的樣式顯示為連接的樣式。接下來(lái)的安排，自己寫(xiě)的文章自己也會(huì)去實(shí)現(xiàn)它，另外關(guān)于的學(xué)習(xí)也不會(huì)停止。 less學(xué)習(xí)之Bootstrap按鈕篇） 如我上一篇less學(xué)習(xí)之Bootstrap里面，介紹了Bootstrap的目錄結(jié)構(gòu)，說(shuō)明了在variables.less這個(gè)文件...
摘要：聲明聲明本篇內(nèi)容梳理自以下幾個(gè)來(lái)源網(wǎng)站的文檔中文網(wǎng)感謝大佬們的分享。這個(gè)時(shí)候，預(yù)處理器就出現(xiàn)了，其實(shí)應(yīng)該是說(shuō)和這類(lèi)語(yǔ)言出現(xiàn)了。聲明 本篇內(nèi)容梳理自以下幾個(gè)來(lái)源： Github:smyhvae/web Bootstrap網(wǎng)站的 less 文檔 Sass中文網(wǎng) 感謝大佬們的分享。 正文-CSS預(yù)處理（less&Sass） CSS預(yù)處理 什么是 CSS 預(yù)處理？為什么要有 CSS 預(yù)處理？ 這...
1. 變量 @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } output: #header { color: #6c94be; } 1.1. 選擇器 // Variables @my-selector: banner; // Usage .@{my-select...
閱讀 1228·2023-04-25 20:31
閱讀 3734·2021-10-14 09:42
閱讀 1504·2021-09-22 16:06
閱讀 2689·2021-09-10 10:50
閱讀 3541·2021-09-07 10:19
閱讀 1786·2019-08-30 15:53
閱讀 1183·2019-08-29 15:13
閱讀 2830·2019-08-29 13:20
