国产chinesehdxxxx野外,国产av无码专区亚洲av琪琪,播放男人添女人下边视频,成人国产精品一区二区免费看,chinese丰满人妻videos

LESS 模式匹配

2018-01-10 11:55 更新

描述

您可以通過(guò)向其傳遞參數(shù)來(lái)更改mixin的行為。

考慮一個(gè)簡(jiǎn)單的LESS代碼片段：

.mixin(@a; @color) { ... }

.line {
  .mixin(@color-new; #888);
}


您可以使用 @ color-new 的不同值來(lái)使mixin的行為不同，如下面的代碼所示。

.mixin(dark; @color) {
  color: darken(@color, 15%);
}
.mixin(light; @color) {
  color: lighten(@color, 15%);
}

@color-new: dark;

.line {
  .mixin(@color-new; #FF0000);
}


如果將 @ color-new 的值設(shè)置為dark，則它會(huì)以較暗的顏色顯示結(jié)果，因?yàn)閙ixin定義與 dark 作為第一個(gè)參數(shù)匹配。


例子

以下示例演示了在LESS文件中使用模式匹配：

<!doctype html>
<head>
   <title>Pattern Matching</title>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <h2>Example of Pattern Matching</h2>
   <p class="myclass">Welcome to Tutorialspoint...</p>
</body>
</html>


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

style.less

.mixin(dark; @color) {
  color: darken(@color, 15%);
}
.mixin(light; @color) {
  color: lighten(@color, 15%);
}

@color-new: dark;

.myclass {
  .mixin(@color-new; #FF0000);
}


您可以使用以下命令將 style.less 編譯為 style.css ：

lessc style.less style.css


接下來(lái)執(zhí)行上面的命令，它將用下面的代碼自動(dòng)創(chuàng)建 style.css 文件：

style.css

.myclass {
  color: #b30000;
}


輸出

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

  • 將上面的html代碼保存在 pattern-matching.html 文件中。

  • 在瀏覽器中打開(kāi)此HTML文件，將顯示如下輸出。


輸出
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)