scss预处理器（变量，嵌套，混入）

最新推荐文章于 2025-06-15 18:27:52 发布

原创最新推荐文章于 2025-06-15 18:27:52 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scss #css #前端

文章展示了如何使用SCSS（Sass语法）定义变量、进行嵌套选择器和创建混入，然后编译成CSS代码。示例包括颜色变量的使用、嵌套的HTML元素样式以及自定义按钮样式的方法。最终，这些编译后的CSS代码被应用到HTML页面的按钮和标题上。

注：scss文件代码必须对其进行编译为css代码文件

$red:#db221d;
// 变量
.box{
   width: 100px;
   height: 100px;
   background-color: aqua;
   // 嵌套
   span{
       color: aqua;
       background-color: red;
   }
}
h2{
   color: $red;
}
button{
   background-color: $red;
}
// 混入
@mixin btn ($a,$b,$c,$d,$e,$f){
   width: $a;
   height: $b;
   background-color: $c;
   color: $d;
   font-size: $e;
   border-radius: $f;
   border: none;
}
.btn-info{
   @include btn(120px,36px,#0d6efd,#fff,18px,3px)
}
.btn-1{
   @include btn(100px,32px,#198754,#fff,16px,2px)
}

注：html代码文件中引入的css代码是scss编译后的代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>变量</title>
       <link rel="stylesheet" href="./2.css">
   </head>
   <body>
       <div class="box">
           <span>123</span>
       </div>
       <h2>标题二</h2>
       <button>按钮</button>

       <button class="btn-info">提交</button>
       <button class="btn-1">登录</button>
   </body>
</html>