sass
前端一枚
点关注 不迷路
展开
-
scss切换主题风格
第一步:创建_main.scss文件,定义一个map类型的变量$themes,相当于JS中的对象,不过是用圆括号包裹。$themes中定义不同的主题名称,这里是light,dark。再定义主题对应的颜色。注意不同主题色的键值对的键名要相同。第二步:创建handle.scss文件夹,导入_main.scss文件。1、定义混入器themeify,用来获取data-theme的值。2、@each遍历themes的键值对, themes的键值对,theme-name对应light,dark。原创 2022-12-26 17:56:43 · 1880 阅读 · 0 评论 -
sass的常用的一些语法介绍
sass一些常用的规则1、嵌套规则.box{ p{ font-size:12px }}2、父选择器 & div { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } a { font-weight: bold; &:hover { color: red; }原创 2022-03-04 17:06:57 · 94 阅读 · 0 评论 -
stylelint如何检测css、sass、vue、html文件
第一步:项目中下载相关插件stylelint:强大的,现代的样式代码检查工具,帮助避免错误并在样式中强制执行约定stylelint-scss:项目使用sass、scss需额外安装stylelint-scssstylelint-config-standard:styelint的标准可共享配置yarn add stylelint stylelint-config-standard stylelint-scss --save-devnpm install stylelint stylelin原创 2022-03-01 12:37:51 · 1779 阅读 · 0 评论 -
使用Live Sass Compiler扩展在vs-code中编译
目的:可以实时看scss文件编译后的css文件第一步:首先在vscode扩展里安装Live Sass Compiler插件第二步:对Live Sass Compiler插件配置 "liveSassCompile.settings.formats":[ // 扩展 { "format": "compact",//可定制的出口CSS样式(expanded,compact,compressed, ..原创 2022-03-02 12:14:20 · 1169 阅读 · 3 评论 -
sass编译成css时候Compilation ErrorError: Function rgb is missing argument $green
编译sass时报错主要是因为background: rgba(22 115 219 20%)不带逗号导致,但是加上逗号background: rgba(22 ,115 ,219 ,20%)后,因为项目中添加有stylelint,格式化时把逗号去掉了这里就要配置stylelint了规则了 "rules": { "color-function-notation":"legacy" }文档地址color原创 2022-03-02 11:42:03 · 3445 阅读 · 0 评论 -
Unexpected unknown at-rule “@mixin“ (at-rule-no-unknown)Stylelintat-rule-no-unknown
"rules": { "at-rule-no-unknown": [ true, { "ignoreAtRules": ["mixin", "include"] } ], }文档地址:at-rule-no-unknown | Stylelint原创 2022-03-02 11:11:53 · 3108 阅读 · 0 评论 -
vite自动引入scss全局变量
vite.config.ts文件里import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import { resolve } from 'path';// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], resolve: { alias: [{ find: '@', replacemen原创 2022-03-01 17:46:52 · 5967 阅读 · 0 评论 -
使用webpack自动引入sass全局变量
当项目越来越大的时候,便于后期维护和代码的编写效率 提取css是必须的 但是每个页面都又可能用到全局声明的 scss变量 每个页面引入? 显然不是程序猿的作风,于是 sass-resources-loader 闪亮登场第一步: cnpm install sass-resources-loader --D第二步: 找到vue.config.js , 找到chainWebpack选项第三步:// vue.config.jsmodule.exports = { cha...原创 2022-02-07 16:31:41 · 1812 阅读 · 0 评论