2024-01-25 10:01:05
593
928
1.1.1.记点：sass-loader：把 sass编译成css, node-sass：nodejs环境中将sass转css。1.1.安装sass-loader/node-sass(前者依赖于后者)_vue安装scss
2024-06-06 00:06:50
781
246
一个网站的换肤效果算是一个比较常见的功能，尤其是在后台管理系统中，我们几乎都能看到他的身影，这里给大家提供一个实现思路。_vue3换肤
2024-06-06 00:06:47
227
459
Sass（Syntactically Awesome Stylesheets）是一种成熟且功能强大的CSS预处理器。Sass有两种语法格式：缩进格式（.sass）和SCSS格式（.scss），其中SCSS更接近原生CSS，易于学习和迁移。_scss和sass和less选择
2024-05-29 10:05:28
109
148
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
2024-05-26 01:05:38
844
834
@apply 是 CSS 中的一个功能，它允许您将一组样式规则应用于一个选择器。这是一种实验性质的功能，并非所有的 CSS 解析器都支持它，特别是当你使用 PostCSS 和一些Unocss/Windcss/Tailwind CSS工作时。 在 VSCode 中遇到 Unknown at rule @applyscss(unknownAtRules) 的信息，可能是因为您的编辑器或其内置的 SCSS Linter 并不识别这一规则。_unknown at rule @applyscss(unknownatrules)
2024-05-23 20:05:46
220
29
vue3 vite elementPlus项目，css预处理文件使用scss嵌套写法导致深度选择器deep失效_scss deep
2024-05-14 22:05:39
581
865
scss、vue-router、pinia、axios、element-plus、eslint、prettier、vite-plus-svg-icon等插件及配置_vite项目axios获取項目中的本地数据ts方法
2024-05-13 11:05:44
1003
471
7、运算符的使用：在Less中，可以使用加减乘除等运算符来进行数值的计算，例如：@width: 100px;4、继承和实现 在 Less 中，通过 extend 关键字来扩展样式，而 SCSS 使用 @extend 关键字来实现样式的扩展。但是，在Less中，导入的文件必须是以.less为后缀名的文件，而在SCSS中，导入的文件可以是以.scss或者.sass为后缀名的文件。5、注释：在Less中，注释使用//或者/* /的方式，而在SCSS中，注释只能使用/ */的方式。_scss和less区别
2024-05-13 11:05:40
1037
615
主要介绍Vue3中的新增的v-bind()的常用使用方式，主要包括在csslessscss。_scss v-bind @if
2024-05-13 11:05:23
967
772
mixin混入可以用于定义重复使用的样式，比如下面CSS代码我们可以发现，.header和.footer存在相同重复的样式定义，此时SCSS可以将这段重复样式提取到混入@mixin中，再在.header和.footer中通过@inclue引入混入样式。_scss @include
2024-05-12 17:05:41
477
242
开发中经常会用到深度选择器来修改第三方组件库等子组件的样式，这时候就用到样式穿透(style Penetration)而使用/deep/修改时报SassError: expected selector. 原因是sass不支持这个选择器。使用中发现了一个问题，就是当在父组件使用了v-deep修改自身组件或者第三方组件样式时，会影响到子组件中的样式，样式穿透的方式有：>>>、 /deep/、::v-deep这三种。使用>>>修改无效，原因是scss等预处理器却无法解析>>>第三种，使用::v-deep，_scss穿透
2024-05-10 08:05:41
164
908
npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! node-sass@9.0.0 postinstall: `node scripts/build.js`npm ERR! Exit status 1npm ERR!node 和node sass版本问题_npm err! code elifecycle npm err! errno 1 npm err! node-sass@9.0.0 postinsta
2024-05-09 10:05:32
1010
387
以上两种方式正常情况下使用都没有问题，但在scss，less，sass等解析器中，>>>，/deep/可能都无法使用，这种情况可以采用 ::v-deep。在开发过程中，可能会遇到scss中样式不会执行，这时候我们就会用到深度选择器 /deep/在/deep/ 使用以上写法编译时，出现报错或者警告可以使用 ::v-deep。通常情况下，写样式穿透都是用 >>> ，或者 /deep/_scss深度选择器
2024-05-07 13:05:27
492
721
今天想在项目中，使用一个全局生效的自定义scss变量。看看整个项目的scss引入，创建了一个main.scss文件，然后在main.js中导入了。_[plugin:vite:css] [sass] undefined variable.
2024-04-29 12:04:21
809
622
css预处理器scss的使用&&如何全局引入目录scss 基本功能1、嵌套2、变量 $3、@mixin 和 @include4、@extend5、@importscss 在项目中的使用1、存放 scss 文件2、引入 variables 和mixins2-1、局部引入2-2、全局引入3、入口文件中引入其他文件_scss引入scss
2024-04-29 12:04:53
760
337
web实现主题换肤方案有很多种，例如css变量、动态加载样式文件、js变量。目前流行工程化开发自然少不了css预处理（less/scss）方案，这也是目前在脚手架项目中比较流行实现方案。less/scss实现主题换肤本质就是动态切换节点某个变量，这个变量可以是HTML标签属性值也可以是类名，这个变量位置既可以是最顶层也可以是需要换肤地方（子节点）。变量如果是类名的话需要设置一个独一无二的名称，这个我们无法保证后面开发一不小心类名被重复了特别是团队协同开发，所以更好的选择变量是属性值。//顶层方案。_scss实现主题切换
前端知识
vue2bug解决：in ./src/views/install/data-base/scss/menu.scss Module Warning (from ./node_modules/postc
2024-04-29 12:04:39
88
438
从给出的警告信息来看，问题似乎与CSS属性start有关这个属性在某些浏览器中可能不受支持，因此建议你使用flex-start代替。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。_module warning (from ./node_modules/postcss-loader/src/index.js):
2024-04-29 12:04:15
535
449
然后在样式规则中使用这些变量。这样可以提高代码的可维护性和可读性，因为你只需要在变量的声明处修改值，就能够在整个样式表中生效。这种方式使得你能够在整个项目中维护一组共享的变量，使得样式表更加一致和可维护。请注意，SCSS 中的变量是动态的，可以随时更改其值。这使得在整个样式表中共享和重用值成为可能。这样的文件来存放共享的变量，然后在其他文件中引入这个文件。这样，你就可以在这两个文件中使用相同的变量。要在 SCSS 中创建变量，可以使用。在上述例子中，我们定义了两个变量。文件包含了共享的变量，然后在。_scss 使用变量
2024-04-22 09:04:18
307
611
标签中使用的是SCSS语法编写的样式。SCSS是Sass（Syntactically Awesome Stylesheets）的一种语法，它是一种CSS预处理器，提供了许多有用的功能，如变量、嵌套规则、混合宏等，这些功能可以使CSS的编写更加简洁和强大。，编写普通的CSS代码也是完全没问题的，这使得你可以灵活地决定何时使用SCSS的额外特性。标签中写CSS时，这些CSS代码将按照常规CSS的方式工作，同时你也可以利用SCSS提供的额外功能，如变量、嵌套规则、混合宏等，来增强和简化你的样式编写。_lang="scss
2024-04-07 08:04:31
367
689
是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，_uniapp scss变量修改
2024-04-05 09:04:29
205
669
Vue3引入SCSS的执行命令npm i sass sass-loader --save-dev配置全局变量，_vite vue3使用scss
2024-03-21 15:03:23
467
768
周末愉快呀！一起来学一点简单但非常有用的css小知识。 最近在一个项目中看到以下css class写法。_scss 循环
2024-03-12 01:03:41
782
548
闲来无事搞个排班排课表，之前貌似遇到过这类的需求，只不过没做上。主要用的就是FullCalendar插件。基于vue框架写法。基本的功能可以新建个日程看看样式，可以拖拽日程进去。提示：以下是本篇文章正文内容，下面案例可供参考以上就是实现简易排班排课表的雏形啦，复杂的功能还是要基于数据啦，静态只是看看大概。先说这么多，后面有坑我再写；以及后面看看能不能再加上些好玩的功能。_fullcalendar
前端知识
版本冲突error in ./src/styles/element-variables.scss：Node Sass version 9.0.0 is incompatible with ^4.0.0
2024-03-02 09:03:38
337
183
出现这个问题的原因就是可以在报错中看到我们当前的sass版本是9.0.0的，和项目中需要的4.0.0的不一样，就导致了冲突，那必须要同步一下，要么改项目里面的sass版本，要么把当前的sass版本改为项目需要的。这里我选择把自己的sass降级改为项目中需要的4.0.0版本。在运行项目的时候出现了这个问题，一开始是因为没有sass，使用命令下载了sass后又报了这个错误。然后再去运行项目就可以了。卸载原来安装的sass。_node sass version 9.0.0 is incompatible with ^4.0.0.
2024-03-01 12:03:21
58
195
ElementUl 中时间线Timeline 的样式优化（左右分布)_elementui时间线样式
2024-02-29 12:02:32
477
60
scss、css样式中使用变量的方法；Vue动态改变css等样式文件中的变量_vue动态修改scss变量
2024-02-27 11:02:25
146
499
带热更新的多页面可模块化的脚手架工具、请求同时支持SEO和AJax、支持SCSS编写
2024-02-14 09:02:56
677
14
include。_scss @function
2024-02-13 10:02:08
681
196
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。 CSS3 的新特性如下： ● 新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。 ● 新增了更好的视觉效果，例如：圆角、阴影、渐变等。 ● 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。 ● 新增了全新的布局方案 —— 弹性盒子。 ● 新增了 Web 字体，可以显示用户电脑上没有安装的字体。 ……
2024-02-09 20:02:36
144
118
SASS是标准，SCSS是语法SCSS的本质就是SASS CSS，他使用css的语法来完成sass的功能相当于在css的原有的基础上面扩展了4个基础核心点$a:red;一般来说，我们为了更好的理解，我们会用小括号将值包裹起来//对象的定义上面的代码进行遍历，最终生成如下结果之前的数组定义是一样的，数组的定义就是set的定义之前的对象的定义是一样的，对象的定义就是map的定义.box1{
2024-02-08 15:02:40
636
202
网格布局也称grid布局，利用grid布局可以很轻松的实现很多的网页布局，Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。上图这样的布局，就是 Grid 布局的拿手好戏。_前端 网格布局
2024-02-03 12:02:37
1004
821
Sass 是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！在日常项目开发过程中使用非常广泛，今天主要讲一下 Vite Vue3 项目中该如何全局引入 scss 文件，引入混合 mixin 文件的不同配置。捎带说一下 Vue2 中的引入方式做一下简单的对比。如下图，src 目录下新建 styles 目录，并在目录中创建三个 scss 文件：• reset.scss 全局元素样式重置文件 主要用于清除 HTML 元素默认样式用，随便去一个大厂页面下 copy 一下就行/***,*:after,_vite scss
2024-01-31 12:01:37
904
150
前端实现动态切换主题色-使用 css/less 动态更换主题颜色（换肤功能）或通过单击更改背景颜色CSS中原生变量“--”和var()使用纯CSS控件切换主题颜色或通过单击更改背景颜色，_css背景颜色切换
2024-01-29 14:01:04
54
270
如果是class 名，可以这样写 ，当要选择的c是连续的可以 用 号，不连续的必须用 ~如果是获取子元素的第一个，不区分class 可以用 first-child。_css 第一个class
2024-01-29 14:01:42
488
106
请记住，这些配置可能需要根据你的具体项目需求进行调整。如果你使用的是如 Create React App 或 Next.js 这样的构建工具，它们可能已经内置了对 Sass 的支持，你可能不需要手动更改 Webpack 配置。如果你想使用 CSS Modules（这允许你将 CSS 类名局部化，以避免全局冲突），你可以调整。如果你想将 CSS 提取到单独的文件中，而不是将它们注入到 JavaScript 中，你可以使用。文件中，你需要添加一个规则来告诉 Webpack 如何处理。的替代品，更快且更可靠）。
2023-05-14 16:05:03
566
366
什么是HTML： HTML是Hyper Text Markup Language的缩写，即超文本标记语言（所谓超文本可以理解为具有超能力的文本），是一种解释性语言，用于制作网页界面，使用该语言编写的网