如何理解動態(tài)的樣式語言less語法中混合屬性

這篇文章主要介紹“如何理解動態(tài)的樣式語言less語法中混合屬性”，在日常操作中，相信很多人在如何理解動態(tài)的樣式語言less語法中混合屬性問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何理解動態(tài)的樣式語言less語法中混合屬性”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：國際域名空間、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、新泰網(wǎng)站維護(hù)、網(wǎng)站推廣。

混合：
在 LESS 中我們可以定義一些通用的屬性集為一個選擇器，然后在另一個選擇器中去調(diào)用這些屬性. 例如：

代碼如下:


.a, #b {
 color: red;
}
.mixin-class {
 .a();
}
.mixin-id {
 #b();
}

編譯后

代碼如下:


.a, #b {
 color: red;
}
.mixin-class {
 color: red;
}
.mixin-id {
 color: red;
}

注意：在調(diào)用混合時，可以加括號也可以不加括號。下面這個也是對的：

代碼如下:


.a, #b {
 color: red;
}
.mixin-class {
 .a;
}
.mixin-id {
 #b;
}

如果你只想定義一個混合，則可以再選擇器后面加上括號，如下：

代碼如下:


.my-mixin {
 color: black;
}
.my-other-mixin() {
 background: white;
}
.class {
 .my-mixin;
 .my-other-mixin;
}

編譯后，加括號的.my-other-mixin()不會被編譯。

代碼如下:


.my-mixin {
 color: black;
}
.class {
 color: black;
 background: white;
}

任何 CSS class, id 或者 元素 屬性集都可以以同樣的方式引入.通用選擇器中可以嵌套選擇器。

命名空間：
如果你想混合屬性在一個更復(fù)雜的選擇器,可以疊放多個id或類。如下：

代碼如下:


#outer {
 .inner {
   color: red;
 }
}

如果想使用這個混合屬性，你可以這樣，下面四個都是等價的

代碼如下:


.c{
   #outer > .inner;
}</p> <p>.c{
   #outer > .inner();
}</p> <p>.c{
   #outer.inner;
}</p> <p>.c{
   #outer.inner();
}

你可以將混合屬性定義在一個id的下面，這樣就避免了與其他混合沖突。

關(guān)鍵字!important：
在使用混合屬性后面加上!important關(guān)鍵字，則混合中的所有屬性都會加上關(guān)鍵字!important。例如：

代碼如下:

.foo (@bg: #f5f5f5, @color: #900) {
 background: @bg;
 color: @color;
}
.unimportant {
 .foo(1);
}
.important {
 .foo(2) !important;
}

編譯后

代碼如下:

.unimportant {
 background: #f5f5f5;
 color: #900;
}
.important {
 background: #f5f5f5 !important;
 color: #900 !important;
}

帶參數(shù)的混合：
混合屬性也可以通過括號傳遞參數(shù)，如下：

代碼如下:

.border-radius(@radius) {
 -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
         border-radius: @radius;
}

我們只需要在使用它的時候傳遞一個參數(shù)即可，如下：

代碼如下:

#header {
 .border-radius(4px);
}
.button {
 .border-radius(6px);
}

當(dāng)然我們也可以給參數(shù)一個默認(rèn)值，這樣使用的時候可以傳值也可以不傳值。如下：

代碼如下:

.border-radius(@radius: 5px) {
 -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
         border-radius: @radius;
}

如果我們沒有傳值，則會使用默認(rèn)值5px。

當(dāng)然我們也可以傳遞多個參數(shù)，如下：

代碼如下:

.mixin(@color) {
 color-1: @color;
}
.mixin(@color; @padding:2) {
 color-2: @color;
 padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
 color-3: @color;
 padding-3: @padding;
 margin: @margin @margin @margin @margin;
}
.some .selector div {
 .mixin(#008000);
}

編譯后

代碼如下:

.some .selector div {
 color-1: #008000;
 color-2: #008000;
 padding-2: 2;
}

從編譯的結(jié)果可以看出，less也有函數(shù)重載的特性。當(dāng)我們定義相同混合屬性名，參數(shù)不同，然后.mixin(#008000);調(diào)用，第一和第二混合都能匹配，但是第三個缺少參數(shù)@padding的值，所以不會引用第三個混合屬性。

我們不僅可以傳多個值，還可以指定屬性名傳值，如下：

代碼如下:

.mixin(@color: black; @margin: 10px; @padding: 20px) {
 color: @color;
 margin: @margin;
 padding: @padding;
}
.class1 {
 .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
 .mixin(#efca44; @padding: 40px);
}

關(guān)鍵字@arguments:
@arguments有特殊的含義，類似于js的arguments，他包含了傳遞給混合屬性的所有參數(shù)，如下：

代碼如下:

.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);
}

編譯后

代碼如下:

.big-block {
 -webkit-box-shadow: 2px 5px 1px #000;
    -moz-box-shadow: 2px 5px 1px #000;
         box-shadow: 2px 5px 1px #000;
}

關(guān)鍵字@reset:
與@arguments不同的是@reset包含除指明參數(shù)之外的參數(shù)，例如：

代碼如下:

.mixin(@a; @rest...) {
  // @rest包含了@a之后的參數(shù)
  // @arguments包含了所有參數(shù)
}

模式匹配：
有時候你想讓混合根據(jù)你傳入的參數(shù)做不同的事情，比如：

代碼如下:

.mixin(dark; @color) {
 color: darken(@color, 10%);
}
.mixin(light; @color) {
 color: lighten(@color, 10%);
}
.mixin(@_; @color) {
 display: block;
}
.class {
 .mixin(@switch; #888);
}

對于.class你賦給變量@switch不同的值，不同的混合屬性會被調(diào)用，比如

@switch: light;

編譯后

代碼如下:


.class {
 color: #a2a2a2;
 display: block;
}

作為函數(shù)使用Mixin：
當(dāng)我們把混合當(dāng)做函數(shù)使用時，在調(diào)用函數(shù)之后，函數(shù)中的變量是可以使用的，除非調(diào)用混合屬性的元素自己定義了同樣的變量。比如：

代碼如下:

.mixin() {
 @width:  100%;
 @height: 200px;
}
.caller {
 .mixin();
 width:  @width;
 height: @height;
}

編譯后

代碼如下:

.caller {
 width:  100%;
 height: 200px;
}

使用表達(dá)式：

代碼如下:

.average(@x, @y) {
 @average: ((@x + @y) / 2);
}
div {
 .average(16px, 50px); // "call" the mixin
 padding: @average;    // use its "return" value
}

編譯后

代碼如下:

div {
 padding: 33px;
}

LESS VS SASS

到此，關(guān)于“如何理解動態(tài)的樣式語言less語法中混合屬性”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

本文名稱：如何理解動態(tài)的樣式語言less語法中混合屬性
轉(zhuǎn)載源于：http://muchs.cn/article14/ipiige.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、用戶體驗、虛擬主機(jī)、動態(tài)網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司