css预处理器scss的使用如何全局引入

目录

scss 基本功能

1、嵌套

2、变量 $

3、@mixin 和 @include

4、@extend

5、@import

scss 在项目中的使用

1、存放 scss 文件

2、引入 variables 和 mixins

2-1、局部引入

2-2、全局引入

3、入口文件中引入其他文件 


    项目中使用 css 预处理器,可以提高 css 开发效率,合理应用预处理器的特性,也可以提高 css 代码的可维护性。

    目前常见的  css 预处理器有三种:less,scss(sass升级版),stylus。不管是哪一种,最基本的 variables,extend,mixin,import 这些都是有的,只不过具体的用法和写法各有不同罢了。大家可以根据自己的喜好,选择自己喜欢的预处理器。

    我选择的是 scss。具体原因是:element-ui 的 theme-chalk 使用 scss 编写,项目中如果也使用 scss,那么后续想改变 element-ui 的主题色,会非常容易。当然不使用 scss,也是可以改变 element-ui 的主题色或是使用自定义主题的,只不过个人觉得比较麻烦。

    所以,在这里直接选择了 scss。而且接触过的大部分项目也都是使用的 scss,

不光 PC 端,还有移动端以及小程序的项目。


scss 基本功能

1、嵌套

// scss 写法
.container{width: 100%;height: 100%;.wrap{max-width: 1200px}
}
// 以上代码使用 css 书写
.container{width: 100%;height: 100%;
}
.container .wrap{max-width: 1200px;
}// scss 写法
.title {font: {family: fantasy;size: 20px;weight: bold;}
}
// 以上代码使用 css 书写
.title{font-family: fantasy;font-size: 20px;font-weight: bold;
}// scss 写法
.container{width: 100%;height: 100%;background: #409eff;&:hover{background: #42b983;}
}
// 以上代码使用 css 书写
.container{width: 100%;height: 100%;background: #409eff;
}
.container:hover{background: #42b983;
}

2、变量 $

$color = #2E98FE.container{width: 100%;height: 100%;background: $color
}

3、@mixin 和 @include

@mixin title-text {font: {size: 20px;weight: bold;}color: #2c3e50;
}
.card__title{width: 100%;height: 40px;@include title-text
}

4、@extend

// scss @extend
.error {border: 1px #f00;background-color: #fdd;
}
.seriousError {@extend .error;border-width: 3px;
}// 以上代码最终编译为
.error, .seriousError {border: 1px #f00;background-color: #fdd; 
}
.seriousError {border-width: 3px; 
}

5、@import

@import "foo.scss";

scss 在项目中的使用

1、存放 scss 文件

在 assets 文件夹中创建 scss 文件夹,用于存放 scss 的所有文件

具体文件如下:

当然,也有的习惯是放到 styles 文件目录下 :

common.scss        公共基础样式

main.scss        入口文件

mixins.scss        混入样式

reset.scss        重置文件

variables.scss        变量

    一般情况下,每个系统都有属于自己的一套样式风格。我们可以根据设计规范,定义一套变量,然后在实际的开发中,使用变量编写 css 样式。这样写的好处是什么呢?就是当你的项目已经开发到一半或者已经开发完成进入测试阶段了,这时老板走过来对你说,这个系统怎么是蓝色的呀,改成红色吧。这个时候,再也不需要一个一个文件的修改样式了,只需要修改 variables 中的一个变量就可以了。


2、引入 variables 和 mixins

variables.scss 文件定义好之后,有两种使用方式:局部引入和全局引入

mixins.scss 文件类似。

2-1、局部引入

在具体的文件中引入。

// App.vue<style lang="scss" scoped>
@import './assets/scss/variables.scss';.container{width: 100%;height: 100%;background: $background-color;
}
</style>

    局部引入,变量只能在被引入的文件中使用。通常,变量在绝大多数文件中都会被用到,如果在每个文件中都要引入一遍,略显麻烦,这个时候就可以考虑 全局引入 。 


2-2、全局引入

一次引入,随处可用。

// vue.config.jsmodule.exports = {publicPath: './',outputDir: process.env.VUE_APP_OUTPUT,css: {loaderOptions: {sass: {prependData: `@import "@/assets/scss/variables.scss";@import "@/assets/scss/mixins.scss";`}}}
}

这里需要注意的是: sass-loader 版本不同,loaderOptions 中 prependData 的属性名不同

  • sass-loader v8-,这个属性名是 "data"
  • sass-loader v8 中,这个属性名是 "prependData"
  • sass-loader v10+,这个属性名是 "additionalData"


