国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

less使用特性-Mixins

RyanQ / 3430人閱讀

摘要：命名參數變量函數循環合并逗號括號

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 命名參數 
.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 函數 
.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

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

output:

div {
  padding: 33px;
}
循環 
.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);
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111504.html

相關文章

  • 大話css預編譯處理（三）：基礎語法篇

    摘要：值得慶幸的是，這三款預處理器語言的語法和語法都差不多。在這一節中，我們依次來對比一下這三款預處理器語言各種特性的異同之處，以及使用方法。預處理器語言支持任何變量例如顏色數值文本。 一、Sass、LESS和Stylus的語法 每一種語言都有自己一定的語法規則，CSS預處理器語言也不例外，在真正使用CSS預處器語言之前還有一個不可缺少的知識點，就是對語法的理解。值得慶幸的是，這三款CSS預...

    劉東 評論0 收藏0

  • less學習之Bootstrap（按鈕篇）

    摘要：學習之按鈕篇如我上一篇學習之里面，介紹了的目錄結構，說明了在這個文件里面，定義了主題色，也包括了按鈕的主題色。偽連接，按鈕的樣式顯示為連接的樣式。接下來的安排，自己寫的文章自己也會去實現它，另外關于的學習也不會停止。 less學習之Bootstrap按鈕篇） 如我上一篇less學習之Bootstrap里面，介紹了Bootstrap的目錄結構，說明了在variables.less這個文件...

    sherlock221 評論0 收藏0

  • 前端入門23-CSS預處理器（Less&Sass）

    摘要：聲明聲明本篇內容梳理自以下幾個來源網站的文檔中文網感謝大佬們的分享。這個時候，預處理器就出現了，其實應該是說和這類語言出現了。聲明 本篇內容梳理自以下幾個來源： Github:smyhvae/web Bootstrap網站的 less 文檔 Sass中文網 感謝大佬們的分享。 正文-CSS預處理（less&Sass） CSS預處理 什么是 CSS 預處理？為什么要有 CSS 預處理？ 這...

    freecode 評論0 收藏0

  • less 使用特性-變量

    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...

    xbynet 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<