鍍金池/ 教程/ HTML/ Less混合類型

Less混合作用域

1. Less混合作用域

Less轉(zhuǎn)義

1. Less轉(zhuǎn)義

Less使用擴(kuò)展精確匹配

1. Less使用擴(kuò)展精確匹配

Less URLs

1. Less URLs

Less作用域

1. Less作用域

Less變量名

1. Less變量名

Less命名參數(shù)

1. Less命名參數(shù)

Less導(dǎo)入選項(xiàng)reference關(guān)鍵詞

1. Less導(dǎo)入選項(xiàng)reference關(guān)鍵詞

Less變量插值屬性

1. Less變量插值屬性

Less變量延遲加載

1. Less變量延遲加載

Less合并風(fēng)格及高級混入

1. Less合并風(fēng)格及高級混入

Less模式匹配

1. Less模式匹配

Less !important關(guān)鍵字

1. Less !important關(guān)鍵字

Less教程

1. Less教程

Less守護(hù)命名空間

1. Less守護(hù)命名空間

Less nth表達(dá)式

1. Less nth表達(dá)式

Less經(jīng)典用例

1. Less經(jīng)典用例

Less變量插值

1. Less變量插值

Less擴(kuò)展內(nèi)部規(guī)則集

1. Less擴(kuò)展內(nèi)部規(guī)則集

Less擴(kuò)展附加到選擇器

1. Less擴(kuò)展附加到選擇器

Less缺省變量

1. Less缺省變量

Less函數(shù)

1. Less函數(shù)

Less高級參數(shù)和@rest變量

1. Less高級參數(shù)和@rest變量

Less混合在另一個混合中

1. Less混合在另一個混合中

Less混合類型

1. Less混合類型

Less導(dǎo)入指令

1. Less導(dǎo)入指令

Less @arguments變量

1. Less @arguments變量

Less擴(kuò)展all

1. Less擴(kuò)展all

Less擴(kuò)展

1. Less擴(kuò)展

Less重復(fù)檢測

1. Less重復(fù)檢測

Less導(dǎo)入

1. Less導(dǎo)入

Less選擇器插值擴(kuò)展

1. Less選擇器插值擴(kuò)展

Less運(yùn)算符

1. Less運(yùn)算符

Less Mixins使用多參數(shù)

1. Less Mixins使用多參數(shù)

Less嵌套規(guī)則

1. Less嵌套規(guī)則

Less參數(shù)化混合

1. Less參數(shù)化混合

Less安裝

1. Less安裝

Less命名空間和訪問器

1. Less命名空間和訪問器

Less變量概述

1. Less變量概述

Less混合作為參數(shù)

1. Less混合作為參數(shù)

Less import語句

1. Less import語句

Less在混合類型的選擇器

1. Less在混合類型的選擇器

Less注釋

1. Less注釋

Less作用域及擴(kuò)展@media

1. Less作用域及擴(kuò)展@media

Less選擇器

1. Less選擇器

Less混合命名空間

1. Less混合命名空間

Less不輸出混合類型

1. Less不輸出混合類型

Less Mixin和返回值

1. Less Mixin和返回值

Less變量

1. Less變量

Less擴(kuò)展嵌套選擇器

1. Less擴(kuò)展嵌套選擇器

Less傳遞規(guī)則集到混合

1. Less傳遞規(guī)則集到混合

Less導(dǎo)入選項(xiàng)inline關(guān)鍵詞

1. Less導(dǎo)入選項(xiàng)inline關(guān)鍵詞

Less混合類型

混合類型類似于在編程語言中的功能。混合類型是一組CSS屬性，它允許你使用一個類的屬性到另一個類，包括類名及其屬性。在Less可以聲明混合類型，如CSS樣式同樣的方式聲明使用class和id選擇器。它可以存儲多個值，并且可以在必要時代碼重用。

下表演示了使用 LESS 混合類型詳細(xì)。

S.N.	混合類型的使用和說明
1	無混合類型輸出混合類型可在輸出只需將括號之后消失。
2	選擇器在混合類型混合類型可以包含不僅屬性，它們也可以包含選擇器。
3	命名空間命名空間是用來分組通用名稱的混合類型。
4	保護(hù) 命名空間當(dāng)保護(hù)被施加到命名空間，只有當(dāng)保護(hù)條件返回true，它定義混合類型使用。
5	!important關(guān)鍵字 !important 關(guān)鍵字是用來覆蓋指定的屬性。

示例

下面的例子演示了使用混合類型在 Less 文件：

<html>
<head>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>LESS Mixins</title>
</head>
<body>
<h1>Welcome to Yiibai Yiibai</h1>
<p class="p1">LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
<p class="p2">LESS is a dynamic style sheet language that extends the capability of CSS. </p>
<p class="p3">LESS is cross browser friendly.</p>
</body>
</html>

接下來，創(chuàng)建文件 style.less。

style.less

.p1{
  color:red;
}
.p2{
  background : #64d9c0;
  .p1();
}
.p3{
   background : #DAA520;
  .p1;
}

你可以編譯 style.less 使用下面的命令來生成 style.css文件：

lessc style.less style.css

接著執(zhí)行上面的命令，它會自動創(chuàng)建 style.css 文件，下面的代碼：

style.css

.p1 {
  color: red;
}
.p2 {
  background: #64d9c0;
  color: red;
}
.p3 {
  background: #DAA520;
  color: red;
}

輸出

讓我們來執(zhí)行以下步驟，看看上面的代碼工作：

保存上面的html代碼到extend_syntax.html文件。
在瀏覽器中打開該HTML文件，輸出如下得到顯示。

調(diào)用混合類型時，括號是可選的。在上面的例子，這兩個語句.p1();和.p1; 做的是同樣的事情。

上一篇：Less作用域下一篇：Less import語句