Less簡明筆記

1. 使用@新建變量

@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);

在css中使用變量:

.link { color: @link-color;}

2. Mixins

首先定義樣式:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

以后可在其他代碼塊中重復使用:

#menu a {
  color: #111;
  .bordered();
}.post a {
  color: red;
  .bordered();
}

3. 嵌套的新寫法

原先的

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}

可以改寫為嵌套寫法:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

4. 對于某一元素的偽選擇器的樣式,也可以使用 ‘&’ 嵌套在該元素的代碼塊中

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容