rd-text { font-size: 30px; l
原创
2021-07-12 17:47:18
206阅读
操作函数1、for循环@for … from … through@for $var from <start> through <end> // 范围包括<start>和<end>的值1@for … from … to@for $var from <start> to <end> // 范围包括<start>,不包括
转载
2024-06-05 11:01:02
586阅读
& 用在嵌套的scss代码里，来引用父元素.dashboard { &-container { margin: 30px; l
原创
2022-04-12 16:14:45
179阅读
vue3+vite项目引入SCSS及使用SCSS全局变量场景：vue3+vite项目引入SCSS—安装安装 scss :vue3 好像不需要再使用 node-sassnpm i sass sass-loader --save-dev安装至 开发依赖 即可在 vite.config.js 中配置 scss 的全局变量 使用需要在 项目 文件中 先 创建 全局变量 文件目录为：@/assets/sty
npm install sass-loader node-sass --save-dev
原创
2022-05-30 11:58:08
1067阅读
一、Scss
1.CSS有几个缺点
• 语法不够强大，没有变量和合理的样式复用机制
• 使得逻辑上相关的属性值必须以字面的形式重复输出，难以维护
• 动态的样式语言为css富裕了动态语言的特性
• 极大的提高了样式语言的可维护性
常见的样式语言：
1.scss/sass（scss兼容sass,scss更接近css的语法格式）
2.stylus
3.less
动态语言------css预处理-
We'll define the color palette and create the basic screen styles for our project in addition to Sass helpers for our form design system.We will set up Sass variables for the initial them and learn ho
转载
2021-03-03 12:51:14
829阅读
2评论
定义和用法：overflow属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为scoll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。 overflow属性值1、visible：默认值。内容不会被修剪，会呈现在元素框之外。2、hidden：内容会被修剪，并且其余内容是不可见的。3、scroll
转载
2024-02-26 19:19:59
81阅读
新建通用common.scss 引入 这样，就不用重复的写SCSS了。
原创
2021-08-05 16:17:55
2102阅读
安装：npm install sass引入：import ‘...sass||...scss’一．介绍：sass是对css的扩展，让css语言更加强大，优雅。它在css语法的基础上增加了变量，嵌套、混合、导入等高级功能。二．功能介绍：1.定义变量1>变量的使用:变量以美元符号$开头，赋值方法与css属性的写法一样（如下） 全局变量，局部变量（如图）（图1全局
转载
2024-05-17 16:32:38
659阅读
// !default 前面声明了，后面再声明就没用了
原创
2022-10-09 19:01:23
70阅读
[TOC] 1、回顾gulp的使用方法 2、sass语法 2.1 css的编译模式 css 普通 sass / scss 高效 // less 高效 2.2 sass介绍 来源： ruby语言 基础的版本，后缀名为sass：没有{},只能通过缩进来实现 可读性差、难以维护 .scss 后缀 可读性高
原创
2022-07-22 14:49:08
175阅读
1. @mixin、@extend优缺点:①. @minxin相对@extend更可控.
②. 更易减少复杂度:
a. @mixin可以多层嵌套和传入参数
③. 性能:
a. 当被正确的使用@extend会生成更少的CSS是正确的,但是对于性能,mixins的性能更好:
(1). 源文件@extend会更小
(2). gzip压缩@mixins会更小
原创
2023-11-28 10:33:40
89阅读
首先，学会使用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阅读
这些 @import 后面的波浪号 ～ 是什么含义？@import '~@spartacus/styles';@import '~bootstrap/scss/functions';@impor
原创
2022-05-19 09:38:10
117阅读
[TOC] 1、回顾gulp的使用方法 2、sass语法 2.1 css的编译模式 css 普通 sass
原创
2023-03-24 20:10:44
152阅读
一、描述 1. CSS 指层叠样式表 (Cascading Style Sheets) 2. Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。 Sass 是一款强
转载
2024-04-18 14:31:39
330阅读
你是否曾经为组件设计过样式，却只知道应用了不需要的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阅读
Jerry 之前的文章.scss 文件里的特殊符号 - % 百分号和 $美元符号
原创
2022-03-16 10:03:01
100阅读
We will learn how to convert variable arguments by using rest operator in JavaScript. Scss "$shadows..." the same as "...shadows" in Javascript. inter
转载
2018-04-24 15:31:00
203阅读
2评论
