九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
less學(xué)習(xí)筆記

目錄

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

　　less是一種動態(tài)樣式語言,

　　LESS 將 CSS 賦予了動態(tài)語言的特性，如 變量， 繼承，運算， 函數(shù). LESS 既可以在 客戶端 上運行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服務(wù)端運行。

　　我編譯less就是用了一款前端預(yù)處理器語言圖形編譯工具----koala, 非常好用

 

1. 變量:

　　變量允許我們單獨定義一系列通用的樣式，然后在需要的時候去調(diào)用。所以在做全局樣式調(diào)整的時候我們可能只需要修改幾行代碼就可以了。

　　請注意 LESS 中的變量為完全的 ‘常量’ ，所以只能定義一次.

1
2
3
4
5
6
7
8
9
10
  // LESS
@color: #4D926F;
#header {
  color: @color;
}
h2 {
  color: @color;
}

2. 混合:

　　混合可以將一個定義好的class A輕松的引入到另一個class B中，從而簡單實現(xiàn)class B繼承class A中的所有屬性。我們還可以帶參數(shù)地調(diào)用，就像使用函數(shù)一樣。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// LESS
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

　　帶參數(shù)混合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px); 
}
/*---------------------------------*/

/* 還可以給參數(shù)設(shè)置默認(rèn)值*/
.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
/* 則直接可以 */
#header { .border-radius; }

　　@arguments 變量

　　@arguments包含了所有傳遞進來的參數(shù). 如果你不想單獨處理每一個參數(shù)的話就可以像這樣寫:

1
2
3
4
5
6
.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. 嵌套規(guī)則

　　我們可以在一個選擇器中嵌套另一個選擇器來實現(xiàn)繼承，這樣很大程度減少了代碼量，并且代碼看起來更加的清晰。

　　注意 & 符號的使用—如果你想寫串聯(lián)選擇器，而不是寫后代選擇器，就可以用到&了. 這點對偽類尤其有用如:hover 和 :focus.

1
2
3
4
5
6
7
8
9
10
11
12
13
// LESS
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

4. 函數(shù) & 運算

　　運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現(xiàn)屬性值之間的復(fù)雜關(guān)系。LESS中的函數(shù)一一映射了JavaScript代碼，如果你愿意的話可以操作屬性值。

　　任何數(shù)字、顏色或者變量都可以參與運算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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. 模式匹配和導(dǎo)引表達式(mixin)

　　有些情況下，我們想根據(jù)傳入的參數(shù)來改變混合的默認(rèn)呈現(xiàn)，比如下面這個例子：

1
2
3
4
5
.mixin (@s, @color) { ... }
.class {
  .mixin(@switch, #888);
}

　　如果想讓.mixin根據(jù)不同的@switch值而表現(xiàn)各異，如下這般設(shè)置：

1
2
3
4
5
6
7
8
9
.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

　　現(xiàn)在，如果運行:

1
2
3
4
5
@switch: light;
.class {
  .mixin(@switch, #888);
}

　　就會得到下列CSS:

1
2
3
4
.class {
  color: #a2a2a2;
  display: block;
}

　　如上，.mixin就會得到傳入顏色的淺色。如果@switch設(shè)為dark，就會得到深色。

　　具體實現(xiàn)如下：

  • 第一個混合定義并未被匹配，因為它只接受dark做為首參
  • 第二個混合定義被成功匹配，因為它只接受light
  • 第三個混合定義被成功匹配，因為它接受任意值

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

　　我們也可以匹配多個參數(shù)：

1
2
3
4
5
6
.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

6. 引導(dǎo)(mixin)

　　當(dāng)我們想根據(jù)表達式進行匹配，而非根據(jù)值和參數(shù)匹配時，導(dǎo)引就顯得非常有用。如果你對函數(shù)式編程非常熟悉，那么你很可能已經(jīng)使用過導(dǎo)引。

　　為了盡可能地保留CSS的可聲明性，LESS通過導(dǎo)引混合而非if/else語句來實現(xiàn)條件判斷，因為前者已在@media query特性中被定義。

　　以此例做為開始：

1
2
3
4
5
6
7
8
9
.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) <>50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

　　when關(guān)鍵字用以定義一個導(dǎo)引序列(此例只有一個導(dǎo)引)。接下來我們運行下列代碼：

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

　　就會得到:

1
2
3
4
5
6
7
8
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

　　導(dǎo)引中可用的全部比較運算有： > >= = =<>。此外，關(guān)鍵字true只表示布爾真值，下面兩個混合是相同的：

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

　　除去關(guān)鍵字true以外的值都被視示布爾假：

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

　　導(dǎo)引序列使用逗號‘,’分割，當(dāng)且僅當(dāng)所有條件都符合時，才會被視為匹配成功。

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

　　導(dǎo)引可以無參數(shù)，也可以對參數(shù)進行比較運算：

 

1
2
3
4
5
6
7
@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*函式：

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

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

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

　　如果你想判斷一個值是純數(shù)字，還是某個單位量，可以使用下列函式：

  • ispixel
  • ispercentage
  • isem

　　最后再補充一點，在導(dǎo)引序列中可以使用and關(guān)鍵字實現(xiàn)與條件：

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

　　使用not關(guān)鍵字實現(xiàn)或條件 

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

7. Color函數(shù)

　　LESS 提供了一系列的顏色運算函數(shù). 顏色會先被轉(zhuǎn)化成 HSL 色彩空間, 然后在通道級別操作:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 //色度,色調(diào)
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2);    // return a mix of @color1 and @color2

