日韩一道本,中文字幕精品亚洲熟女

了解Less

1. 什么是Less

Less 是一門CSS預(yù)處理語言,它擴充了CSS語言,增加了諸如變量,混合(mixin),函數(shù)等功能,讓CSS更易維護,提高開發(fā)效率 https://less.bootcss.com/

預(yù)處理(不能直接在瀏覽器運行,瀏覽器不識別，需要編譯成CSS文件才能在瀏覽器運行)

2. 安裝Less

在服務(wù)器端最容易的安裝方式就是通過npm(node.js的包管理器)安裝

$ npm install -g less

2.1 驗證less有沒有安裝成功

$ lessc -v   //$表示命令語句

如果打印出了版本號就是安裝成功

3. 編譯

通過命令行編譯less文件,注意: 在編譯之前,一定要有一個less文件

3.1 命令行方式編譯

1. 未指定編譯路徑

$ lessc index.less

編譯完成以后,會在控制臺打印編譯結(jié)果,不會生成任何文件

2 指定編譯路徑

$ lessc index.less index.css

或者

$ lessc index.less > index.css

這樣會在編譯成功后,生成新的index.css文件,編譯的結(jié)果不會打印在控制臺

3. 編譯后將編譯結(jié)果的css文件進行壓縮

需要借助less-plugin-clean-css插件

先安裝插件

$ npm install less-plugin-clean-css -g

使用插件進行壓縮

$ lessc index.less index.css --clean-css

3.2 外部工具的編譯方式

為什么需要使用外部工具的編譯方式呢,因為命令行的編譯方式,沒寫一次less,都需要手動的編譯,就非常耗時間,還不能實時刷新

外邊的工具可以幫我們解決這樣一些問題,通過實時編譯刷新,就會想我們使用css一樣,實時看到開發(fā)效果,

1. 安裝考拉less 客戶端編譯工具

官網(wǎng)下載

使用Koala外部編譯軟件,可以選擇是否壓縮編譯結(jié)果compress,可以選擇是否監(jiān)聽less文件的變化,同時可以自動編譯,還可以生成資源地圖Source Map文件

3.3 使用開發(fā)工具webstorm 編譯

WebStorm 內(nèi)置 File Watchers,

設(shè)置方式:

文件 >> 設(shè)置 >> 工具 >> File Watchers >> 添加選擇less >> 指定輸出目錄

3.4 使用開發(fā)工具vscode編譯

在vscode中通過下載 easy Less插件,來使用less自動編譯功能

less編譯成css：vscode中下載less插件--> 寫好less文件 ---> 保存 -->會自動生成同名的css文件(使用框架開發(fā)不用考慮less編譯為css)

Less的語法

1. 注釋語法

1.1 /**/ (多行注釋)

這種注釋是css的注釋,編譯以后,會保留顯示在css文件中

1.2 // (單行注釋)

// 這種代碼注釋css并不識別,編譯后會影藏,不會顯示在css文件中

/*這種注釋在css中顯示*/
//這個注釋

2. 變量(重點)

在less 中,可以使用變量,來統(tǒng)一設(shè)置一類可以重復(fù)使用的值,方便后期CSS代碼維護

2.1 普通變量的使用

使用@符號定義變量,

語法:

@變量名: 變量值;

注意:變量值一定要符合CSS屬性值的規(guī)范

在CSS選擇器中后面是用變量,如: 屬性的名稱: @變量

// 定義變量
@baseColor: #369;

// 使用變量
.box{
    color: @baseColor;
    border: 1px solid @baseColor;
}

@base-color:red;
div p{
    border:1px solid @base-color;
    padding:10px 20px;
    color:@base-color;
}

2.2 在字符串中使用變量

如果需要變量名和其他字符串拼接,

使用一下語法

"@{變量名}字符串"

@base-img:'./images/222.jpg';//定義圖片變量, 也可以只定義相同路徑部分
div .img{
    width: 300px;
    height: 300px;
    background:url(@base-img) no-repeat 0 0/cover;//寫法一
    // background:url('@{base-img}') no-repeat 0 0/cover;//寫法二
}

2.3 選擇器使用變量

語法

@{變量名}{

}

html部分

<div id='wrap'>大家好，辛苦啦</div>

less部分

