less學習筆記

時間  2019-11-10
標籤 學習 筆記 简体版
原文   原文鏈接

目錄php

  1. 變量　　
    1. (@value)
  2. 混合      
    1. 繼承
    2. 帶參數混合
    3. arguments變量
  3. 嵌套規則
    1. &可嵌套串聯選擇器
  4. 函數&運算
  5. 模式匹配和導引表達式(mixin)  *
    1. 根據傳入參數來改變混合的默認呈現
    2. 根據不一樣@switch值表現各異
  6. 引導表達式(mixin)  *
    1. 根據表達式進行匹配(when關鍵字)
    2. 運算符:  >  >=  =  <=  <  true  
    3. 基於值的類型 is*
    4. 與and, 非not
  7. Color函數
  8. Math函數
    1. round ceil floor percentage
  9. 命名空間
  10. 做用域
  11. 註釋 (/**/ 或 //)
  12. Importing 文件引入
  13. 字符串插值   (@{value})
  14. 避免編譯  ~
  15. JavaScript表達式(反引號)

　　less是一種動態樣式語言,css

　　LESS 將 CSS 賦予了動態語言的特性，如 變量， 繼承，運算， 函數. LESS 既能夠在 客戶端 上運行 (支持IE 6+, Webkit, Firefox)，也能夠藉助Node.js或者Rhino在服務端運行。html

　　我編譯less就是用了一款前端預處理器語言圖形編譯工具----koala, 很是好用前端

 

1. 變量:

　　變量容許咱們單獨定義一系列通用的樣式，而後在須要的時候去調用。因此在作全局樣式調整的時候咱們可能只須要修改幾行代碼就能夠了。web

　　請注意 LESS 中的變量爲徹底的 ‘常量’ ，因此只能定義一次.編程

  // LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

2. 混合:

　　混合能夠將一個定義好的class A輕鬆的引入到另外一個class B中，從而簡單實現class B繼承class A中的全部屬性。咱們還能夠帶參數地調用，就像使用函數同樣。ruby

　　任何 CSS class, id 或者 元素 屬性集均可以以一樣的方式引入.app

// LESS

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

　　帶參數混合less

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  
}

/*---------------------------------*/

/* 還能夠給參數設置默認值*/
.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
/* 則直接能夠 */
#header { .border-radius; }

　　@arguments 變量

　　@arguments包含了全部傳遞進來的參數. 若是你不想單獨處理每個參數的話就能夠像這樣寫:koa

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

　

3. 嵌套規則

　　咱們能夠在一個選擇器中嵌套另外一個選擇器來實現繼承，這樣很大程度減小了代碼量，而且代碼看起來更加的清晰。

　　注意 & 符號的使用—若是你想寫串聯選擇器，而不是寫後代選擇器，就能夠用到&了. 這點對僞類尤爲有用如:hover 和 :focus.

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

4. 函數 & 運算

　　運算提供了加，減，乘，除操做；咱們能夠作屬性值和顏色的運算，這樣就能夠實現屬性值之間的複雜關係。LESS中的函數一一映射了JavaScript代碼，若是你願意的話能夠操做屬性值。

　　任何數字、顏色或者變量均可以參與運算

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

5. 模式匹配和導引表達式(mixin)

　　有些狀況下，咱們想根據傳入的參數來改變混合的默認呈現，好比下面這個例子：

.mixin (@s, @color) { ... }

