less 使用特性-變量

xbynet 發布于2019-08-29 11:13 / 803人閱讀

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-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

output:

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

1.2. URLs

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

1.3. Import Statements

// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

1.4 屬性

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

output:

.widget {
  color: #0ee;
  background-color: #999;
}

2. Mixins

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

output:

button:hover {
  border: 1px solid red;
}

3. 作用域

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

云服務器 GPU云服務器 html使用less 不使用變量 php 使用數組變量 js全局變量無法使用

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

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

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

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

劉東 2019-08-30 15:55 評論0 收藏0
學習Less-看這篇就夠了

摘要：在網上討論看來，與相比于功能更為豐富，但對于學習成本以及適應時間，稍勝一籌，這也是我選擇的原因。如果你也是的使用者，還需要配合進行處理，具體可見我的這篇文章飛行手冊，里面詳細說明了的處理方式。原文鏈接前言 CSS的短板 ????作為前端學習者的我們或多或少都要學些 CSS ，它作為前端開發的三大基石之一，時刻引領著 Web 的發展潮向。而 CSS 作為一門標記性語言，可能給初...

hiyayiji 2019-08-29 13:59 評論0 收藏0
css還可以這么寫？

摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會編譯成可以看到，生成的中并沒有任何的變化，那這個做了什么呢其實在通過引用的對象內發生了變化。作為一個前端，毫無疑問css肯定是最基礎的一項技能之一。css是一個標記語言，沒有編程語言的諸多特性，比如變量定義，復用，嵌套等，所以相應的開發效率也受到限制。在追求效率和自動化的當下...

kidsamong 2019-08-29 16:35 評論0 收藏0
css還可以這么寫？

摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會編譯成可以看到，生成的中并沒有任何的變化，那這個做了什么呢其實在通過引用的對象內發生了變化。作為一個前端，毫無疑問css肯定是最基礎的一項技能之一。css是一個標記語言，沒有編程語言的諸多特性，比如變量定義，復用，嵌套等，所以相應的開發效率也受到限制。在追求效率和自動化的當下...

zhiwei 2019-08-23 11:36 評論0 收藏0
css還可以這么寫？

摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會編譯成可以看到，生成的中并沒有任何的變化，那這個做了什么呢其實在通過引用的對象內發生了變化。作為一個前端，毫無疑問css肯定是最基礎的一項技能之一。css是一個標記語言，沒有編程語言的諸多特性，比如變量定義，復用，嵌套等，所以相應的開發效率也受到限制。在追求效率和自動化的當下...

RaoMeng 2019-08-02 11:22 評論0 收藏0
關于sass、scss、less的概念性知識匯總

摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。也是成熟的預處理器之一，而且有一個穩定，強大的團隊在維護。這篇文章主要解答以下幾個問題，供前端開發者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預處理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 評論0 收藏0