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. mysql数据库学习

    1,服务端和客户端 MySQL 包括服务端和客户端,服务端是MySQL server,客户端包括命令行客户端和图形用户客户端: 命令行客户端:mysql,mysqladmin,mysqldump  ( ...

  2. [Java]字符串数组 与 字符串链表 之间的相互转化

    代码: package com.hy; import java.util.Arrays; import java.util.Collections; import java.util.List; pu ...

  3. leetcode39 组合总和

    这道题想到的就是dfs,在累加的和大于或等于target时到达递归树的终点. 代码如下: class Solution { public: vector<vector<int>> ...

  4. document.onselectstart=function(){return false;} 引起的拖动问题

    在网页中拖动时,会引起某些文字或一些内容被选中,导致网页中蓝蓝的一片,视觉效果很差,所以我加了个1.document.onselectstart=function(){return false;}或者 ...

  5. Ubuntu14.04+安卓系统4.3+JDK6编译源码

    本博客主要参照: https://www.jianshu.com/p/ecb9c132030f https://blog.csdn.net/gobitan/article/details/243674 ...

  6. jsp+UEditor粘贴word

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  7. JAVA 基础编程练习题2 【程序 2 输出素数】

    2 [程序 2 输出素数] 题目:判断 101-200 之间有多少个素数,并输出所有素数. 程序分析:判断素数的方法:用一个数分别去除 2 到 sqrt(这个数),如果能被整除,则表明此数不是素数, ...

  8. 手写web框架之开发一个类加载器

    ackage io.renren.common; import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang3.StringUti ...

  9. 【Zookeeper】本地模式安装

    安装步骤 上传gz包 通过rz命令,将zookeeper-3.4.10.tar.gz安装包上传到/opt/soft/文件夹下. [root@bigdata111 soft]# rz [root@big ...

  10. 【ABAP系列】SAP ABAP DATA - COMMON PART

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP DATA - ...