@select:#wrap;
@{select}{  //注意加上{}這里是變量，不加{}就是選擇器，沒有select這個選擇器
    color:red;
    font-size:30px;
}

2.4 屬性變量

語法

選擇器{

@{變量沒}: 值

}

//html部分
 <div>大家好，辛苦啦</div>
//less部分
@base-color:color;
div{  
    @{base-color}:yellow;
    font-size:30px;
}

2.5 導(dǎo)入其他的less

語法

@變量名: 地址;

@import "@{變量名}";

@url: './base.less';
@import '@{url}';

注意,就是將其他的less 引入到自己的less中,最后統(tǒng)一編譯成一個css文件

2.6 變量作用域

每個元素的css樣式的{}都是一個獨立的作用域, 按照js函數(shù)作用于來理解

語法

@color: red;
.wrap{
    color:@color; // .wrap自己作用域內(nèi)沒有color變量,所以用上一級作用域變量的值
}
.box{
    @color: skyblue;//自己作用域內(nèi)定義變量值
    color:@color; // 因為.box自己作用于中有同名變量,就會先用自己作用域內(nèi)變量的值
}

注意變量會被預(yù)解析，先使用后定義也沒關(guān)系，但盡量還是把定義變量放前面。

// 先使用變量
.wrap{
    color:@color; 
}

// 后定義變量
@color: red;

2.7 變量的計算

變量的值可以參與運算

@base-width: 300px;
@base-color:#333;
.box{
    width: @base-width+100;//加減乘除都可以
    height:@base-width;
    background: skyblue;
    border:3px solid @base-color *3;  //顏色值也可以計算
    color:base-color;
}

3. 混合(重點)

Mixins 有點像函數(shù),在定義后,可以通過名稱調(diào)用.(也支持動態(tài)傳參)

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

3.1 什么是Mixins混合

簡單理解就是函數(shù),可以封裝CSS代碼,在別的選擇器中調(diào)用,提高代碼的重用性和可維護性

3.2 定義混入

語法:

1.無參數(shù)混入定義

.混入名 () {

封裝的CSS代碼

}

//定義無參數(shù)的混合
.baseProp() {
    width: 200px;
    height: 50px;
    border: 3px solid red;
}

.box {
    .baseProp();//引用混入，如果混入沒有參數(shù)可以不用加括號
    color: base-color;
}

p {
    .baseProp();//引用混合
    font-size:30px;
}

混合中引入了變量，首先在自己作用域找變量，自己沒有找父級。而不在引用的標簽內(nèi)尋找。

@base-color: red;

.baseProp() {
    width: 200px;
    height: 50px;
    border: 3px solid @base-color; //這的變量@base-color應(yīng)該先在自己找，再在父作用域找。在定義的地方確定作用域
}

.box {
    @base-color: skyblue;
    .baseProp();
}

2.有參數(shù)混入.混入名(@參數(shù): 默認值){

封裝的CSS代碼

}

//混合使用引用作用域中的變量，就要在引用作用域 傳參
@base-color: red;

.baseProp(@base-color,@base-borderWidth:1px) {//參數(shù)后無默認值表示必傳
    width: 200px;
    height: 50px;
    border: 3px solid @base-color; 
}

.box {
    @base-color: skyblue;
    .baseProp(@base-color,);//如果想讓混合使用這個作用域中的變量，就要傳參
}

3.3 調(diào)用混入

語法

選擇器{

混入名(@參數(shù))

}

// 使用混入
@baseColor: #369;
.box p {
  .error(@baseColor, 30px)
}

3.4 如果混入沒有參數(shù)可以不用加括號

.wrapProp(){
    width:200px;
    height:200px;
    border:1px solid red;
}

.wrap{
    .wrapProp() // 加括號 可以執(zhí)行
}
.box{
    background: skyblue;
    .wrapProp;  // 沒有參數(shù)不加括號也可以執(zhí)行
    width:100px;
}

如果mixin需要動態(tài)傳參數(shù), 則必須加括號傳參

.wrapProp(@wi,@height,@color){
    width:@wi;
    height:@height;
    border:1px solid @color;
}

@width:200px;
@height:200px;
@color:red;

.wrap{
    .wrapProp(@width,@height,@color);
}
.box{
    background: skyblue;
    .wrapProp(300px,100px,blue);
    // width:100px;
}

3.5 less可以直接繼承其他選擇器中的樣式

