1.scss安装
(1)打开终端输入
安装依赖
npm install sass -d
(2)在src/assets文件夹下新建 style文件夹(文件名可以自定义),在文件夹下新建main.scss文件
(3)在vite.config.js中配置 (当然你也可以scss文件创建在哪里 就往哪里引进来
比方说:additionalData: '@import "./src/style/index.scss";')
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData:'@import "./src/assets/style/main.scss";'
}
}
}
})
2.scss的简单使用
(1)变量的定义
例如:$blue: #3385ff
$表示这是一个变量;blue表示这个变量的名称;#3385ff代表这个变量的值
(2)简单使用
在HelloWorld.vue文件的style区
<style lang='scss'>
body{
background-color: $blue
}
</style>
如果页面背景变成了刚定义的颜色,说明scss使用成功(要注意自己类名是否定义正确 别慌乱的认为是自己配置错了)
3.基本语法
简单示例几个吧 实际开发中顶多是全局定义用得到变量 其实js中定义的变量css中也可以用
变量除了可以定义在全局,也可以在单个页面中定义
(1)!default的使用
$color-green: #0f0;
$color-green: #f55 !default;
这里这个变量的值,最终会显示为绿色,这是因为,!default的含义是,如果这个变量没有被赋值,那么就赋默认值,如果在其他地方被赋值,就取在其他地方被赋的值,可以理解为把这个默认值的优先级降到了最低,当没有其它地方赋值时候,才会选择默认值
(2)变量的取值也可以是变量
$hello: $color-green;
(3)@mixin可以定义一段代码作为模板样式
@mixin border-radius($radius: 5px, $borderRadius: 8px) {
border: {
radius: $radius;
top: $borderRadius solid #ff0;
bottom: $borderRadius solid #f00;
left: $borderRadius solid #00f;
right: $borderRadius solid #888;
}
}
上面的代码可以看出,@mixin定义的变量,可以传参数,并且可以使用es6给函数参数默认值的方式赋值,且有相同的前缀的属性例如border,font...,可以把前缀和后边的拆开来写
在引用@mixin时,如果不传值,就会取默认的5px,8px,如果传值就会按参数位置来取值,例如下面的代码,取值就是5px,1px
@include border-radius(5px, 1px);
(4)&的使用
&可以引用父元素
.inner {
width: 10px;
height: 10px;
background-color: $blue;
}
$hover: #333;
&:hover {
background-color: $hover;
}
//其实就是
.inner {
width: 10px;
height: 10px;
background-color: $blue;
}
$hover: #333;
.inner:hover {
background-color: $hover;
}
当然还有其他不少功能 最准确还是去查看官网吧~