3、入口文件中引入其他文件 

// main.scss@import "./reset.scss";
@import "./common.scss";

这里注意文件的引入顺序。

// main.jsimport Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'import './assets/scss/main.scss'Vue.config.productionTip = falsenew Vue({router,store,render: (h) => h(App),
}).$mount('#app');

以上,就是我在项目用使用 scss 的方案。

之所以整理这篇文章,主要是因为项目有一个整体主色调系:紫色

定义了一个色值变量 : $theme-purple , 主题紫色,整个项目很多地方都会使用到,

并且将其也写到了 variables.scss  变量文件 中,接下来就是重点了,

将 variables.scss 在 main.js 入口文件中打算引入供全局使用时

却发现别的地方根本无法使用,后来经过百度一番后,

才得知好像是 scss变量 无法简单的通过 main 就能全局引用了,

得需要单独去 Vue 的 vue.config.js 配置文件里面配置一下才可。

也就是上面的全局引入方式

      sass: {
        prependData: `@import "@/assets/scss/mixins.scss";`
      }

这里我只引入了 mixins ,是因为我在 mixins 里面引入了 variables.scss

这样重启一下项目就 OK 大功告成啦 ~ 下课!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/759793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Uibot6.0 (RPA财务机器人师资培训第1天 )RPA+AI、RPA基础语法

训练网站&#xff1a;泓江科技 (lessonplan.cn)https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981(本博客中会有部分课程ppt截屏,如有侵权请及请及时与小北我取得联系~&#xff09; 紧接着小北之前的几篇博客&#xff0c;友友们我们即将开展新课的学习~…

InsCode是一个集成了在线IDE、在线AI编程、在线算力租赁、在线项目部署以及在线SD 模型使用的综合代码开发平台。

一、 Stable Diffusion 模型在线使用   InsCode是一个集成了在线IDE、在线AI编程、在线算力租赁、在线项目部署以及在线SD 模型使用的综合代码开发平台。 Stable Diffusion是目前最火的AI绘画工具之一&#xff0c;它是一个免费开源的项目。通过Stable Diffusion&#xff0c;…

Python爬取网站数据

Python爬取网站数据 前言 什么是爬虫&#xff1f; 通过编写程序&#xff0c;模拟浏览器上网&#xff0c;然后让其去互联网上抓取数据的过程 爬虫合法还是违法&#xff1f; 在法律上是不被禁止的但是也有违法风险 爬虫带来的风险可以体现在如下2方面 爬虫干扰了被访问网站…

Centos上批量压缩子目录为ZIP文件的代码

需求&#xff1a; 写一个Centos7.9的脚本完成下列需求&#xff1a; 把目录/home/backup/test的第一级子目录依次进行压缩处理&#xff0c;压缩文件的格式为ZIP格式&#xff0c;压缩文件的名字就是子目录的名字&#xff0c;压缩文件存放于目录/home/backup/vgroup000001中。 注意…

Vulnhub - Raven2

希望和各位大佬一起学习&#xff0c;如果文章内容有错请多多指正&#xff0c;谢谢&#xff01; 个人博客链接&#xff1a;CH4SER的个人BLOG – Welcome To Ch4sers Blog Raven2 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/raven-2,269/ 0x01 信息收集 Nmap扫描…

spring-boot-devtools debug SilentExitException

spring-boot-devtools debug SilentExitException&#xff1a;springboot热部署debug模式进入SilentExitException /** Copyright 2012-2019 the original author or authors.** Licensed under the Apache License, Version 2.0 (the "License");* you may not use …

软考网工学习笔记(6) 广域通信网

公共交换电话网&#xff08;pstn&#xff09; 在pstn是为了语音通信而建立的网络。从20世纪60你年代开始用于数据传输 电话网有三个部分组成&#xff1a; 本地回路 &#xff0c;干线 和 交换机 。 干线 和 交换机 一般采用数字传输和交换技术 &#xff0c;而 本地回路基本采…

Ubutun部署docker,并使用docker部署springboot项目,关闭软件可继续访问

工具为xftp和xshell。 我这里使用的Ubuntu的版本是20.04的&#xff0c;话不多说&#xff0c;我们来直接上代码。 首先我们最好使用管理员权限进行操作&#xff0c;预防操作时遇到权限问题。 部署docker 登入管理员 不登入管理员也没关系。 su根据提示输入密码&#xff0c;进…

