Vue3中Sass的安装与使用指南:轻松上手CSS预处理器

@[TOC]

Sass是什么?

Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS的功能,提供了更高级的语法和特性,例如变量、嵌套、混合、继承和颜色功能等,这些特性可以帮助开发者更高效地管理和维护样式表。Sass语法是基于缩进(缩进花括号)的,它与传统的CSS语法类似,但添加了一些额外的规则和语法结构。Sass代码需要编译成CSS代码才能在浏览器中呈现。

为什么使用Sass?

Sass让编写可维护的CSSS更加简易方便。可以用更少的代码,做更多的事,用更少的时间,具有更强的可读性。

安装sass

以前用vue-cli的时候,还要安装sass-loader、node-sass什么的,安装的时候还会遇到各种问题,但是vite其实安装sass就可以了,很简单。

1、安装sass

复制代码
npm install sass -D

2、编写全局css变量/全局mixin

css 复制代码
// 全局变量 / globalVar.scss
$font-size-normal: 32px;

$bg-color: #1989fa;

// 全局mixin / globalMixin.scss
@mixin box-shadow($bulr: 20px, $color: #1989fa7a) {
    -webkit-box-shadow: 0px 0px $bulr $color;
    -moz-box-shadow: 0px 0px $bulr $color;
    box-shadow: 0px 0px $bulr $color;
}

3、vite引入并使用

css 复制代码
//全局引入
css: {
    preprocessorOptions: {
      scss: {
        /**如果引入多个文件,可以使用
       * '@import "@/assets/scss/globalVariable1.scss";
       * @import"@/assets/scss/globalVariable2.scss";'
      **/
        additionalData: '@import "@/style/globalVar.scss";',
      }
    }
  },

4、按需引入并使用

xml 复制代码
<style scoped lang="scss">
@import "@/style/globalMixin.scss";
.test{
  width: 650px;
  height: 60px;
  font-size: $font-size-normal;
  background-color: $bg-color;
  @include box-shadow;
}

sass语法

1、变量

Sass让CSS可以使用变量。变量类型可以是数字,字符串,颜色,null,列表和maps。在Sass中使用$符号定义变量。

创建一个变量
bash 复制代码
$primaryColor: #eeffcc;

定义变量并不会输出任何CSS,它们只会被记录在当前作用域的变量集中。

使用变量
css 复制代码
body {
    background: $primaryColor;
}
变量作用域

如果你在选择器中声明了一个变量,那么它的作用范围就是这个选择器内部。

css 复制代码
$primaryColor: #eeccff;
body {
  $primaryColor: #ccc;
  background: $primaryColor; //编译后#ccc
}
p {
  color: $primaryColor; //编译后#eeccff
}

Sass提供了一个!global标识符,可以在选择器中声明一个全局变量。

css 复制代码
$primaryColor: #eeccff;
body {
  $primaryColor: #ccc !global;
  background: $primaryColor; //编译后#ccc
}
p {
  color: $primaryColor; //编译后#ccc
}

2、数学计算

与CSS不同,Sass允许使用数学表达式!这对于混合宏非常有用,是我们能够使用自己的标记做一些很酷的事情。

支持的操作符包括:

加:+ 减:- 除:/ 乘:* 取余:% 相等:== 不相等:!=

两个Sass有关于数学计算的"陷阱"
  • /符号用来简写CSS字体属性,比如font: 14px/16px,所以如果你想在非变量值上使用除法操作符,那么你需要使用括号包裹它们:
bash 复制代码
$fontDiff: (14px/16px);
  • 不可以混合使用值的单位:
css 复制代码
$container-width: 100% - 20px;

基于基础的容器宽度创建一个动态列

arduino 复制代码
$container-width: 100%;
.container {
  width: $container-width;
}
.col-4 {
  width: $container-width / 4;
}
// 编译后是这样的
//  .container {
//   width: 100%;
//  }
//
//  .col-4 {
//      width: 25%;
//  }

3、嵌套

Sass中一个很有用又经常被误用的特性,就是嵌套声明。

  • CSS中,我们会这么写
css 复制代码
.container {
    width: 100%;
}
.container h1 {
    color: red;
}
  • 在Sass中,我们这样写
css 复制代码
.container {
    width: 100%;
    h1 {
        color: red;
    }
}
  • 可以通过使用&符号来引用父选择器给伪选择器添加链接属性
css 复制代码
a.myAnchor {
    color: blue;
    &:hover {
        text-decoration: underline;
    }
    &:visited {
        color: purple;
    }
}

4、Imports

imports允许将总的样式分割成小文件,并在另一个文件中导入。

  • 我们可以使用@import指令导入.scss文件
scss 复制代码
@import "grids.scss";
  • 也可以不需要写扩展名
scss 复制代码
@import "grids";

sass中文官网

相关推荐
LFly_ice17 分钟前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip1 小时前
js上下文
前端·javascript
中草药z1 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)1 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休1 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel1 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组1 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽1 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳5812 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust