scss预处理器对比css的优点以及基本的使用

本文主要在vue中演示,scss的基本使用。安装命令

复制代码
npm install sass sass-loader --save-dev

变量

SCSS 支持变量,可将常用的值(如颜色、字体大小、间距等)定义为变量,方便重复使用和统一修改。

css 复制代码
<template>
  <div>
    <div class="box">
       11111
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
// 变量
$title-color:blue;
$text-font:30px;
.box{
    width: 200px;
    height: 200px; 
    //使用$title-color变量给边框设置颜色
    border: 1px solid $title-color; 
    //使用$text-font变量设置文字大小
    font-size: $text-font;
}
  
</style>>

嵌套规则

scss支持嵌套规则,代码结构更符合html的嵌套逻辑

css 复制代码
<template>
  <div>
    <div class="box2">
        <div class="title">this is title</div>
    </div>
    <div class="title">this is title2</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
// 变量
$title-color:blue;
$text-font:30px;

// 嵌套规则
.box2{
    width: 200px;
    height: 200px;
    border: 1px solid $title-color;
    font-size: $text-font;
    .title{
        color: $title-color;
    }
//这里嵌套规则相当于css的 .box2 .title
}

  .title{
        color: red;
    }
</style>>

计算

css 复制代码
<template>
  <div>
    <div class="box3">这是一段文字aaaaaaaaaaa</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
// 变量
$title-color:blue;
$text-font:30px;
$pad-value:10px;

.box3{
    // fit-content 元素宽度由内容撑开,在实际开发中注意浏览器兼容性
    width: fit-content;
    border: 1px solid $title-color;
    // scss支持计算 这里使用了变量$pad-value,
    // 效果等同于 padding: (10px * 2);
    padding: ($pad-value * 2);
}


</style>>

继承

css 复制代码
<template>
  <div>
     <div class="box4">继承样式</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
// 变量
$title-color:blue;
$text-font:30px;
$pad-value:10px;
$normal-width:200px;
$noraml-height:100px;
.box4{
    width: $normal-width;
    height: $noraml-height;
     //继承 extendStyle类目的样式,extendStyle中的样式都会应用到box4类目上
    @extend .extendStyle;
}
.extendStyle{
    color: rgb(24, 211, 33); //该值即为页面上文字的绿色
    border: 1px solid $title-color;
    font-size: 50px;
    padding: 20px;
    font-weight: 700;
}


</style>>

混合器

混合器(Mixins)是 SCSS 中一种非常强大的特性,它允许定义一组样式,然后在多个地方重复使用这些样式。可以把它想象成一个函数,这个函数封装了一系列的 CSS 规则,并且可以接受参数,这样在调用时可以根据不同的需求传入不同的值,从而实现样式的灵活复用。

css 复制代码
<template>
  <div>
     <div class="box5">混合器</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
// 变量
$title-color:blue;
$text-font:30px;
$pad-value:10px;
$normal-width:200px;
$noraml-height:100px;
// 无参数混合器
@mixin radiu-color{
    border: 2px solid red;
    border-radius: 10px;
}
// 有参数混合器
@mixin set-bgc($col){
    background-color: $col;
}
.box5{
    // 设置边框和圆角
    @include radiu-color();
    // 设置背景颜色为紫色
    @include set-bgc(purple);
    padding: 20px;
    color: orchid ;
    width: 100px;
}

</style>>

导入

在大型项目中,CSS 代码可能会变得非常庞大和复杂,为了更好地组织和管理这些代码,SCSS 提供了 `@import` 指令,允许你将多个 SCSS 文件导入到一个主文件中。这样可以将不同功能的样式代码分离到不同的文件中,提高代码的可维护性和可读性。

这里创建四个scss文件,_button.scss,_mixin.scss,_variable.scss,main.scss

css 复制代码
//_variable.scss 用来存放变量
$title-color:blue;
$text-font:30px;
$pad-value:10px;
$normal-width:200px;
$noraml-height:100px;
$primary-color:rgb(243, 167, 25);
css 复制代码
//_mixin.scss 用来存放混合器
// 无参数混合器
@mixin radiu-color{
    border: 2px solid red;
    border-radius: 10px;
}
// 有参数混合器
@mixin set-bgc($col){
    background-color: $col;
}
css 复制代码
//_button.scss  封装按钮样式
@import '_variable';

// 使用变量和混合器
.button {
    @include radiu-color;
    background-color: $primary-color;
    color: white;
    padding: 10px 20px;
    border: none;
  }
css 复制代码
//main.scss 中导入
// 导入变量文件
@import '_variable';
// 导入混合器文件
@import '_mixin';
// 导入按钮样式文件
@import '_button';

在组件中使用

css 复制代码
<template>
  <div class="box">
     import导入
     <!-- 这里的类名button 就是 _button.scss中封装的样式 -->
     <button class="button">按钮</button>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
// 导入
@import '@/css/main.scss';
 .box{
    // 验证是否生效
    width:$normal-width;
    color: $title-color;
 }
</style>

end

如有误欢迎指正

相关推荐
山青花欲燃3106 分钟前
React 对接流式接口实现
前端·llm
LaoZhangAI8 分钟前
【2025最新】Gemini 2.5 Pro完全指南:强大推理能力提升8大应用场景实战效率
前端
晓风伴月19 分钟前
Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁
前端·css·overflow裁剪
Carlos_sam19 分钟前
OpenLayers:海量图形渲染之矢量切片
前端·javascript
Nexmoe20 分钟前
20 万行代码:我们如何构建和维护大规模 AI 原型系统
前端
zhangxingchao20 分钟前
Andrdoid中常用的JVM知识整理
前端
海底火旺20 分钟前
聊一聊JavaScript中的立即执行函数(IIFE)
前端·javascript
76756047920 分钟前
useMemoize 方法源码解读与实战应用
前端·源码
青青奇犽21 分钟前
跨域问题全解析:七种方法轻松拿捏跨域
前端·javascript·面试
loooseFish22 分钟前
使用canvas模拟 美图AI画质消除中 选中区域上传(第一次正式使用canvas小记)
前端