.pp{   //必須單class類名選擇器、或者單id類名選擇器才可以繼承，復(fù)合選擇器不好使
    font-size:30px;
    border:2px solid red;
    padding:10px;
}
.box{
    .pp;//繼承.pp的樣式
    color:pink;
}

混入中還可以寫變量

.pp {
   @width:300px;
   @height:200px;
}

.box {
    .pp; 
    width: @width;//混入中還可以寫變量
    height:@height;
    color: pink;
    border:1px solid red;
    padding:10px;

}

3.6 可以在Mixin中使用選擇器

.pp {
    font-size: 30px;
    border: 2px solid red;
    padding: 10px;
    // &:hover {
    //     color: blue; //混入里的選擇器也可以放這
    // }
}

.box {
    .pp; 
    color: pink;
    &:hover {
        color: blue; //混入里還可以寫選擇器
    }
}

3.7 Mixins的命名空間

說白了就有點類似于js中的作用域的問題

// 混入 的作用域
@base-color:blue;
@base-width:200px;
.pp{
    //局部混入
    .baseProp() {
        width: @base-width;
        padding: 10px 0;
        color: @base-color;
        border: 1px solid @base-color;

        &:hover {
            color: red;
        }
    } 
}
   // 使用混入
.box {
    .pp .baseProp;  //   必須通過先找到.pp 然后在通過.baseProp混入進來       
    font-size: 30px;
}

3.8 Mixin的默認值與不定參

1. 默認值

Less 可以使用默認參數(shù)，如果沒有傳參數(shù)，那么將使用默認參數(shù)。

如果不是默認值, 在沒有傳參的情況下, Mixin參數(shù)沒有值就會出錯,所以實參和形成的個數(shù)必須保持一致

如果希望Mixin可以在更多場合復(fù)用, 可以使用默認值,如果沒有傳參,則使用默認值

#box(@width : 100px, @height : 100px, @color:red) {
    width: @width;
    height: @height;
    background-color: @color;
}

.box{
    #box(50px,50px,pink) ; // 這里使用自己傳遞的參數(shù)
    width:200px;
}

.wrap{
    #box;   // 這里沒有傳值，所以使用默認值
}

2. 不定參：不確定參數(shù)的個數(shù)

// ... 就是@reset 剩余參數(shù), 會將剩余的所有參數(shù)都加到@arguments里 
.boxShadow(...){
          box-shadow: @arguments;  
 }

.box{
    .boxShadow(1px,4px,30px,red);
}

// @arguments是處理第一個實參外的所有實參的集合
.boxShadow(@width,...){
          box-shadow: @arguments;
 }
.box{
    .boxShadow( 50px,1px,4px,30px,red);
}

3.9 Mixins的判斷條件

Less沒有if / else 但是less具有一個when，and，not與“，”語法。

1. when 表示在使用Mixin的時候必須滿足 when后面的條件

#box(@width, @height, @color) when (@width > 100px){ //這里的when是過濾條件
    width: @width;
    height: @height;
    background-color: @color;
}

.box{
    #box(101px,50px,pink)
}

2. 如果有兩個必須同時滿足的條件,使用 and

// 這里必須滿足傳遞的寬度和顏色必須同時同滿足條件才能執(zhí)行Mixin
#box(@width, @height, @color) when (@width > 100px) and (@color = pink){
    width: @width;
    height: @height;
    background-color: @color;
}

.box{
    #box(101px,50px,skyblue)
}

3. 如果需要排除某個條件才能使用Mixin,使用not

// 這里排除顏色為pink ,除了pink顏色值都可以運行Mixin
#box(@width, @height, @color) when  not (@color = pink){
    width: @width;
    height: @height;
    background-color: @color;
}

.box{
    #box(101px,50px,skyblue)
}

4. 如果需要多個條件只要滿足一個就執(zhí)行Mixin,使用逗號,

// 雖然不滿足寬度大于等于100px,但是滿足為了顏色是skyblue 所以Mixin會執(zhí)行
#box(@width, @height, @color) when (@width >= 100px),(@color = skyblue){
    width: @width;
    height: @height;
    background-color: @color;
}

.box{
    #box(50px,50px,skyblue)
}

