首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为SCSS代码中的BEM嵌套禁用Sublime中的粉色突出显示

在SCSS代码中,BEM(块、元素、修饰符)是一种命名约定,用于组织和命名CSS类。BEM的嵌套可以帮助我们更好地组织和管理样式,但有时候我们可能希望禁用Sublime中的粉色突出显示,以便更清晰地查看代码。

要禁用Sublime中的粉色突出显示,可以按照以下步骤操作:

  1. 打开Sublime Text编辑器。
  2. 在菜单栏中选择 "Preferences"(首选项)。
  3. 选择 "Settings"(设置)。
  4. 在右侧的配置文件中,找到或创建一个名为 "Preferences.sublime-settings"(首选项.sublime-settings)的文件。
  5. 在该文件中,添加以下配置:
代码语言:txt
复制
{
  "color_scheme": "Packages/Color Scheme - Default/Monokai.sublime-color-scheme",
  "highlight_modified_tabs": true,
  "highlight_line": true,
  "highlight_line_color": "#FF0000",
  "highlight_line_modified_color": "#FF0000"
}
  1. 保存文件。

这样,Sublime Text编辑器中的粉色突出显示将被禁用,代码将以默认的Monokai配色方案显示。

需要注意的是,以上配置是将粉色突出显示完全禁用,如果你只想禁用BEM嵌套的粉色突出显示,可以尝试使用其他配色方案或自定义配色方案来满足你的需求。

希望以上内容对你有帮助!如果还有其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

浅谈 Css 规范

BEM 是一种命名方法,能够帮助你在前端开发实现可复用组件和代码共享。...样式层级深: 由于 BEM 嵌套结构,可能导致样式层级较深,增加了 CSS 优先级和复杂度。 维护成本: 对于初学者来说,需要一定时间来适应和理解 BEM 命名规范,可能增加学习和维护成本。...独立容器和内容(即让对象行为可预测,避免对位置依赖,子元素即使离开了容器也应该能正确显示)。...SMACSS 基本概念 SMACSS(Scalable and Modular Architecture for CSS)是一种面向模块 CSS 架构方法,它提倡将 CSS 代码分解几个模块化部分...模块化: SMACSS鼓励将样式表分解独立模块,使得代码更易于理解和修改。 可重用性: 通过定义可重用样式模块,可以减少重复代码编写,提高代码复用性。

6810

如何更优雅编写CSS代码

css方面让它变得更好吧, Ps: 这不是一篇关于如何设计漂亮app文章,它是关于编写可维护和可组织css代码学习文章 SCSS 在本文示例代码我将使用SCSS编写。...SCSS是css预处理器。基本上,它是CSS超集:它添加了一些很酷特性,比如:变量、嵌套、导入和混合。我会略将下我们马上要使用特性。 变量 在scss你可以使用变量。主要好处:可重用性。...: #0099ff;// References a variable h1 { color: $primary-color; } 嵌套 你也可以使用scss进行代码嵌套: h1 { font-size...使用嵌套可以使你花费更少时间来编写复杂css选择器。 分块和导入 当涉及到可维护性和可读性上时,不可能将所有的代码都保存在一个大文件。...所有我们按如下方式编写 css 代码: 将所有的 scss 文件写入一个主文件 通过 Autoprefixercss添加浏览器供应商前缀 编译 css 文件 这将是最后步骤了,所有耐心和我一起完成吧

1.9K10

怎样才能写出更好 CSS

你可以在 SCSS 中使用嵌套。...你可以利用嵌套在更短时间内写出复杂选择器。 分块与导入 从可维护性和可读性角度来说,你无法将所有代码都保存在一个大文件。...还有更糟,假如有人想把项目拿回去,该怎么办?如果你 CSS 代码没有恰当命名,那么乍一看上去很难明白你在说什么。 BEM 可以帮助我们解决这个问题。...你必须遵守以下两条规则: 将所有内容分别写入7个不同文件夹。 将它们全部导入位于根级别的 main.scss 文件。仅此而已。 7 个文件夹: base:你可以将所有的样板代码放入该文件夹。...但是你知道更酷是什么吗?这里你设置了一个代码仓库,以帮助你迅速开始:) 如果你想知道我是如何在项目中应用这些技术,请点击这里查看 代码仓库 和 结果。希望你能通过这些例子更深入理解。

1.7K10

使用BEM命名规范来组织CSS代码

