更方便的css預處理器 --- less 詳解

一、原生CSS

1、原生CSS變量使用

• 定義變量：--變量名=參數
• 變量使用：var(--變量名)

.d1 {
    /* 定義變量 */
  --bgColor: red;
    
	/* 使用變量 */
  background-color: var(--bgColor);
}

2、原生CSS默認變量參數

css變量的默認參數，var(變量, 默認參數)

• 如果傳遞了參數， 就使用你的參數
• 如果沒有傳遞參數，就使用 默認的參數

.d1 {
	background-color: var(--bgColor, aqua);  /* 使用默認參數 */
}

.d1 {
    --bgColor: red;
	background-color: var(--bgColor, aqua);  /* 使用變量 */
}

3、css變量拼接

可以類似 JS 中的變量拼接

.d1 {
  /* 1 聲明變量 */
  --borderWidth: 10px;
  /* 2 使用變量 */
  border: var(--borderWidth) solid red; /* 第一鍾拼接	 */
}

.d2::after {
  --msg: " 太帥了！！！ ";
  content: var(--msg) "-------";  /* 第二種拼接 */
}

4、css計算calc

可以將不同單位的數值進行計算

當然也可以進行變量計算 calc( var(--xxx) + var(--yyy) )

注意：

• calc中間的運算符左右兩邊都得要空格 calc( x + y)

.box {
  /* 寬度：一行寬度的 50% - 200px */
  width: calc(50% - 200px);
  height: 300px;
  background-color: aqua;
}

.box {
  --halfWidth: 50%;
  /* 寬度：一行寬度的 50% - 200px */
  width: calc(var(--halfWidth) - 200px);
  height: 300px;
  background-color: aqua;
}

5、原生CSS 變量的作用域

即css變量的作用域是 看html的，

變量只能作用於自身以及後代元素，兄弟元素，祖先元素都不能享用

<div class="d1">我真帥</div>
<div class="d2">我真是太帥了</div>

.d1 {
    --bgColor: red;
	background-color: var(--bgColor);  /* 使用變量 */
}
.d2 {
    background-color: var(--bgColor);  /* ×無法使用，沒有效果× */
}

將以上變量定義改爲

:root {
    --bgColor: red;
}
.d1 {
	background-color: var(--bgColor);  /* 可以使用 */
}
.d2 {
    background-color: var(--bgColor);  /* 可以使用 */
}

二、預處理器less

1、less簡述

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

LESS中文網：[http://lesscss.cn/]

需要明白的知識點：

• 變量 variable
• 混合 mixin
• 嵌套
• 循環 loop

注意：

• 瀏覽器是不識別 less 文件
• less文件需要通過一些工具，重新打包成 css文件

2、less 引入

在普通的html文件，以及微信小程序，都可以這樣

步驟：

1、舉例 VScode 編輯器

2、安裝插件 Easy LESS

3、在VScode編輯那裏，加入以下代碼

重新打包位 wxss 或 css 文件

"less.compile": {
    "outExt": ".wxss"  
  }

"less.compile": {
    "outExt": ".css"  
}

4、直接使用 less 語法

/* 1 定義less變量 */
@color:yellow;
text {
  /* 2 使用變量 */
  color: @color;
}

2、less 變量

• 變量定義： @變量名= 參數
• 變量使用：@變量名

/* 變量定義 */
@bgColor: aqua;
@border: 1px solid red;

.d1 {
  /* 變量使用 */  
  background-color: @bgColor;
  border: @border;
}

3、less 混合

可以理解爲 less中的 方法，函數

• **聲明函數 關鍵字 . **
• 可用於封裝樣式，用於多個差不多的樣式，只是值不同

/* 1 聲明函數 關鍵字 . */
.setColor(@c, @fc) {
  background-color: @c;
  border: 1px solid @c;
  color: @fc;
}

div {
  /* 2 調用函數 */
  .setColor(red, #fff)
}

4、less 嵌套

可以用於像 html 一樣的嵌套關係

推薦 嵌套級別不要超過 3級

<div>
  <p>
    <a href="">百度</a>
  </p>
</div>

div {
  border: 1px solid red;
  p {
    a {
      text-decoration: none;
    }
  }
}

& 表示當前選擇器的父級

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

>表示子代選擇器

#ddiv {
    >.redCls {
		text-decoration: none;
    }
}

5、less 循環 loop

如果有類似的結構，是十分適合循環來寫的

.d1 {
  width: 10px;
}
.d2 {
  width: 20px;
}
.d3 {
  width: 30px;
}

less的循環 是函數中的一種，也是遞歸

// 1. 當 index 的值 大於0 就執行
.loop(@index) when (@index > 0) {
  // 2. 開始遞歸
  .loop(@index - 1);

  .d@{index} {
    width: @index * 10px;
  }

}

// 3. 調用
.loop(3);