scss
scss小技巧-创建公用的 hover 和 active mixins
在日常的项目开发中，我们经常会遇到需要对元素跟:hover 和 :active 有交互的情况。在多处写类似的代码既繁琐又容易引起代码冗余。那么我们如何解决这个问题呢？ 当然，想象一下如果能有一种方法，让你在定义样式时只需写一次，又可以在任何需要的地方重用，会是多么理想。 首先，我们先来看看一段普通的 ......
scss样式穿透>>>或/deep/或::v-deep
参考：https://www.jianshu.com/p/7f38b0aa6fb7 <style scoped>.menuItem { //常用方式1，2 >>> .ant-input { border-radius: 50px; } /deep/ .ant-input { font-size: 1 ......
Why I see scss file in my chrome inspector?
Why I see scss file in my chrome inspector? Because there are map files in your CSS folder like *.css.map and *.scss.map. It basically reverse maps th ......
记录一下vue如果全局引入scss变量
开始 首先一些普通的css，可以在App.vue中引入 然后项目中会经常用到一些功能型的scss，比如mixin，和函数等，这个时候在main.js 和app.vue 是无效的。 首先查看自己的 sass和sass-loader版本，注意sass-loader的安装版本,如果是v8的版本使用prep ......
脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
本文所有内容，纯属个人观点，无意与任何人争论 前端技术的现状 我觉得前端技术发展到现在有两个最主要的特征 前端工具链为前端工程化提供了强有力的支持 这方面主要是webpack、rollup、esbuild等工具产生的价值，当然还有背后的Node.js。 这些工具让前端开发者可以更从容的开发大型前端项 ......
scss 的 @each指令
实例代码 1 $numArray: 10, 20, 30, 40; 2 @each $propKey, $propVal in (m: margin, p: padding) { 3 @each $directionKey, $directionVal in (t: top, r: right, b ......
vue项目中安装scss
1、安装node-sass、sass-loader 简化内容，具体版本等注意事项在下面。（node官网：GitHub - sass/node-sass: :rainbow: Node.js bindings to libsass） //默认安装最新版本 npm install node-sass - ......
scss 通过for循环动态创建多个class
项目中有些全局的.scss文件中一些关于设置width的class，如下： .w50{ width:50px; } .w60{ width:60px; } .w70{ width:70px; } .w80{ width:80px; } .w90{ width:90px; } .w100{ width ......
在Vite项目中使用scss创建全局变量
配置 这个也就是配置全局scss的过程，在vite.config.ts的defineConfig中添加属性，其中additionalData为scss中引入文件的书写方式： // scss全局变量的配置 css: { preprocessorOptions: { scss: { javascript ......
scss基础
官网 https://www.sass.hk/guide/ 变量 导入SASS文件 静默注释 混合器 选择器继承 style选项 if 指令 for 循环 each 循环 while条件 function 函数 文件后缀 sass有两种后缀名文件： 后缀名为sass，不使用大括号和分号 后缀名为sc ......
智能座舱感知系统SCSS
智能座舱系统级解决方案具备感知能力、呈现能力和处理能力，包含摄像头模组、麦克风、活体检测（毫米波雷达）、 氛围灯、流媒体后视镜、增强现实抬头显示、智能座椅、域控制器等部件，可深度融合 ADAS、TBOX、车身、高精地图等 信息，打造一体化智能座舱解决方案。 ......
媒体查询+scss 响应式开发
```bash $color:#3497ee; @mixin opacity($value) { opacity: $value; filter: alpha(opacity=$value*100); } @mixin transition($obj, $time) { -webkit-transi ......
10scss的引入
10.06 1.npm（node的包管理器） npm i name -g（全局安装的）-s（加与不加的效果一样）-d（局部安装）npm install/uninstall/update 2.vite.config.js里配置 css: { // css预处理器 preprocessorOptions ......
Vue在main.js全局引入scss文件，组件里使用scss变量报错问题
问题描述 在写组件样式的时候，普通样式都没问题，一碰到$变量就error Module build failed (from ./node_modules/sass-loader/dist/cjs.js): color: $normal-active-color; ^ Undefined varia ......
sass_scss_less
title: Sass(Scss)、Less的区别与选择 + 基本使用 tags: [CSS, Sass, Scss, Less] categories: 可回收物 keywords: css,sass,scss,less description: Sass(Scss)、Less的区别与选择+基本使 ......
vue项目中全局引入cass（scss）变量和sass（scss） mixin
1、使用场景 variable.scss文件样例 // 颜色定义规范$color-background: #222;mixin.scss文件样例 // 背景图片@mixin bg-image($url) { background-image: url($url + "@2x.png"); @medi ......
前端命令——编译文件ts scss sass 等
## 1. 安装 ```bash npm install -g typescript ``` ```bash tsc --initÏ ``` ## 2. 使用方法 ### 2.1、将ts文件转化为js ```bash tsc index.ts ``` 会自动生成对应的index.js文件 ### 2 ......
webpack5_使用webpack编译scss文件为css文件并实现css文件的兼容性和压缩处理
## webpack5_使用webpack编译scss文件为css文件并实现css文件的兼容性和压缩处理 - 现实问题: 为了编写博客园的博客样式, 我写了一个scss文件, 但是因为博客园的样式编辑里只接受css样式, 所以乘此机会顺便复习一下webpack5实现对scss(sass)文件的处理 ......
SASS/SCSS预处理器的高级特性和应用案例
SASS/SCSS是一种CSS预处理器，它可以简化CSS的编写和维护工作，并且提供了许多高级特性和功能。本文将介绍SASS/SCSS的一些高级特性和应用案例。 ![SASS/SCSS预处理器的高级特性和应用案例](https://img2023.cnblogs.com/blog/3261805/20 ......
关于less、scss声明变量、继承
less 继承得属性要放在最外面不然找不到 用@名字声明变量 scss 继承得属性可以放在里面，也可以放在外面 用$名字声明变量 ......
hubildx配置scss编译
插件市场安装好sass后打开hbuildX:如下操作，找到这个文件位置修改对于文件属性即可。 "--output-style", "compressed" 含义是：生成的CSS文件为压缩风格。 "onDidSaveExecution": true 含义是：当保存SCSS文件的时候，就会自定编译成CS ......
scss 常用操作
# scss 使用说明 ### 1、变量声明 variables ```scss $my-color: #1269b5; // 定义变量 $my-border: 1px solid $my-color; // 变量中也可以使用变量 div.box { background: $my-color; } ......
vue lang="scss" scoped 样式穿透的规则
1：外层容器 ::v-deep 组件 { }2： ::v-deep 组件 { }3： ::v-deep { & 组件{ } } ......
Scss 列表逐一淡出效果
# 界面结构 ```html file:MenuList.vue/template 回到顶部 我的标签 随笔分类 文章分类 随笔归档 文章归档 我的相册 我的日历 ``` 这里通过一个布尔变量控制 class `close-menu-body` 和 `open-menu-body` 之间的切换。 这 ......
SASS(scss)
# Scss ## 1.认识Scss > Sass 支持两种不同的语法，每个都可以加载另一个。 scss其实是`Sass`的一种语法。SCSS 语法使用`.scss`文件扩展名 。除了一些小的例外，它是CSS的超集，这意味着**基本上所有有效的CSS也是有效的SCSS**。 `scss`示例： `` ......
vue配置scss全局样式
1. 安装插件 ```shell npm install sass --save-dev ``` 2. 在src文件夹下创建`styles`文件夹,并创建以下文件 ` 函数。`mergeAll()` 函数是一个 JavaScript/TypeScript 中的数组操作方法，用于将多个数组合并为一个数组。它不是 SCSS 或 Sass 的特定功能。 ![在这里插入图片描述](https://img-blo ......
SCSS无法导出（:export）
# 报错 学习`scss`时，想用`scss`文件管理一片区域的颜色，需要在``中引入`scss文件`。 但在实际使用时，并没有导出属性。 ``` -- sidebar.scss 文件内容 $menuBg:#304156; :export { menuBg: $menuBg; } ``` **Con ......
uniapp主题切换功能的第二种实现方式（scss变量+require）
在上一篇 “uniapp主题切换功能的第一种实现方式（scss变量+vuex）” 中介绍了第一种如何切换主题，但我们总结出一些不好的地方，例如扩展性不强，维护起来也困难等等，那么接下我再给大家介绍另外一种切换主题的方法“scss变量+require”的方式 ......