scss的基本用法

目录

• • 1.scss是什么
  • 2.安装scss
  • 3.使用
  • 4.配置全局共享变量
  • 5.单独引入
  • 6.在vue文件中直接使用
  • 7.嵌套
  • 8.继承
  • 9.混合@mixin

1.scss是什么

• scss是css的一种预处理语言，是一款强化css的辅助工具，在css的基础上增加了变量(variables)、嵌套(nested nutes)、混合(mixin)、导入(inline imports)等功能。
• scss是sass3.0后的一个版本，后缀名为.scss
• scss在线转css

2.安装scss

node v16.13.0对应的sass版本

"node-sass": "6.0.1",
"sass-loader": "10.2.0",

node v14.x.x对应的sass版本

"node-sass": "4.14.1",
"sass-loader": "7.3.1",

node版本与sass版本对应关系，不对应会报错哦。 指路nodesass各个版本

3.使用

style中添加 lang="scss"

<style scoped lang="scss">

声明变量：使用$声明变量

$title-color: #F86334;

4.配置全局共享变量

在vue.config.js里配置scss全局样式

css: {
    loaderOptions: {
      scss: {
        // 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
        // 给导入的路径最后加上; 
        additionalData: '@import "@/assets/style/mixin.scss";'
      }
    }
  }

mixin.scss编写全局变量 $title-color

$title-color: #F86334;

页面的style中直接使用 $title-color

<template>
  <h1 class="title">标题</h1>
</template>

<script setup>
</script>
<style scoped lang="scss">
.title {
  color: $title-color;
}
</style>

5.单独引入

text.scss声明变量

$text-color: #F86334;

vue文件：使用 @import "xxx.scss" 引入scss文件

<style scoped lang="scss">
@import "@/assets/style/text.scss"

.title {
  color: $text-color;
}
</style>

6.在vue文件中直接使用

<template>
  <div>
    <h1 class="title">文章标题</h1>
    <div class="content">文章内容文章内容文章内容文章内容文章内容</div>
  </div>
</template>

<script setup>
</script>
<style scoped lang="scss">
//全局变量
$title-color: #ffe536;
.title {
  color: $title-color;
}
.content {
  //局部变量
  $content-color: #666;
  color: $content-color;
}
</style>

7.嵌套

css语法

// 标签
.title {
  color: #333;
}
.title span {
  color: #3bf3d4;
}

// 伪类
.content {
  color: #000;
}
.content:hover {
  color: red;
}

scss语法

// 标签嵌套
.title {
  color: #333;
  span {
    color: #3bf3d4;
  }
}

// 伪类嵌套：借助 & 
.content {
  color: #000;
  &:hover {
    color: red;
  }
}

8.继承

使用 @extend .className 继承

.box1 {
  width: 200px;
  height: 200px;
  background: #ccc;
}
.box2 {
  @extend .box1;
  background: #f7b4a0;
}

9.混合@mixin

使用 @mixin 声明混合宏，使用 @include 调用混合宏

// 声明mixin
@mixin border {
  border: 3px solid green;
}
// 声明的mixin传参数
@mixin borderRadius($radius) {
  border-radius: $radius;
}

.mixin {
  @include border; // 调用mixin
  @include borderRadius(10px); // 调用mixin传值
  width: 200px;
  height: 200px;
}