SCSS中定义变量（scss常用语法）

myzbx 2025-03-14 19:07 11 浏览

1.scss中定义变量

$bg-color: #ed795a; //也可以$bg-color: #ed795a !default;这样写 !default 表示是默认值
.btn-default{
   background-color:$bg-color;
}
 
.btn-default{//编译后是
    background-color:#ed795a;
}
scss中的变量也存在作用域，类似于js中的局部变量
$bg-color: #ed795a;
 
.app{
	$bg-color: #8ab945;//类似于js的局部变量
}
 
.btn-default{
   background-color:$bg-color;//这里是 #ed795a 而不是.app里的 #8ab945
}

关于scss中参数传递

//@mixin 进行声明 多个参数 , 分割
@mixin wd($width){
	width:$width;
}
 
@mixin h($height:18px){
	height:@$height
}
 
.btn{// @include进行调用
    background-color:$bg-color;
    @include wd(32px);
    @include h;//不传 则默认18px
}
  
//编译后是
  .btn{
    background-color:#ed795a;
    width:32px;
    height:18px; 
}

2.less样式定义变量

以@符号开头即可

@bg-color:#8ab945;定义变量bg-color的颜色为#8ab945
 
.btn-default{
   background-color:@bg-color;//获取之前定义的颜色
}
 
.btn-default{//编译后
   background-color:#8ab945;
}

less样式中进行参数传递

//less中定义可传参的样式相比较scss中要简单  多个参数;分割
.wd(@width) {//无默认值
    width:@width;
}
 
.height(@h:18px) {//有默认值 18px; 
    height:@h;
}
 
.btn {
     background-color:@bg-color;
    .wd(32px);
    .height(22px);
}
 
//编译后是
.btn{
    background-color:#ed795a;
    width:32px;
    height:22px; 
}

3.css样式中定义变量

以--开头即可，在需要用到的地方以var()函数调用定义的变量名即可获取对应值。

body{ //这里限定了变量的作用域是 body
   --bg-color:#8ab945;
}
 
.btn-default{
   background-color:var(--bg-color);
}

目前css中定义的变量在ie(具体哪些版本不兼容本人并未测试)中并不兼容，请大家谨慎使用!

CSS 覆盖变量

上一篇：Svelte 不是 JavaScript（svelte.js）
下一篇：10分钟搞定让你困惑的 Jenkins 环境变量

SCSS中定义变量（scss常用语法）

1.scss中定义变量

2.less样式定义变量

3.css样式中定义变量

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」

SCSS中定义变量（scss常用语法）

1.scss中定义变量

2.less样式 定义变量

3.css样式 中定义变量

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」

2.less样式定义变量

3.css样式中定义变量