本文主要在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
如有误欢迎指正