通过Docker安装MySQL数据库

1. 安装Docker 首先&#xff0c;确保你的系统上已经安装了Docker。如果还没有安装&#xff0c;可以访问Docker官网查看安装指南。 对于大多数Linux发行版&#xff0c;可以使用以下命令安装Docker&#xff1a; sudo apt-get update sudo apt-get install docker.io 安装完成…

JVM常见启动参数

目录 内存参数设置 垃圾收集 内存溢出 其他杂项 总结 java虚拟机&#xff08;JVM&#xff09;的启动参数可以用来调整其行为、性能和资源分配。以下是一些常见的JVM启动参数&#xff1a; 内存参数设置 初始化堆内存以满足应用程序需求是最常见的与性能相关的实践之一。 …

Linux实战笔记(三) 文件压缩

大家好&#xff0c;我是半虹&#xff0c;这篇文章来讲 Linux 系统中常用的文件压缩方式 0、序言 在 Linux 系统中&#xff0c;存在许多打包或压缩文件的工具 这篇文章会对一些常用的工具进行分类整理和介绍 如果只是需要知道怎么对不同格式的文件做解压缩&#xff0c;可以直…

Linux中的流刷新和定位

一、流的刷新 int fflush(FILE *fp); 1.成功时返回0&#xff1b;出错时返回EOF 2.将流缓冲区中的数据写入实际的文件 3.Linux下只能刷新输出缓冲区,输入缓冲区丢弃 4.如果输出到屏幕使用fflush(stdout) 二、流的定位 long ftell(FILE *stream);long fseek(FILE *stre…

《底层逻辑》--透过表象看系统

上一个视频&#xff0c;讲了微软公司通过改变与供应商的“连接关系”从而提高了工作餐的质量&#xff1b; 今天就讲讲拥有这种洞察力背后的理论依据&#xff0c;即“透过表象看系统”&#xff1b; 系统 要素 连接关系&#xff1b;再细化一下&#xff0c;构成…

如何在MATLAB中处理图像和视频?

在MATLAB中处理图像和视频是一项复杂而强大的任务&#xff0c;涉及多个步骤和工具。MATLAB提供了丰富的函数和工具箱&#xff0c;使用户能够轻松地加载、处理、分析和显示图像和视频数据。 一、图像处理基础 加载图像&#xff1a;在MATLAB中&#xff0c;可以使用imread函数加…

2024蓝桥杯每日一题(并查集)

备战2024年蓝桥杯 -- 每日一题 Python大学A组 试题一&#xff1a;奶酪 试题二&#xff1a;合并集合 试题三&#xff1a;连通块中点的数量 试题四&#xff1a;网络分析 试题一&#xff1a;奶酪 【题目描述】 现有一块大奶酪&#xff0c;它的高度为 hℎ…

shell source脚本中如何读取另外一个脚本中的变量

目录 前言语法举例注意 前言 要在一个Shell脚本中读取另一个Shell脚本中的变量&#xff0c;可以使用source命令或者.命令。这些命令用于在当前Shell环境中运行指定的脚本&#xff0c;从而使得脚本中的变量在当前Shell中可用。 语法 #!/bin/bash # 读取另一个Shell脚本中的变…

金智维的务实主义,打响大模型落地“突围战”

今年以来&#xff0c;新质生产力成为全社会关注的焦点。新质生产力的特征之一&#xff0c;就是深化新技术应用&#xff0c;尤其是AI及大模型&#xff0c;要加速落地到实际业务场景中&#xff0c;为千行万业提质增效。 2024是大模型技术做深、价值做实的一年。3月20日&#xff0…

【C++】详解智能指针

目录 一、智能指针的作用二、内存泄露1、什么是内存泄露2、内存泄漏分类3、如何避免内存泄露 三、智能指针的使用及原理1、RAII2、智能指针的原理3、std::auto_ptr4、std::unique_ptr5、std::shared_ptr1、std::shared_ptr原理2、std::shared_ptr的线程安全问题4、std::shared_…

python爬虫学习第二天----类型转换

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

安卓面试题多线程 101-105

101. 简述Java体系中锁的优化机制 ?从JDK1.6版本之后,synchronized本身也在不断优化锁的机制,有些情况下他并不会是一个很重量级的锁了。优化机制包括自适应锁、自旋锁、锁消除、锁粗化、轻量级锁和偏向锁。 锁的状态从低到高依次为无锁->偏向锁->轻量级锁->重量级…