sass之mixin的全局引入(vue3.0)

1.scss文件(mixin.scss)

/* 渐变 */
@mixin gradual($color, $color1){
background: $color; /* Old browsers */
background: -moz-linear-gradient(top, $color %, $color1 %); /* FF3.6-15 */
background: -webkit-linear-gradient(top, $color %,$color1 %); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, $color %,$color1 %); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$color, endColorstr=$color1,GradientType= ); /* IE6-9 */
}

2.配置loader

//vue.config.js

module.exports = {
//配置全局样式变量
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/style/common/mixin.scss";`
}
}
}
}

3.使用

<style lang='scss' scoped>
.header {
@include gradual(#29b474, #038f27);
}
</style>

在css中直接使用@include调用mixin即可。

钻研不易,转载请注明出处......

sass之mixin的全局引入(vue3.0)的更多相关文章

  1. vue3系列:vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件

    基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...

  2. VUE3.0升级与配置(跨域、全局scss变量等)

    1.检查本机vue版本 vue -V 2.升级vue3.0命令 npm install -g @vue/cli 3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁) mo ...

  3. Vue3.0中引入地图(谷歌+高德+腾讯+百度)

    1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...

  4. Vue3.0新特性

    Vue3.0新特性 Vue3.0的设计目标可以概括为体积更小.速度更快.加强TypeScript支持.加强API设计一致性.提高自身可维护性.开放更多底层功能. 描述 从Vue2到Vue3在一些比较重 ...

  5. vue3.0使用ant-design-vue进行按需加载原来这么简单

    下载 ui库 yarn add ant-design-vue 默认是全局引入,打包后体积很大, 非常影响首屏加载速度, 按需加载 下载按需加载的插件;推荐使用cnpm cnpm install bab ...

  6. 纯小白入手 vue3.0 CLI - 2.6 - 组件的复用

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  7. Vue3.0脚手架搭建

    https://www.jianshu.com/p/fbcad30031c2 vue3.0官网:https://cli.vuejs.org/zh/guide/ 介绍: notice: 这份文档是对应 ...

  8. 通过10个实例小练习,快速熟练 Vue3.0 核心新特性

    Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了. GitHub 博客地址: https://github.com/biaochenxuying ...

  9. Vue3实战系列:Vue3.0 + Vant3.0 搭建种子项目

    最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3 ...

随机推荐

  1. redis 概述及部署 安装php和python客户端

    概述 Redis是一个基于key-value键值对的持久化数据库存储系统.redis支持的数据存储类型比memcached更丰富,包括strings(字符串),lists(列表),sets(集合)和s ...

  2. jQuery常用AJAX-API

    目的:简化客户端与服务端进行局部刷新的异步通讯 (1)取得服务端当前时间 简单形式:jQuery对象.load(url) 返回结果自动添加到jQuery对象代表的标签中间 如果是Servlet的话,采 ...

  3. Linux vi/vim命令

    转自:http://www.runoob.com/linux/linux-vim.html Linux vi/vim 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一 ...

  4. idea 双击选中一个变量,及高亮显示相同的变量

    其实idea有这个功能,只是没有背景颜色,在这里有可能是编辑区的背景颜色和选中变量的背景颜色一样, 所有我们只需要调一下背景颜色就可以了 版本:ideaIU-2018.1.5 1. 到这里就结束啦..

  5. 一起学习linux环境的git

    第一节 GIT最初是由Linus Benedict Torvalds为了更有效地管理Linux内核开发而创立的分布式版本控制软件,与常用的版本控制工具如CVS.Subversion不同,它不必服务器端 ...

  6. VS Code 的插件位置更改

    --extensions-dir 你的目标文件夹 原来的目标位置:"E:\Program Files\VSCode\Code.exe" 更改后的位置:"E:\Progra ...

  7. AFNetworking网址中有中文崩溃的问题

    AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; manager.responseSe ...

  8. 【POJ - 1970】The Game(dfs)

    -->The Game 直接中文 Descriptions: 判断五子棋棋局是否有胜者,有的话输出胜者的棋子类型,并且输出五个棋子中最左上的棋子坐标:没有胜者输出0.棋盘是这样的,如图 Samp ...

  9. 【miscellaneous】海康相机RTSP连接代码分析

    海康相机RTSP连接代码分析 最近在做海康相机rtsp连接获取音视频的工作,现在介绍一下分析过程和源码. [源码在我上传的共享资料中: http://download.csdn.net/detail/ ...

  10. git 使用详解

    Git学习文档: http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 git init ...