【Vue工程】007-Scss

ゝ一纸荒年。 2023-09-27 21:20 90阅读 0赞

## 【Vue工程】007-Scss ##

#### 文章目录 ####

*  【Vue工程】007-Scss
 *  一、概述
 *   *  1、CSS 问题
     *   *  三大缺点
         *  CSS 预处理器
     *  2、简介
     *  3、中文网
     *  4、Slogan
 *  二、基本使用
 *   *  1、安装
     *  2、配置全局 scss 样式文件
     *  3、在 \`vite.config.ts\` 配置
     *  4、组件中使用
     *  5、访问 \`http://localhost:5173/home\`

## 一、概述 ##

### 1、CSS 问题 ###

> 参考文章：https://juejin.cn/post/7228009322729848889

#### 三大缺点 ####

*  css并不存在逻辑。这点是我认为css最欠缺的地方，不过目前貌似并没有任何一个工具能解决这个问题，css的动态调整依然时js在做。
 *  css自身无合适的变量机制，虽然有–varible的语法，但是原生css的变量机制很难用。
 *  css无法嵌套，导致css的可读性并不高，大部分时候就是只有写代码的人看看css，接手的人很容易一脸懵。

#### CSS 预处理器 ####

鉴于这些问题，css 预处理器定义出了一种新的语言，其基本思想是，**用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用**。它使得css更加简洁、方便修改、可读性强、适应性强并且更易于代码的维护。

### 2、简介 ###

SCSS（Sassy CSS）是一种 CSS 预处理器，它扩展了 CSS 的功能并提供了更强大的工具和语法来帮助开发者更高效地编写和管理样式表。

SCSS 是基于 CSS 的语法，因此对于熟悉 CSS 的开发者来说，学习和使用 SCSS 相对较容易。它引入了一些新的概念和功能，如变量、嵌套规则、混合（Mixins）、继承（Inheritance）等，这些功能使得样式表更具**模块化**和**可重用性**。

**css 预处理器包括 less，scss，sass，stylus**

> sass是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。
> 
> SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。Sass 从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的 CSS 代码，这一代的 Sass 被称为 Scss 。

// sass
    #sidebar
       width: 30%
       background-color: #faa
       
    // scss
    #sidebar {
       width: 30%;
       background-color: #faa;
    }

### 3、中文网 ###

https://www.sass.hk/

### 4、Slogan ###

世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言！

## 二、基本使用 ##

### 1、安装 ###

pnpm add sass -D

### 2、配置全局 scss 样式文件 ###

> 创建 src/assets/styles/index.scss

$theme-color: red;

### 3、在 `vite.config.ts` 配置 ###

import {
         defineConfig, UserConfigExport } from 'vite';
    import vue from '@vitejs/plugin-vue';
    // 这个path用到了上面安装的 @types/node
    import path from 'path';
    
    // https://vitejs.dev/config/
    const config: UserConfigExport = defineConfig({
        
      plugins: [vue()],
      // 在这里进行配置别名
      resolve: {
        
        alias: {
        
          // @代替src
          '@': path.resolve('./src'),
          // #代替types
          '#': path.resolve('./types'),
        },
      },
      // 配置 css 预处理器
      css: {
        
        preprocessorOptions: {
        
          scss: {
        
            additionalData: '@import "@/assets/styles/index.scss";',
          },
        },
      },
    });
    
    export default config;

### 4、组件中使用 ###

<template>
      <div class="home">home</div>
    </template>
    
    <script lang="ts" setup></script>
    
    <style lang="scss" scoped>
    .home {
      color: $theme-color;
    }
    </style>

### 5、访问 `http://localhost:5173/home` ###

![image-20230511224144891][]

[image-20230511224144891]: https://img-blog.csdnimg.cn/img_convert/d4bef01e94dc642cc9c1fd7ed4a6173f.png