.class {
  .mixin(@switch, #888);
}

　　若是想讓.mixin根據不一樣的@switch值而表現各異，以下這般設置：

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

　　如今，若是運行:

@switch: light;

.class {
  .mixin(@switch, #888);
}

　　就會獲得下列CSS:

.class {
  color: #a2a2a2;
  display: block;
}

　　如上，.mixin就會獲得傳入顏色的淺色。若是@switch設爲dark，就會獲得深色。

　　具體實現以下：

  • 第一個混合定義並未被匹配，由於它只接受dark作爲首參
  • 第二個混合定義被成功匹配，由於它只接受light
  • 第三個混合定義被成功匹配，由於它接受任意值

　　只有被匹配的混合纔會被使用。變量能夠匹配任意的傳入值，而變量之外的固定值就僅僅匹配與其相等的傳入值。

　　咱們也能夠匹配多個參數：

.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

6. 引導(mixin)

　　當咱們想根據表達式進行匹配，而非根據值和參數匹配時，導引就顯得很是有用。若是你對函數式編程很是熟悉，那麼你極可能已經使用過導引。

　　爲了儘量地保留CSS的可聲明性，LESS經過導引混合而非if/else語句來實現條件判斷，由於前者已在@media query特性中被定義。

　　以此例作爲開始：

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

　　when關鍵字用以定義一個導引序列(此例只有一個導引)。接下來咱們運行下列代碼：

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

　　就會獲得:

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

　　導引中可用的所有比較運算有： > >= = =< <。此外，關鍵字true只表示布爾真值，下面兩個混合是相同的：

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

　　除去關鍵字true之外的值都被視示布爾假：

.class {
  .truth(40); // Will not match any of the above definitions.
}

　　導引序列使用逗號‘,’分割，當且僅當全部條件都符合時，纔會被視爲匹配成功。

.mixin (@a) when (@a > 10), (@a < -10) { ... }

　　導引能夠無參數，也能夠對參數進行比較運算：

 

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

　　最後，若是想基於值的類型進行匹配，咱們就可使用is*函式：

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

　　下面就是常見的檢測函式：

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

　　若是你想判斷一個值是純數字，仍是某個單位量，可使用下列函式：

  • ispixel
  • ispercentage
  • isem

　　最後再補充一點，在導引序列中可使用and關鍵字實現與條件：

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

　　使用not關鍵字實現或條件 

.mixin (@b) when not (@b > 0) { ... }

7. Color函數

　　LESS 提供了一系列的顏色運算函數. 顏色會先被轉化成 HSL 色彩空間, 而後在通道級別操做:

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color　　//飽和
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color　　//透明度
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color //色度,色調
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2);    // return a mix of @color1 and @color2

　　使用:

@base: #f04615;

.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

　　還能夠提取顏色信息:

hue(@color);        // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color);  // returns the 'lightness' channel of @color

　　若是你想在一種顏色的通道上建立另外一種顏色，這些函數就顯得那麼的好用，例如:

@new: hsl(hue(@old), 45%, 90%);　　　　// 將會保持 的 色調, 可是具備不一樣的飽和度和亮度.
@new@old

8. Math函數: 

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
percentage(0.5); // returns `50%`

9. 命名空間

　　有時候，你可能爲了更好組織CSS或者單純是爲了更好的封裝，將一些變量或者混合模塊打包起來, 你能夠像下面這樣在#bundle中定義一些屬性集以後能夠重複使用:

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

　　你只須要在 #header a中像這樣引入 .button:

#header a {
  color: orange;
  #bundle > .button;
}　

10. 做用域

　　LESS 中的做用域跟其餘編程語言很是相似，首先會從本地查找變量或者混合模塊，若是沒找到的話會去父級做用域中查找，直到找到爲止.

@var: red;

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

#footer {
  color: @var; // red  
}

11. 註釋

　　CSS 形式的註釋在 LESS 中是依然保留的. 也支持雙斜線註釋, 可是編譯成CSS的時候自動過濾掉

12. Importing

　　你能夠在main文件中經過下面的形式引入 .less 文件, .less 後綴可帶可不帶:

　　若是你想導入一個CSS文件並且不想LESS對它進行處理，只須要使用.css後綴就能夠:

@import "lib.less";
@import "lib";

@import "lib.css";    //這樣LESS就會跳過它不去處理它.

13. 字符串插值

　　變量能夠用相似ruby和php的方式嵌入到字符串中，像@{name}這樣的結構: 

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

14. 避免編譯

　　有時候咱們須要輸出一些不正確的CSS語法或者使用一些 LESS不認識的專有語法.

　　要輸出這樣的值咱們能夠在字符串前加上一個 ~, 例如:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

　　咱們能夠將要避免編譯的值用 「」包含起來，輸出結果爲:

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

15. JavaScript表達式

　　JavaScript 表達式也能夠在.less 文件中使用. 能夠經過反引號的方式使用:

@var: `"hello".toUpperCase() + '!'`;

　　輸出

@var: "HELLO!";

　　注意你也能夠同時使用字符串插值和避免編譯:

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

　　輸出

@var: HELLO!;

　　它也能夠訪問JavaScript環境:

@height: `document.body.clientHeight`;

　　若是你想將一個JavaScript字符串解析成16進制的顏色值, 你可使用 color 函數:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

　　

 

來源: less

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程