// 混入 的篩選
.haha(@width, @height, @color) when(@width>100px) {
    //參數(shù)不滿足過濾條件就不生效，混不進去
    width: @width;
    height: @height;
    color: @color;
    border: 2px solid blue;
}
.hh {
    .haha(100px, 100px, red)
}

3.10 Less循環(huán)

Less循環(huán)采用的類似于js的遞歸調(diào)用

.wuwei(@length,@i:1) when (@i  <= @length){
    .item-@{i}{
        width: @i * 50px;
        height:50px;
        border:1px solid red;
    }
    
    // 遞歸調(diào)用的同時,改變循環(huán)變量@i
    .wuwei(@length, (@i+1));
};

.wuwei(6);

3.11 模式匹配

根據(jù)條件進行樣式顯示,類似JS中的switch

有些情況下,我們想根據(jù)傳入的參數(shù)來改變混合的默認呈現(xiàn),

比如

相當于定義一個相同的混合名稱,根據(jù)傳入其他混合名稱的不同,執(zhí)行不同混合分支

但是有一個公共的分支,任何一個分支都會調(diào)用

@_ 表示匹配所有,通常用于定義公共部分

語法:

模式匹配的定義

公共部分

.fun (@_, @color){
  // 任何分支都會執(zhí)行的公共部分
}

.fun( s1,@color){
  // s1 分支獨有代碼
}

模式匹配的使用

h1{

.fun(s2, @color)

}

模式匹配舉例--三角形

html部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
</head>

<body>
  <div id="sjx1"></div>
  <div id="sjx2"></div>
  <div id="sjx3"></div>
  <div id="sjx4"></div>
</body>

</html>

less部分

//模式匹配 --- 三角形
.base-sjx(@_, @width, @color) {
    // 只要使用這個混入就執(zhí)行, 公共的混入
    width: 0;
    height: 0;
    border: @width solid rgba(80, 80, 80, .1);
    margin-bottom: 15px;
}
.base-sjx(t, @width, @color) {
    //頂部三角形
    border-top-color: @color;
}

.base-sjx(r, @width, @color) {
    //右側(cè)三角形
    border-right-color: @color;
}

.base-sjx(b, @width, @color) {
    //底部三角形
    border-bottom-color: @color;
}

.base-sjx(l, @width, @color) {
    //左側(cè)三角形
    border-left-color: @color;
}

#sjx1 {
    .base-sjx(t, 100px, green);
}

#sjx2 {
    .base-sjx(r, 20px, yellow);
}

#sjx3 {
    .base-sjx(b, 100px, red);
}

#sjx4 {
    .base-sjx(l, 30px, skyblue);
}

// Mixins 里除了返回變量,還可以返回Mixins
#box(@color){
    .wrap(){
        width:500px;
        height:100px;
        background:@color;
    }
}

.box{
    #box(red);  // 執(zhí)行第一個Mixin是為了能夠使用里面的Mixin
    .wrap();   // 第二個執(zhí)行Mixin里面的Mixin
}

4. 顏色函數(shù)

CSS預(yù)處理器一般都會內(nèi)置一些顏色處理函數(shù),用來對顏色值進行處理,,例如: 加亮,變暗,顏色梯度等

色彩三要素: 色相(顏色的名稱,) 飽和度(鮮艷程度) 明度(亮度,明暗程度)亮到一定程度就是白色，暗到一定程度就是黑色，好比燈光

語法:

lighten(@color, 10%) 比@color 亮 10% 的顏色 (亮度)

darken(@color, 10%) 比@color 暗 10% 50%以后的都是黑色了

saturate(@color, 10%) 比@color 濃 10% (飽和度)

desaturate(@color, 10%) 比 @color 淡 10%

spin(@color., 10) 色相值增加10 (色相,就是顏色的名稱0--360)

spin(@color, -10) 色相值減少10

mix(@color1, @color2) 混合兩種顏色

sj.jpg

//對已有的顏色增亮、變暗
div{
 color:red;
}
p{
    color:lighten(red,10%)
}
span{
    color:lighten(red,40%)  
}
h1{
    color:lighten(red,42%)   
}

5. 嵌套(重點)

5.1 什么是嵌套

具有層級關(guān)系的CSS樣式,CSS的層級是有HTML的結(jié)構(gòu)決定的

5.2 嵌套的好處:

用在具有后代關(guān)系和父子關(guān)系的選擇器中
減少代碼量,
代碼結(jié)構(gòu)更加清晰

