Scss基础

Scss

Sass使用Ruby语法 : *没有花括号，没有分号，具有*严格的缩进

基础使用

1
pnpm install -D sass sass-loader

语法

define.scss （一般放在src中的styles文件夹中）

1
2
$--primary-color: #123456;
$white-color:$--primary-color-green !default;//这个默认值的优先级降到了最低，当没有其它地方赋值时候，才会选择默认值

vue组件

1
2
3
4
5
6
7
<style scoped lang="scss">
@import '@/styles/define.scss';
    .box{
        color:$--primary-color;
        background-color:$white-color;
    }
</style>

@mixin

可以定义一段代码作为模板样式

1
2
3
4
5
6
7
8
9
@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;
  }
}
1
@include border-radius(5px, 1px);//传入参数，返回计算好的样式

@extend

继承其它代码段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@mixin btn($width: 50px, $height: 20px, $font-size: 16px) {
  width: $width;
  height: $height;
  font-size: $font-size;
  text-align: center;
  line-height: $height;
  @include border-radius(5px, 1px);
  &:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
.btn {
  @include btn(80px, 30px, 12px);
  margin: {
    top: 10px;
  }
}
.btn-primary {
  @extend .btn;//继承到了btn的样式
  background-color: $light-blue;
  color: $fontColor;
}

Vite配置scss

配置vite.config.ts

顺便把@别名路径都配置好了

1
import { fileURLToPath } from 'url'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default defineConfig({
    plugins: [vue()],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@/styles/define.scss";',
                javascriptEnabled: true,
            },
        },
    },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
        },
    },
})