scss

我有一棵树

前端开发中 SCSS 变量与 CSS 变量的区别与实践选择，—— 两种变量别混为一谈在 Vue 或任意前端项目中，我们经常同时使用 SCSS 与 CSS 变量。它们的语法相似，但工作原理完全不同。

分享并记录日常开发中的一些CSS布局和样式技巧（持续更新）日常开发中，会经常遇到一些设计常见，但实现方案是较为小众的需求，包括但不局限于万能居中、宽度自适应、布局自适应等。本文就结合日常开发中的实际案例进行分享并记录这些css技巧，并会持续更新。

SCSS 中的Mixins 和 Includes，%是什么意思SCSS 中的 @mixin 指令允许定义可以在整个样式表中重复使用的样式，而 @include 指令用于将这些混入（mixin）引入到文档中。

vue3 样式 css、less、scss、sass 的说明原生CSS:浏览器原生支持，无需额外处理缺少编程特性（变量、嵌套、混合等）Less:使用JavaScript实现

Vue + Vite + Element UI 实现动态主题切换：基于 :root + SCSS 变量的最佳实践在实际项目开发中，我们经常会遇到这样的需求：全局统一管理主题色，并且希望能动态切换主题色（比如黑暗模式 / 品牌色切换）。

预处理器Sass/Scss、Less 的区别，项目中写法在 Vue 项目中，Sass/Scss 和 Less 均为常用的 CSS 预处理器，核心作用是通过「变量、嵌套、混合、函数」等特性简化 CSS 编写、提升可维护性，但二者在语法设计、生态支持、功能细节上存在差异，以下从核心区别和 Vue 项目中的具体写法两方面详细说明：

Sass 常用语法记录总结下sass在开发过程中常用的语法作用：存储复用值（颜色、字体、尺寸等），便于统一修改。语法：使用 $ 定义变量，支持全局 / 局部作用域。

基于BEM规范实现ElementPlus组件BEM (Block Element Modifier) 是一种前端 CSS 类名命名方法论，由俄罗斯 Yandex 团队提出。它通过特定的命名规则来组织代码，提高代码的可维护性和可复用性。

记一次uniapp微信小程序开发scss变量失效的问题如图所示，这是解决问题后的效果图，没解决之前红框框里面的这个搜索组件背景是白色的，这个组件使用的是京东nutui-uniapp的nut-searchbar，类名为nut-searchbar，在类下面定义了nut-searchbar背景颜色变量为橙色，浏览器上显示没问题，但微信小程序上显示依然为白色，原因是因为微信小程序样式穿透有所不同，加上穿透就好了（::v-deep)

scss 转为原子css unocss记录让c4 从scss 转为原子css unocss保留语义化的 SCSS 类名，内部使用 @apply 指令应用 UnoCSS：

vue样式问题全局子组件，引入到页面中，页面中关于子组件样式的重写不生效的问题，比如全局头部组件src/components/HHeader.vue，然后在登录页login.vue中引入了这个头部组件

你挚爱的强哥

SCSS上传图片占位区域样式

路灯下的光

用scss设计一下系统主题有什么方案吗在了解方案前，我们多多少少应该见过这样类型的样式--primary-color，这个是什么东东？其实它就是一个css变量，也可叫css自定义属性，它是一种css规范，它一般定义在样式类里，如下

狂炫一碗大米饭

每个前端开发人员都应该知道的 6 大 CSS 框架作为前端最烦恼的莫过于css了，它“看似简单、结果复杂”，还牵扯到浏览器机制、全局作用域、兼容性、可维护性等等。而且UI库和框架实在太多了。你会选择Tailwind CSS、MUI、Bootstrap、SCSS，还是原生 CSS？

【CSS】动态修改浏览器滚动条宽度在线效果演示欢迎 Star 👏🏻 github 地址⚠️ 注意：width 和 height 实际只有一个维度起作用，另一个是冗余的。

胡西风_foxww

如何在nuxt项目中使用scss在Nuxt.js中使用SCSS非常方便，无论是Nuxt 2还是Nuxt 3都有良好的支持。以下是详细的配置和使用方法：

天下无贼！

【自制组件库】从零到一实现属于自己的 Vue3 组件库!!!项目准备：node >=19、pnpm >=8介绍：初始化UI组件库是为了更好的管理文件模块的目录结构，区分不同文件模块的功能。

uniapp使用uni-ui怎么修改默认的css样式比如多选框及样式覆盖小程序/安卓/ios兼容问题在 uniapp 中使用 uni-ui 的 uni-data-checkbox 组件时，可以通过以下几种方式修改其默认样式：

前端常说的 SCSS是个啥玩意？一篇文章给你讲的明明白白！我们在使用脚手架 Vue cli 或者 Vite 创建 Vue 项目的时候，会发现在 css 样式标签那里有一个 lang="scss" 的属性，那 scss 是什么玩意?

微信小程序中scss、ts、wxml它的功能类似于 HTML，主要用于搭建页面的结构。借助各种组件标签，像 <view>、<text>、<button> 等，就能构建出小程序的界面。并且，它还支持数据绑定、条件渲染以及列表渲染等功能。