每个页面都有颜色，那么应该把颜色值定义在 global.scss 文件中，通过变量定义，比如
换肤这个功能，不能算是很常见，但是也是有需求的，所以这里提供几种前端的换肤解决方案，供大家参考。
[译] 不容错过的CSS变量 Bobi.ink 2019-07-06 原文链接: Don’t miss out on css variables 当我第一次听说CSS变量时，我是
Sass Maps 的函数-map-remove($map,$key),keywords($args) map-remove($map,$key) map-remove($map,$key)函数是用来删除当前$map中的某一个$key,从而得到一个新的 map,其返回的值是一个map.他并不能直接从一个map 中删除另一个map，仅能通过删除 map中的某个key 得到新的map $map:map-remove($social - colors,drib
scss的安装、全局设置及一些常规用法 css变量的一些用法 element-plus自定义主题的两种实现方法 暗黑模式的视线
在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样：
"liveSassCompile.settings.autoprefix": 自动添加 CSS 前缀的配置。设置为使用最新的两个版本和全球使用率超过 1% 的浏览器。
声明： 请尊重博客园原创精神，转载或使用图片请注明： 博主：xing.org1^ 出处：http://www.cnblogs.com/padding1015/ 特别说明： 没有sass基础请移步：【Sass-学习笔记【基础篇】】http://www.cnblogs.com/padding1015/articles/7056323.html 最底部附结构图（实在是结构图太长了没办法）2017-07-07 20:17:17 正文 一、Sass的控制命令 2017-06-22 09:1
原文链接：https://juejin.im/post/5e92ad7a518825736c5b91cd
快捷键控制滚动条 ,注意： ① 设置父级的滚动条，给到父级div的ref值,而且父级应设置固定高度或百分比 ② 用document.getElementById(elementId)获取div不好使(div.scrollTop始终为0)，原因来自① ，没选对父级id错了 ③ 两种方法： ④ _this.addShortcutsKey(‘up’, () => { _this.KaTeX parse error: Expected 'EOF', got '}' at position 100: …op-=
没有sass基础请移步：【Sass-学习笔记【基础篇】】http://www.cnblogs.com/padding1015/articles/7056323.html
特别说明： 没有sass基础请移步：【Sass-学习笔记【基础篇】】http://www.cnblogs.com/padding1015/articles/7056323.html 最底部附结构图（实
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明
有时，需要定义一套公共样式 ，使用占位符选择器%foo，然后通过 @extend 指令引入，尤其是在制作 SCSS 样式库的时候，在需要时引入，希望 SCSS 能够忽略用不到的样式，达到简略代码的目的。
前端开发人员在构建网站时需要做出的决定之一就是添加图片的技术。它可以是HTML ，也可以是通过CSS背景生成的图片，也可以是SVG <image>。选择正确的技术很重要，并且可以在性能和可访问性方面发挥巨大作用。
最下边附结构图 在线编辑器网址如下：http://sassmeister.com/ 注意编写的时候，符号千万别用了中文的：、；、。...之类的，会报错，Sass也转换不成css。 less和sass的区别： 博客园文章—http://www.cnblogs.com/wangpenghui522/p/5467560.html 本章主要内容：变量 、混合宏 、继承 、占位 、插值 、运算 、数据类型 1：定义 Sass是css预处理器的一种，也是最早的css预处理语言。Sass采用Ruby语言编写，为css增
从写下第一篇关于CSS变量的文章《CSS中的变量 》，我就爱上了使用这个小东西（呆在一家不需要考虑浏览器兼容性的公司真舒服啊），后来，我又去学习CSS的进阶知识，学会了如何给一个CSS变量，定义属性和默认值-《带有类型和默认值的CSS变量》。在项目中，我已经开始CSS变量，当然使用SCSS/LESS的项目除外。在日常的使用中，我总结了几个使用CSS变量的极佳场景，本文记录总结一下。
今天遇到了一个问题，要在一个页面中设置一个半透明的白色div。这个貌似不是难题，只需要给这个div设置如下的属性即可：
主题化管理经常能在网站上看到，一般的思路都是将主题相关的CSS样式独立出来，在用户选择主题的时候加载相应的CSS样式文件。现在大部分浏览器都能很好的兼容CSS变量，主题化样式更容易管理了。最近，使用CSS变量在Vue项目中做了一个主题化实践，下面来看看整个过程。
rgba 的含义，r 代表 red ，g 代表 green ，b 代表 blue ，红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a 代表透明度。
官方称之为 自定义属性 ,但我比较习惯叫它 变量 ,简单点说就是一种开发者可以自主命名和使用的 CSS 属性.
yarn add -D webpack webpack-cli 或者npm install -D webpack webpack-cli
随着css工程化的普及，sass在前端工程中越来越举足轻重。当然sass并不局限于管理css全局变量、mixin之类的"脏活累活"。
CSS3之前的CSS都大都是枚举属性样式，而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用，让CSS的编程黯淡无光，Sass就是一种增强CSS编程的扩展语言（CSS4也可以期待），有了像Sass这种预处理语言后，CSS的编程不再局限在枚举属性了，可以有更广阔的舞台。
1. 引言 CSS3之前的CSS都大都是枚举属性样式，而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用，让CSS的编程黯淡无光，Sass就是一种增强CSS编程的扩展语言（CSS4也可以期待），有了像Sass这种预处理语言后，CSS的编程不再局限在枚举属性了，可以有更广阔的舞台。 2. Sass的原理 Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能，让CSS编程变得异常强大。 当然浏览器是不认识Sass语法。开发人员写完了Sass的
虽然使用SCSS拥有上面的众多好处，但是我们在项目中选择使用SCSS还是CSS，是根据项目的需求、性质和个人偏好来决定的。如果我们在一个样式需求较小的小项目上工作，普通CSS可能就已经能够满足了我们的项目需求了。但是如果是遇见更大、更复杂的项目，使用SCSS可以为我们提供更多优势，有助于更高效和可维护的样式工作流程。
最近公司需要给多个 webapp（大概 20+）加上多皮肤的功能，原先默认是白色皮肤，我们先从暗黑模式入手，从而逐渐实现多皮肤功能。本篇记录下实现思路。
最近公司需要给多个 webapp（大概20+）加上多皮肤的功能，原先默认是白色皮肤，我们先从暗黑模式入手，从而逐渐实现多皮肤功能。本篇记录下实现思路。
前端开发者在构建网站时需要做的一个决定是添加图片的技术。它可以是一个HTML ，或者是通过CSS背景生成的图片，也可能是SVG <image>。选择正确的技术很重要，对网站的性能和可访问性起着巨大的作用。
大家好，我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder
原文 | https://ishadeed.com/article/image-techniques/
bounded 超过word Wrap Column设置的字符数、达到视口最小宽度，则换行
目前主流的浏览器对于calc属性已经支持得非常好了.所以,我准备在我们的新项目中全面启用这个属性,省得在布局方面还得用js去实现.经过详细的布局测试,总算做出来了一个demo页面.在各个pc浏览器上没有任何问题,甚至IE9都没有问题.
本博客使用的是Hugo的LoveIt主题，本文也是基于该主题而写的，不过Hugo的美化步骤应该大同小异，版本如下：
在编写CSS代码时，我们必须在每个地方重复相同的值和颜色。变量使我们能够在单个位置定义常用值，并解决代码中重复相同值的问题。
Bootstrap 是一个强大的框架，有助于创建响应式、以移动设备为首的网站。虽然开箱即用的 Bootstrap 样式非常出色，但在某些情况下，你可能希望进一步定制设计。这就是 Sass 的魔力发挥作用的地方，Sass 是一种预处理脚本语言，可以解释或编译成层叠样式表（CSS）。
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题 解决的问题 嵌套规则：通过花括号的方式解决复杂的css父子样式嵌套问题。 变量规则：通过变量将公告样式抽离，减少冗余css代码。 提交逻辑 ：可以像高级语言一样编写逻辑性的css代码
在上一篇文章中 -- 现代 CSS 之高阶图片渐隐消失术，我们借助了 CSS @Property 及 CSS Mask 属性，成功的实现了这样一种图片渐变消失的效果：
node-sass需要python环境，可以选择手动安装python或者安装node的同时安装附带的编译工具
一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题，但是主题定制需求永远都存在，所以组件库一般都会允许使用者自定义主题，我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的，新体系下还做到了动态换肤，因为皮肤本质上是一种静态资源（CSS文件和字体文件），所以只需要约定一种方式来每次动态请求加载不同的文件就可以了，为了方便这一需求，还配套开发了一个Vessel脚手架的插件，只需要以配置文件的方式列出你需要修改的变量和值，一个命令就可以帮你生成对应的皮肤。
这里就讲讲这两个问题，写过 CSS 应该就会比较清楚，虽然我才刚入门，但在写一些练手时就已经有点感觉了：写 CSS 后，很难维护，维护基本要靠注释来，而且由于 HTML 文档中标签的嵌套层次复杂，导致写 CSS 的选择器时也很费劲，尤其是在后期为某部分标签新增样式时，总会不知道到底应该在 CSS 文件中哪里写这个选择器，这个选择器是否会与前面冲突。
在前端vue2项目下，如果直接像普通css那样使用meidia query，是不起作用的
在HTTP/2的时代里，在你的网站里发布CSS和JS跟以前大不相同了，以下是我实践的一份建议。
原文：The State of CSS Reflections 译者：nzbin 友情提示：由于演示 demo 的兼容性，推荐火狐浏览。该文章篇幅较长，内容庞杂，有一定难度。而我本人学识有限，加之时间仓促，所翻译内容可能有不恰当及晦涩之处。欢迎大家拍砖指正。 我最近在 codePen 上看到了这个 加载程序，一个纯 CSS 制作的带有渐变反射的 3D 旋转竖条。它的制作方法是：为每个竖条创建一个元素，然后通过复制每一个元素来制作反射倒影，最后在反射倒影上添加渐变背景来制作渐隐的效果。听上去有点复杂，而且创建
CSS工作组在其官方WIKI[1]总结了这些年CSS在设计上犯的46条失误。这些错误大体可以概括为5类：
可以在github看代码，非常方便：https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
配置文档：https://cn.vitejs.dev/config/，基于ESM；
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular-cli 安装angular cli: npm install -g @angular/cli 不过首先要确保您安装了比较新版本的nodejs. 今天主要通过以下几个方面介绍Angular CLI: 生成项目 参数介绍 配置和自定义CLI 检查和修复代码 生成新项目: ng new my-app 这个命令会生成一
版权声明：本文为吴孔云博客原创文章，转载请注明出处并带上链接，谢谢。 https://blog.csdn.net/wkyseo/article/details/53309416
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
