国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

動態的樣式語言less語法詳解之混合屬性

2024-07-11 08:30:17
字體:
來源:轉載
供稿:網友

前面介紹了less的變量和extend語法,今天在研究下混合屬性(Mixin)。混合可以說是less的另一個特征,你可以將通用屬性定義在一塊,然后使用時直接調用此混合屬性。

混合:
  在 LESS 中我們可以定義一些通用的屬性集為一個選擇器,然后在另一個選擇器中去調用這些屬性. 例如:


復制代碼
代碼如下:
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}

編譯后


復制代碼
代碼如下:
.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}

注意:在調用混合時,可以加括號也可以不加括號。下面這個也是對的:


復制代碼
代碼如下:
.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 或者 元素 屬性集都可以以同樣的方式引入.通用選擇器中可以嵌套選擇器。

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


復制代碼
代碼如下:
#outer {
.inner {
color: red;
}
}

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


復制代碼
代碼如下:
.c{
#outer > .inner;
}</p><p>.c{
#outer > .inner();
}</p><p>.c{
#outer.inner;
}</p><p>.c{
#outer.inner();
}

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

關鍵字!important:
  在使用混合屬性后面加上!important關鍵字,則混合中的所有屬性都會加上關鍵字!important。例如:


復制代碼
代碼如下:
.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
}
.unimportant {
.foo(1);
}
.important {
.foo(2) !important;
}
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 榕江县| 金坛市| 营口市| 宁武县| 平果县| 达尔| 博白县| 温宿县| 房产| 南丹县| 天气| 碌曲县| 法库县| 连江县| 富源县| 开阳县| 旅游| 德格县| 新蔡县| 岑溪市| 衡阳县| 汤原县| 大庆市| 阿坝县| 卢龙县| 华宁县| 陕西省| 会宁县| 保山市| 都安| 芜湖县| 太谷县| 石河子市| 汽车| 青铜峡市| 禹州市| 汉中市| 墨脱县| 济阳县| 镇安县| 洛扎县|