引言:什么是Sass?
Sass(Syntactically Awesome Style Sheets)
是一种CSS预处理器,它扩展了CSS的功能,提供了更高级的语法和特性,例如变量、嵌套、混合、继承和颜色功能等,这些特性可以帮助开发者更高效地管理和维护样式表。Sass
语法是基于缩进(缩进花括号)的,它与传统的CSS语法类似,但添加了一些额外的规则和语法结构。Sass代码需要编译成CSS代码才能在浏览器中呈现。
Sass 有什么好处呢?
Sass
让编写可维护的CSS更加简易方便。可以用更少的代码,做更多的事,用更少的时间,具有更强的可读性
比如全局定义的样式,变量,可以统一修改,避免重复书写样式
一、安装Sass
使用vite 创建好 vue 项目
vite 项目中只需要安装 sass 即可,不像 webpack
项目 需要安装 node-sass
sass-loader
;
执行如下命令 npm i sass --save-dev
二、使用Sass
安装完成后便可以在项目中使用Sass,
需要在style标签中设置lang
属性为scss
如:
<style scoped lang="scss">.container{width: 100%;height: auto;}
</style>
三、配置Sass全局共享变量
1.配置全局
Sass
中我们可以自定义变量,一些变量往往是全局共享的,为了方便我们可以在vite.config.js
中defineConfig
里面添加配置如下:
自定义全局样式文件:varibles.scss
css: {// css预处理器preprocessorOptions: {scss: {// 引入 varibles.scss 这样就可以在全局中使用 varibles.scss中预定义的变量了// 给导入的路径最后加上 ; additionalData: '@import "@/assets/style/varibles.scss";'}}}
@import "@/assets/style/varibles.scss"
为自己定义的全局css 样式
如下:
1、定义的全局变量
:root {--GBrand: #0084FF;--GBrandHover: #1F93FF;--GBaseL1: #28374F;// ...
}
也可以直接使用 $
符号定义变量
如:
$barndColor: #0084FF;
$waringColor:#FF9200;
// 全局mixin
@mixin box-shadow($bulr: 20px, $color: #AAB1BD) {-webkit-box-shadow: 0px 0px $bulr $color;-moz-box-shadow: 0px 0px $bulr $color;box-shadow: 0px 0px $bulr $color;
}
不同的定义方式,最好是分开文件声明,不要混淆在一个文件中,便于后期维护
使用方法:
<style scoped lang="scss">.main-container{color: var(--GBrand);background--color: $barndColor;&-title{/* sass 嵌套样式 */color: var(--GBaseL1);}}
</style>
// 编译后为 data-v-xxxx
为 vue 中样式表自动生成的hash
值
.main-container [data-v-xxxx]{color: #0084FF;background-color: ##0084FF;
}
.main-container .main-container-title[data-v-xxxx]{color: #28374F;
}
2.不配置全局,单独引入
在单个使用文件中引入
<style scoped lang="scss">@import '@/assets/style/varibles.scss'
</style>
3、数学计算
Sass
允许使用数学表达式!这对于混合宏非常有用,是我们能够使用自己的标记做一些很酷的事情。
支持的操作符有:
加:+
减:-
除:/
乘:*
取余:%
相等:==
不相等:!=
两个Sass
有关于数学计算的“陷阱” /符号用来简写CSS字体属性,比如font: 12px/18px
,所以如果你想在非变量值上使用除法操作符,那么你需要使用括号包裹它们:
$fontSizeDiff: (14px/16px);
不能混合使用值的 单位
$container-width: 100% - 20px;
基于基础的容器宽度创建一个动态列
$container-width: 100%;
.container {width: $container-width;
}
.col-4 {width: $container-width / 4;
}
// 编译后是这样的
// .container {
// width: 100%;
// }
//
// .col-4 {
// width: 25%;
// }
以上仅代表个人观点,若有错误之处,欢迎批评指正