CSS变量声明方法,CSS调用变量方法

时间:2026-02-11 23:17:48

1、/*声明变量*/@nice-blue: #5B83AD;

说明:

1、以@开头

2、:前面@后面是变量名,只能以字母开头,可以中间包含数字,或以数字结尾,中间可以有_下划线,不能用下划线结尾

3、:冒号后面;分号前面是变量值

CSS变量声明方法,CSS调用变量方法

2、/*加变量*/ 

@light-blue: @nice-blue + #111;

说明:

可以加法运算,需要谨遵格式“变量=变量+值”

CSS变量声明方法,CSS调用变量方法

3、/*减变量*/ 

@light-blue: @nice-blue - #111;

说明:

可以减法运算,需要谨遵格式“变量=变量-值”

CSS变量声明方法,CSS调用变量方法

4、/*乘变量*/ 

@light-blue: @nice-blue * #111;

说明:

可以乘法运算,需要谨遵格式“变量=变量*值”

CSS变量声明方法,CSS调用变量方法

5、/*除变量*/ 

@light-blue: @nice-blue / #111;

说明:

可以除法运算,需要谨遵格式“变量=变量/值”

CSS变量声明方法,CSS调用变量方法

6、/*引用变量*/ 

#header { color: @light-blue; }

说明:

直接在需要使用变量的地方写入变量名即可调用变量

CSS变量声明方法,CSS调用变量方法

© 2026 海能知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com