資訊專欄INFORMATION COLUMN
摘要：命名參數(shù)變量函數(shù)循環(huán)合并逗號括號
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%;
}
合并
逗號
.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;
}
括號
.mixin() {
transform+_: scale(2);
}
.myclass {
.mixin();
transform+_: rotate(15deg);
}
output:
.myclass {
transform: scale(2) rotate(15deg);
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/111504.html
摘要：值得慶幸的是，這三款預(yù)處理器語言的語法和語法都差不多。在這一節(jié)中，我們依次來對比一下這三款預(yù)處理器語言各種特性的異同之處，以及使用方法。預(yù)處理器語言支持任何變量例如顏色數(shù)值文本。 一、Sass、LESS和Stylus的語法 每一種語言都有自己一定的語法規(guī)則，CSS預(yù)處理器語言也不例外，在真正使用CSS預(yù)處器語言之前還有一個不可缺少的知識點，就是對語法的理解。值得慶幸的是，這三款CSS預(yù)...
摘要：學習之按鈕篇如我上一篇學習之里面，介紹了的目錄結(jié)構(gòu)，說明了在這個文件里面，定義了主題色，也包括了按鈕的主題色。偽連接，按鈕的樣式顯示為連接的樣式。接下來的安排，自己寫的文章自己也會去實現(xiàn)它，另外關(guān)于的學習也不會停止。 less學習之Bootstrap按鈕篇） 如我上一篇less學習之Bootstrap里面，介紹了Bootstrap的目錄結(jié)構(gòu)，說明了在variables.less這個文件...
摘要：聲明聲明本篇內(nèi)容梳理自以下幾個來源網(wǎng)站的文檔中文網(wǎng)感謝大佬們的分享。這個時候，預(yù)處理器就出現(xiàn)了，其實應(yīng)該是說和這類語言出現(xiàn)了。聲明 本篇內(nè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...
閱讀 1287·2023-04-25 20:31
閱讀 3779·2021-10-14 09:42
閱讀 1562·2021-09-22 16:06
閱讀 2761·2021-09-10 10:50
閱讀 3621·2021-09-07 10:19
閱讀 1865·2019-08-30 15:53
閱讀 1243·2019-08-29 15:13
閱讀 2887·2019-08-29 13:20
