做简单网站的框架,wordpress learnpress,建个私人网站怎么做,千度搜索引擎引言#xff1a;什么是Sass?
Sass#xff08;Syntactically Awesome Style Sheets#xff09;是一种CSS预处理器#xff0c;它扩展了CSS的功能#xff0c;提供了更高级的语法和特性#xff0c;例如变量、嵌套、混合、继承和颜色功能等#xff0c;这些特性可以帮助开发…引言什么是Sass?
SassSyntactically 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 langscss.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 langscss.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 langscssimport /assets/style/varibles.scss
/style3、数学计算 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%;
// }以上仅代表个人观点若有错误之处欢迎批评指正
