作者：fengshi123前言Sass是css3语言的扩展，它能帮你更省事地写出更好的样式表，使你摆脱重复劳动，使工作更有创造性。因为你能更快地拥抱变化，你也将敢于在设计上创新。你写出的样式表能够自如地应对修改颜色或修改html标签，并编译出标准的css代码用于各种生产环境。Sass语法比较简单，难点在于如何将Sass运用到实际项目中，解决css存在的痛点，从而提高我们效率。经过实际项目
你是否曾经为组件设计过样式，却只知道应用了不需要的CSS规则?也许你会重新考虑CSS的另一个部分，所以规则不适用，或者你会添加!important规则，只是为了让它发挥作用。这就是CSS Modules要解决的问题。让我们看看CSS Modules的官方定义：A CSS Module is a CSS file in which all class names and animation name
转载
2024-05-29 10:09:32
168阅读
SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件目录 一、变量 二、嵌套 三、引入 四、混合 五、继承 六、if / else / each /for 七、插值、注释 一、变量1、变量以 $ 开头，用来存储一些在css中需要复用的参数； 2、变量存在作用域
转载
2024-04-02 13:34:32
73阅读
Webpack: CSS 到 Sass/Scss 与 CSS Module 文章目录Webpack: CSS 到 Sass/Scss 与 CSS Module前言正文1. 在 JS 中引入 CSS：style-loader、css-lodaer2. 从 CSS 进阶到 SCSS：sass-loader + node-sass3. CSS Module 实现命名空间隔离：css-loader3.1
转载
2024-09-06 00:20:15
51阅读
简介1. Sass 和 ScssSass 和 Scss 其实是同一种东西，我们平时都称之为 Sass；Scss 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 Scss文件。两者之间不同之处有以下两点：文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”
转载
2024-03-26 16:44:42
294阅读
预处理语言出现的背景： CSS作为一种标记语言可以很好地完成页面样式的定义，但是一些标记语言固有的缺陷也限制了编写CSS的效率。要提高效率，一方面依赖工具，比如编辑器的自动补全；另一方面要依赖于语言本身的改进，但是由于CSS和浏览器以及互联网上的历史数据
基本思想：在html上添加data-theme属性通过对应的属性值切换不同的配置，使用data-theme时关于主题切换的这些事，网上已经有很多文章记录了，基本想法都是差不多的，在此，仅记录我自己使用的方法。设置的主题有三种:1.默认即白天主题 2.暗色主题 3.自定义主题，即自己选择颜色，我们在这先实现主题的切换。theme 主题切换config配置调整使用theme.scss文件，需要调整co
转载
2024-05-01 08:16:52
287阅读
文章目录一、scss概述二、安装Sass编译器三、SCSS语法细则（一）、注释（二）、数据类型（三）、变量（四）、占位符（五）、嵌套（六）、函数（七）、插值（八）、选择和循环结构（九）、样式混入 @mixin 和 @include指令（十）、@import指令（十一）、@extend指令四、Bootstrap定制五、相关文档推荐 一、scss概述1.动态样式语言：也称为预编译样式语言，指在CSS
转载
2024-10-17 21:33:49
143阅读
最近在做的项目使用到了主题切换，我也趁此机会学习了一下SCSS/SASS这门CSS编译型语言，特此研究并带实现一个Vue Demo中实现主题切换。SCSS是SASS兼容CSS的版本，本文内全部使用SCSS一称。✏️大体思路如下：1.使用vuex全局执行命令切换主题 (state - mutations 无须异步)2.遍历主题色并设置混合，在需要的地方插入混合，使用方法查找对应颜色，生成嵌套，写全局
转载
2024-09-14 19:28:29
580阅读
目录一、页面布局整体思路二、盒子模型1.盒子模型2.边框border3.表格的细线边框border-collapse4.边框会影响盒子实际大小5.内边距padding6.外边距margin7、水平布局8、垂直布局9、外边距的折叠10、浏览器默认样式11、盒子大小box-sizing12、轮廓阴影和圆角①轮廓outline②阴影box-shadow③圆角border-radius三、浮动1、浮动（f
看起来这是未实现的，截至本文写作时：这是现在执行：CSS @import指令Sass现在更加明智地将@import指令编译为plain> CSS。 以下任何一种情况都会导致文字CSS @import：>导入一个.css扩展名的路径(例如@import“foo.css”)。导入一个媒体类型的路径(例如@import“foo”screen;)。导入一个HTTP路径(例如@import“ h
转载
2024-02-28 17:02:25
158阅读
首先，学会使用sass：1.先下载和安装node-sass和一些加载器$ cnpm install sass-loader node-sass vue-style-loader --D2.配置webpake加载器:webpack.base.config.js //从这一段上面是默认的！不用改！下面是没有的需要你手动，相当于是编译识别sass!{ test: /\.scss$/, loaders
转载
2024-04-20 21:00:07
104阅读
安装：npm install sass引入：import ‘...sass||...scss’一．介绍：sass是对css的扩展，让css语言更加强大，优雅。它在css语法的基础上增加了变量，嵌套、混合、导入等高级功能。二．功能介绍：1.定义变量1>变量的使用:变量以美元符号$开头，赋值方法与css属性的写法一样（如下） 全局变量，局部变量（如图）（图1全局
转载
2024-05-17 16:32:38
659阅读
首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS那么SCSS和SASS 有什么区别
## Javascript 修改某个class的某个属性
### 概述
在Javascript中，我们可以通过修改某个元素的class的属性来改变其样式。本文将介绍如何使用Javascript实现这一功能。首先，我们将展示整个过程的流程图，然后逐步介绍每一步需要做的事情。
### 流程图
```mermaid
flowchart TD
Start(开始)
Step1(选择目标元
原创
2023-11-23 04:25:09
1753阅读
转载
2020-12-24 12:00:00
2205阅读
2评论
[Sass]命令编译命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入：单文件编译：sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css这是对一个单文件进行编译，如果想对整个项目所有 Sass 文件编译成 CSS 文件，可以
转载
2024-10-19 08:50:26
14阅读
我们平时都称之为 Sass，其实可分成sass和scss， 其中Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(?，以“.sass”后缀为扩展名；而 SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的语法书写和我们的 CSS 语法书写方式非常类似，较为宽松，以“.scss”后缀为扩展名；二者可以说是一个东西sass嵌套选择器嵌套这里的
已经用了scss很久了，有时间来归纳一下。 目录1. 基本用法1.1 变量1.2 计算功能1.2.1 数字运算1.2.2 颜色值运算1.2.3 字符串运算1.2.4 布尔运算1.3 嵌套1.4 注释 /* */ 与 // (Comments: /* */ and //)2.代码的重用2.1 继承@extend2.2 混合指令 @mixin2.3 插入文件 @import3.1 循环语句3.2 自定
转载
2024-06-23 13:49:01
366阅读
Sass 支持所有的 CSS3 @-Rules，以及 Sass 特有的 “指令”（directives）1.@import@import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。通常，@import 寻找 Sass 文件并将其导入，但
