一、原生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);