5.3 使用

語法:

父選擇器{

父屬性樣式

子選擇器A{

子選擇器A的樣式

}
html 部分

<body>
  <div class="box">
   文字文字
      <span>行內(nèi)</span>
      <p>pppp</p> 
  </div>
  <div>外面</div>
</body>

less部分

.box {
    font-size: 30px;
    border: 1px solid pink;

    span {
        display: inline-block;
        color: red;
        font-weight: bold;
    }

    p {
        color: blue;
        font-weight: bold;
    }
}
div{
    color:green;
}

5.4 &符號的使用

使用場景: 父子,兄弟,緊鄰,偽類選擇器使用時

$符號表示父元素

.box{
    width: 100px;
    height: 100px;
    .wrap{
        font-size: 16px;
        $:hover{
            color: red;
        }
    }
    
}

html部分
<body>
  <div class="box">
   文字文字
      <span>行內(nèi)</span>
      <p>pppp
        <span>ssss</span>
      </p> 
  </div>
  <div>外面</div>
</body>

less部分
.box {
    font-size: 30px;
    border: 1px solid pink;

    span {
        display: inline-block;
        color: red;
        font-weight: bold;
    }

    p {
        color: blue;
        font-weight: bold;
       span{
           color:aqua;
       }
    }
    &>span:hover{//元素本身直接的span在hover時。不寫&表示后代元素hover時。寫&才是元素本身hover。
        background-color: #ccc;
    }
}

6. 運算符

運算符的作用: 可以對角度,顏色,高度等進行運算

運算符的分類: 加 +, 減 - , 乘 *, 除 /

@w1:200px;
@w2:300px;
@c1: #333;
@c2: #666;

li {
    width: @w1 + @w2;
}

// 16進制的顏色值,只能在#000000 ~ #ffffff之間,如果超出了,就會自動使用最大值
li {
   background: @c1 + @c2;
}

例子:

.button(@size){
    width: 100px * @size;
    height: 40px * @size;
    font-size: 14px * @size;
}

// 使用
.button {
    .button(3)
}

sass官網(wǎng) https://www.sass.hk/

stylus官網(wǎng) https://www.stylus-lang.cn/

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Less

了解Less

1. 什么是Less

2. 安裝Less

2.1 驗證less有沒有安裝成功

3. 編譯

3.1 命令行方式編譯

1. 未指定編譯路徑

2 指定編譯路徑

3. 編譯后將編譯結(jié)果的css文件進行壓縮

3.2 外部工具的編譯方式

1. 安裝考拉less 客戶端編譯工具

3.3 使用開發(fā)工具webstorm 編譯

3.4 使用開發(fā)工具vscode編譯

Less的語法

1. 注釋語法

1.1 /**/ (多行注釋)

1.2 // (單行注釋)

2. 變量(重點)

2.1 普通變量的使用

2.2 在字符串中使用變量

2.3 選擇器使用變量

2.4 屬性變量

2.5 導(dǎo)入其他的less

2.6 變量作用域

2.7 變量的計算

3. 混合(重點)

3.1 什么是Mixins混合

3.2 定義混入

3.3 調(diào)用混入

3.4 如果混入沒有參數(shù)可以不用加括號

3.5 less可以直接繼承其他選擇器中的樣式

3.6 可以在Mixin中使用選擇器

3.7 Mixins的命名空間

3.8 Mixin的默認值與不定參

1. 默認值

2. 不定參：不確定參數(shù)的個數(shù)

3.9 Mixins的判斷條件

1. when 表示 在使用Mixin的時候必須滿足 when后面的條件

2. 如果有兩個必須同時滿足的條件,使用 and

3. 如果需要排除某個條件才能使用Mixin,使用not

4. 如果需要多個條件只要滿足一個就執(zhí)行Mixin,使用 逗號,

3.10 Less循環(huán)

3.11 模式匹配

模式匹配舉例--三角形

4. 顏色函數(shù)

5. 嵌套(重點)

5.1 什么是嵌套

5.2 嵌套的好處:

5.3 使用

5.4 &符號的使用

6. 運算符

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1. when 表示在使用Mixin的時候必須滿足 when后面的條件

4. 如果需要多個條件只要滿足一個就執(zhí)行Mixin,使用逗號,