BEM 是 Block(块) Element(元素) Modifier(修饰器)简称 使用BEM规范来命名CSS,组织HTML中选择器结构,利于CSS代码维护,使得代码结构更清晰(弊端主要是名字会稍长...仅以类名作为选择器,不使用ID或标签名来约束选择器,且CSS(或者SCSS编译后CSS)选择器嵌套不超过2层,增加效率和复用性,减少选择器之间耦合度 比较常见嵌套情景:需要通过块状态对内部元素进行调整时...也需要注意嵌套层次意义,尽量按照 BEM三层来 /* 避免这样做 .search 不是一个独立块 */ .search { /* 应该把这个块提取出来 */ &-form {...可转换成设置对应 元素来表现,如 */ .search-form {} .my-img { &__search-form-logo {} } BEM 规范虽然结构比较清晰,但有时候会产生代码冗余...避免写太多重复性代码,我们要学会善于利用预编译语言(适当地使用 @include @extend 等)

96461

【编码规范】Airbnb CSS u002F Sass 编码风格指南

---- 用更合理方式写 CSS / Sass 规范代码可以促进团队合作, 规范代码可以减少 bug 处理, 规范代码可以降低维护成本, 规范代码有助于代码审查, 养成代码规范习惯,有助于程序员自身成长...如果你使用 BEM,也可以使用下划线(参见下面的 OOCSS 和 BEM)。 不要使用 ID 选择器。 在一个规则声明应用了多个选择器时,每个选择器独占一行。...给没有自注释代码写上详细说明,比如: 为什么用到了 z-index 兼容性处理或者针对特定浏览器 hack OOCSS 和 BEM 出于以下原因,我们鼓励使用 OOCSS 和 BEM 某种组合:...BEM 最初是由 Yandex 提出,要知道他们拥有巨大代码库和可伸缩性,BEM 就是为此而生,并且可以作为一套遵循 OOCSS 参考指导规范。...嵌套选择器内容也要遵循上述指引。

2.4K20

从element-ui源码来看BEM实现

饿了么前端组件库源码,想从看饿了么组件库代码入手,学习学习大厂CSS BEM规范代码书写风格。...我在element组件库mixins.scss文件中找到了想要答案。 接下来我要讲就是如何利用sass,编写具有可读性和可维护性BEM规则css代码。...#{$B} { @content; } } 为了方便大家理解代码,我现在开头贴上配置文件定义变量,而这时就能很清楚看到block生成就是基于BEM规范,块是设计或布局一部分,具有唯一地意义...,我们应该把关注点放在if和eles分支上,为什么会出现hitAllSpecialNestRule函数判断分支,原因是在修饰符或者其他mixin嵌套一个元素element,会出现修饰符在前,而元素在后编译结果...利用刚刚介绍函数,以及块、元素、修饰符实现代码,在sass已经能非常高效率并且优雅基于BEM规范代码了。

1.9K30

webpack4.0各个击破(2)—— CSS篇

本系列是笔者自己学习记录,比较基础,希望通过问题 + 解决方式模式,以前端构建中遇到具体需求出发点,学习webpack工具相应处理办法。...新解决方案:预编译语言 + 构建工具 + BEM + ACSS全局样式+CSSModule组件样式+ POSTCSS 预编译语言使用基本不变,但现代化开发已经不再需要通过预定义函数来解决单位转换或是兼容性问题...基本使用方法 3.1 常用插件及功能简述 以webpack4.0版本例来演示CSS模块处理方式,需要用到插件及功能如下: style-loader——将处理结束CSS代码存储在js,运行时嵌入...CSS代码提取独立CSS文件 optimize-css-assets-webpack-plugin——插件,实现CSS代码压缩 autoprefixer——自动化添加跨浏览器兼容前缀 3.2 webpack...");//将CSS代码提取独立文件插件 const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");/

78430

React 设计模式 0x4:样式

学习如何轻松构建可伸缩 React 应用程序:样式 # 组件样式 在每个 Web 应用程序,样式化非常重要,因为样式使其对用户非常有吸引力,并为用户提供良好体验。...在 React 中有不同方法来实现这一点。 # 样式化类型 在 React 和网站或 Web 应用程序,有不同样式化应用程序方式。...(继承) Nesting(嵌套) 可以通过以下方式安装 Sass: npm install sass 使用: /* example.scss */ .example { color: red;...# BEM BEM 是一种命名约定,它可以帮助您更好地组织样式。BEM 代表块(block)、元素(element)和修饰符(modifier),它们可以组合在一起,用于将大型界面拆分为独立块。...块(block): 用于描述,通常由类表示 在第一眼看上去就告诉我们该类表示什么 块(block)有以下规则 块可以嵌套 可以有任意数量嵌套级别

1.3K20

CSS模块化演进

一般来说,它们基于 CSS 扩展了一套属于自己 DSL,来解决我们书写 CSS 时难以解决问题: 语法不够强大,比如无法嵌套书写导致模块化开发需要书写很多重复选择器 没有变量和合理样式复用机制...Sass、LESS、Stylus 是目前最主流 CSS 预处理器,它们本质上是一种编译器。此处以 Sass 例,它支持 .scss,.sass 文件类型。...变量 $red: #f00; .body {   color: $red; } 选择器嵌套 .hello {   .world {     color: red;   } } 生成 CSS : .hello....wrap {   display: flex; } 对于这段代码,AutoPrefixer会根据 Can I use 浏览器支持数据基础,自动补全前缀,编译后代码如下: .wrap {   display...模块 可复用单元。在模块需要注意是选择器一律选择 class selector,避免嵌套子选择器,减少权重,方便外部覆盖。

1.7K20

团队分享,Bem规范调研及实践

为什么要用 BEM? 性能 CSS 引擎查找样式表,对每条规则都按从右到左顺序去匹配,以下这段代码看起来很快,实际上很慢。...通过浏览HTML代码class属性,你就能够明白模块之间是如何关联:有一些仅仅是组件,有一些则是这些组件子孙或者是元素,还有一些是组件其他形态或者是修饰符。...,我们样式类没有一点嵌套关系,嵌套关系都以从命名方式来代替。...这有悖BEM命名规范,BEM命名只包含三个部分,元素名只占其中一部分,所以不能出现多个元素名情况。这样约定可以防止当层级很深命名过长问题。...{vue,css,less,sass,scss}": "stylelint --fix" }, } 这里涉及到 husky 使用,如果不懂,可以自行谷歌了解理详细信息。

71410

VS Code 提高前端开发效率插件

Auto Rename Tag 自动重命名配对 HTML/XML 标记 [usage] Beautify Visual Studio 代码美化代码 选中需要美化代码,右键 Format Document...GitLens 增强 Visual Studio 代码内置 Git 功能-通过 Git 责怪注释和代码镜头一目了然地可视化代码作者,无缝导航和浏览 Git 存储库,通过强大比较命令获得有价值见解...editor.codeActionsOnSave": { "source.fixAll": true, "source.fixAll.eslint": false } Import Cost 在编辑器显示导入.../要求包大小 [import-cost] Beautify css/sass/scss/less 美化 CSS、Sass 和更少代码(Visual Studio 代码扩展) 选中需要美化代码,右键...[symbolProvider] Stylelint 使用 stylelint 对 lint CSS/SCSS/Less Visual Studio 代码扩展,进行格式校验。

1.5K00

「前端工程四部曲」模块化前世今生(下)

「优点:」 BEM 优点在于所产生 CSS 类名都只使用一个类别选择器,可以避免传统做法由于多个类别选择器嵌套带来复杂属性级联问题。...BEM 命名规则,所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则特异性(specificity)都是相同,也就不存在复杂优先级问题。这可以简化属性值层叠规则。...代码清单命名规则好处在于每个 CSS 类名都很简单明了,而且类名层次关系可以与 DOM 节点树型结构相对应。...data-v 开头自定义属性,而 CSS 其添加样式时,通过类名+属性选择器方法来避免命名冲突,从而实现模块化。...其次也解决了 CSS 嵌套过深问题,正是因为全局命名冲突问题,我们不得已就要为 class 加上一些独立命名空间,书写时也会多层嵌套

70120

构建初级前端页面重构开发环境

如果不满意,摁下 F12 呼出控制台,查看对应 HTML 结构,在调试工具修改参数值达到设计稿需求,然后切换回去继续在编辑器编写代码,反复到完成为止。...typo 中文排版做了很多优化,经验丰富 sofish 前辈考虑也非常全面成熟,于是就拿过来用了。...将设计稿扔进 PSD 文件夹,观看 PSD 确定不需要组件或功能,在相应文件夹删掉无用文件。 打开 style.scss 文件,配置头部项目信息。...打开 scss_custom.scss 文件,编写项目主要 CSS 代码。 打开 scss_media-queries.scss 文件,编写响应式相关功能。...例如: Emmet 强大代码增强工具,让你及其优雅写那些丑陋 HTML 嵌套结构,同时可以自己设置代码模板。

46820

React组件设计实践总结03 - 样式管理

如果团队没有制定合适 CSS 规范(例如 BEM, 不直接使用标签选择器, 减少选择器嵌套等等), 代码很快就会失控 解决方向: 之前文章提到组件是一个内聚单元, 样式应该是和组件绑定....最基本解决办法是使用类似 BEM 命名规范来避免组件之间命名冲突, 再通过创建优于复用, 组合优于继承原则, 来避免组件间样式耦合; 3️⃣ 无用代码移除 由于上述’依赖’问题, 组件样式之间并没有明确边界...以 Bootstrap 项目结构例: . ├── _alert.scss ├── ......# 各种mixin, 可复用css代码 ├── utilities # 各种工具方法 └── vendor └── _rfs.scss _variables.scss包含了以下配置...这个对于复杂组件树渲染影响尤为明显 不能抽取 CSS 文件, 这通常不算问题 官方benchmark 下面是基于 v4.0 基准测试对比图, 在众多 CSS-in-js 方案, styled-components

7.1K20

Sublime插件

高亮显示: BracketHighlighter BracketHighlighter高亮显示匹配括号、引号和标签,BracketHighlighter这个插件能在左侧高亮显示匹配括号、引号和标签,...能匹配 [] , () , {} , “” , ‘’ , 等甚至是自定义标签,当看到密密麻麻代码分不清标签之间包容嵌套关系时,这款插件就能很好地帮你理清楚代码结构,快速定位括号,引号和标签内范围...TrailingSpacer(高亮显示多余空格和Tab) 颜色: ColorPicker (调色盘) 在编辑CSS样式时候,ColorPicker可以让sublime text 内置一个调色盘,...SCSSSCSS语法识别) 支持scss语法高亮,里面附带了好多CSS Snippet,无论现用或者改造成,都可节省不少时间。...lint(语法校验): SublimeLinter(代码错误提示) 总体架构 Jslint编程风格 Sub Tradsim(中文繁字体和简体字转换) Terminal 可以sublime,打开命令行

1K60

css模块化及CSS Modules使用详解

当做一个大项目,几个人团队合作开发,结果看不懂彼此代码,怎么办,当面对前人已经写好代码,需要修改,可是无处下手,怎么办.当代码耦合,修改费时费力,怎么办,当需要迭代,面对庞大代码,牵一发动全身悲催时刻...成本     更好实现快速迭代     便于代码维护 CSS 模块化解决方案有很多,但主要有两类。...class 命名技巧 CSS Modules 命名规范是从 BEM 扩展而来。...BEM 把样式名分为 3 个级别,分别是: Block:对应模块名,如 Dialog Element:对应模块节点名 Confirm Button Modifier:对应节点相关状态,如 disabled...├── Component.js └── Component.scss 这样所有全局样式都放到 src/styles/app.scss 引入就可以了。

6.6K100

如何写出一套可维护CSS库?

由于块是独立,可以在应用开发中进行复用,从而降低代码重复并提高开发效率。块可以放置在页面上任何位置,也可以互相嵌套。...同类型块,在显示上可能会有一定差异,所以不要定义过多外观显示样式,主要负责结构呈现。这样就能确保块在不同地方复用和嵌套时,增加其扩展性。综上所述,最终我们可以把BEM规则最终定义成: ....并且在用户未输入内容时,button 显示禁用样式。...个人建议可以尝试使用 BEM 规范来书写代码BEM 命名会使得 Class 类名变长,但经过 GZIP 等压缩后,文件体积其实并无太大影响。...,通过在html代码添加类名来添加属性,不必再去找相对应选择器css代码来修改样式。

69830

vue-clearcss 高效清除vue无用css

vue-clearcss 会找到你css没有使用css样式,是否删除由使用者自己决定,工作起来就像eslint 为什么要用它?...一个vue文件在长期迭代css会越来越冗余,它不像html和js那么好删除,html多了页面会展示,js你只要看下它用地方就可以了,然而css比如scss、less都是用嵌套语法,通过搜索删除那么有可能它在...html有定义,但是它上级不对,一样是无效css,或者css使用了bem写法,像html上写是a--b,但是scss方式是a{ &--b{} },搜索起来还非常不方便,通过这个工具,你可以快速找到无用.../src/App.vue 复制代码 如果你用是vscode,那么使用更加方便,在扩展里面搜索vue-clearcss-ext,安装扩展还有上面全局安装vue-clearcss就可以了,效果如下...,那么子组件又会嵌套自己子组件,那么htmlast会变得非常巨大,但是父组件影响子组件情况又很少,所以不适合做。

1.7K40

SCSS 学习笔记 和 vscode下载live sass compiler插件配置

,并且兼容所有版本 CSS SCSS 是 对于 CSS3 SASS ,所以我们学时候,把文件后缀写 “.scss” 由于我们配置,当遇到兼容性代码,出口文件会自动配置,如下图 2.1 语法嵌套规则...2.2 代码注释 SCSS 支持两种注释: 标准css多行注释 /* ... */ 会编译到.css文件 单行注释 // 不会编译到.css文件 2.3 SCSS 变量...CSS声明 mixin有助于减少重复代码,只需声明一次,就可在文件引用 混合指令可以包含所有的 CSS 规则,绝大部分 SCSS 规则,甚至通过参数功能引入变量,输出多样化样式。...,而 @import则不会,会全部显示。...$color; } 2.16 SCSS @at-root 使用 作用:@at-root 可以使被嵌套选择器或属性跳出嵌套【例子:比如一段嵌套样式对应html有一天需要移动到另一层div

34410
领券