　　使用:

1
2
3
4
5
6
@base: #f04615;
.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

　　還可以提取顏色信息:

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

　　如果你想在一種顏色的通道上創(chuàng)建另一種顏色，這些函數(shù)就顯得那么的好用，例如:

1
@new: hsl(hue(@old), 45%, 90%);　　　　//code>'variable'>@newcode> 將會保持 code>'variable'>@oldcode>的 色調(diào), 但是具有不同的飽和度和亮度.

8. Math函數(shù): 

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

9. 命名空間

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

1
2
3
4
5
6
7
8
9
10
#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

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

1
2
3
4
#header a {
  color: orange;
  #bundle > .button;
}　

10. 作用域

　　LESS 中的作用域跟其他編程語言非常類似，首先會從本地查找變量或者混合模塊，如果沒找到的話會去父級作用域中查找，直到找到為止.

1
2
3
4
5
6
7
8
9
10
11
12
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#footer {
  color: @var; // red 
}

11. 注釋

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

12. Importing

　　你可以在main文件中通過下面的形式引入 .less 文件, .less 后綴可帶可不帶:

　　如果你想導(dǎo)入一個CSS文件而且不想LESS對它進行處理，只需要使用.css后綴就可以:

1
2
3
4
@import 'lib.less';
@import 'lib';
@import 'lib.css';    //這樣LESS就會跳過它不去處理它.

13. 字符串插值

　　變量可以用類似ruby和php的方式嵌入到字符串中，像@{name}這樣的結(jié)構(gòu): 

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

14. 避免編譯

　　有時候我們需要輸出一些不正確的CSS語法或者使用一些 LESS不認(rèn)識的專有語法.

　　要輸出這樣的值我們可以在字符串前加上一個 ~, 例如:

1
2
3
.class {
  filter: ~'ms:alwaysHasItsOwnSyntax.For.Stuff()';
}

　　我們可以將要避免編譯的值用 “”包含起來，輸出結(jié)果為:

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

15. JavaScript表達式

　　JavaScript 表達式也可以在.less 文件中使用. 可以通過反引號的方式使用:

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

　　輸出

@var: 'HELLO!';

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

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

　　輸出

@var: HELLO!;

　　它也可以訪問JavaScript環(huán)境:

1
@height: `document.body.clientHeight`;

　　如果你想將一個JavaScript字符串解析成16進制的顏色值, 你可以使用 color 函數(shù):

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

　　

 

來源: less

　　

　

　

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
LESS介紹及其與Sass的差異前端觀察 | Resource | 前端觀察
Less介紹及其與Sass的差異
!!!!!為 CSS 增加 編程 特性 詳細(xì)比較三個 CSS 預(yù)處理器（框架）：Sass、LESS 和 Stylus
初步認(rèn)識 LESS
LESS ? 一種動態(tài)樣式語言
bootstrap中l(wèi)ess學(xué)習(xí)
更多類似文章 >>
生活服務(wù)
熱點新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服