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

在SASS中使用BEM时遇到问题

在SASS中使用BEM时遇到的问题可能包括命名冲突、选择器嵌套过深、代码冗余等。下面是对这些问题的解释和解决方案:

  1. 命名冲突:BEM(块、元素、修饰符)方法要求使用特定的命名约定,但在SASS中,如果不小心使用了相同的类名,可能会导致命名冲突。解决这个问题的方法是使用SASS的命名空间功能,将BEM的命名空间与其他类名隔离开来,避免冲突。
  2. 选择器嵌套过深:在SASS中,可以使用嵌套选择器来编写样式,但过度嵌套会导致选择器过长、样式难以维护。在使用BEM时,选择器的嵌套可能会变得更加复杂。为了解决这个问题,可以使用SASS的父选择器(&)来简化选择器的书写,并尽量避免过度嵌套。
  3. 代码冗余:在使用BEM时,可能会出现一些重复的样式代码,特别是在编写修饰符时。为了避免代码冗余,可以使用SASS的混合(mixin)功能,将重复的样式代码抽象成混合,并在需要的地方进行调用。

总结起来,使用SASS中的命名空间、父选择器和混合功能,可以解决在使用BEM时遇到的命名冲突、选择器嵌套过深和代码冗余等问题。

关于SASS和BEM的更多信息,可以参考腾讯云的产品介绍链接:

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

相关·内容

sublime安装sass编译插件

打开sublime,preference选项下有没有package control这个选项,如果没有的话,就表示你没有Package Control 插件(一个方便 Sublime text 管理插件的插件...to finish installation') 完成了这步之后,再重新打开我们的sublime,ctrl+shift+p,并输入install 选择第一个Install Pacage, 命令栏输入..."Sass"然后回车,然后弹出的列表中选择Sass插件,通过鼠标单击或者回车进行安装,可通过左下角状态栏查看安装结果 命令栏输入"SassBuild"然后回车,然后弹出的列表中选择SassBuild...插件,通过鼠标单击或者回车进行安装,可通过左下角状态栏查看安装结果 按ctrl+shift+p,输入package,选择list packages,就看到了我们安装的插件列表 如果你看到了sasssass...这是你把scss文件写完之后,按ctrl+b就可以实现sass文件的编译了,他会生成一个自动编译生成css文件。(最好把sass放在c盘,否侧编译不出来,亲测)

74810

create-react-app中使用sass

而较新的语法叫做“SCSS”,使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法通过.sass和.scss两个文件扩展名区分开。...不管你是刚使用Reactjs或者是Reactjs的老司机,你们一定都听说过create-react-app这个脚手架,而从create-react-app的官方文档,我们可以看到他们暂时还不支持直接导入...npm install node-sass 然后自己项目的package.json,将以下行添加到scripts: "build-css": "node-sass-chokidar src/ -...: 使用不同的预处理器,请根据预处理的文档替换build-css和watch-css命令。...watch-css将在src子目录中找到每个Sass文件,并在其旁边创建一个相应的CSS文件,我们的例子覆盖src/App.css。

2.8K20

Sass 与Compass WordPress 主题开发的运用

这篇文章主要是小讲Sass 与Compass WordPress 主题开发的运用,核心的技术Sass 自然不会提及。因此,如果你想要这篇文章对你有用的话,最好是先接触下Sass。...然而在Sass 与Compass ,因为配置上的原因,一般是将scss 及css 文件放在以此命名的文件夹,但WordPress 确是要style.css 放在主题根目录下。...style.css 的注释问题 按照WordPress 的开发要求,style.css 的头部必须有如下类似的主题相关信息(注释)供系统必要使用: /* Theme Name: Bevework Theme...一个WordPress 的Compass 插件 这个是我在看《Sass与Compass实战》这本书的时候作者的Github 上看到的,Github 地址点击这里。...不过我感觉没必要所以没有去尝试使用过。

2K70

您知道SASS吗?

特别是当您遵循BEM体系架构 特别有用,因为Sass与它的体系结构非常兼容,因此他们文档中经常提到它。 它是一种更优雅、更酷的UI设计方式。使用Sass构建CSS也更加容易。...以下这两个功能将帮助您更好地构建CSS: 您可以使用&符号连接CSS选择器 如果您使用的是BEM体系结构,请使用纯CSS进行编码: 遵循BEM(Block Element Modifier)架构的CSS...纯CSS,父子关系如下所示: Sass是这样处理的: 并排比较,您可以看到这两者有很大区别: 就像选择符连接一样,使用Sass通过将CSS父子关系分组到括号,自动为您生成CSS的嵌套父子关系。...但是,当我第一次尝试学习Sass,我发现我的开发效率提高了,我开发/设计我的组件变得毫不费力! 我“遇到”它的时间还是太晚了。...这样,您可以避免HTML元素过多使用非语义的类。 举个例子,您在将UI居中对齐遇到了问题,而且您不想在每个CSS选择器中都写一遍一模一样的代码。在这种情况下,您可以使用Mixins来解决问题。

89510

大型项目中的结构化CSS

CSS这种角色是相反的。每次我写一行css,会潜在地影响到项目中所有的东西,并且无意中改变了我当前工作以外其它页面的展现。...Peergrade.io处理CSS的方式 规则1: 使用前缀 (class类名) Peergrade.io我们在所有样式名中使用前缀 .pg。 在你的CSS代码如果不使用前缀可能会带来些麻烦。...规则2: 不要嵌套CSS选择器 Peergrade.io中用到了Sass。...同样,可以父元素内的子元素独立定义样式 - 这并不会受到你在前一阶段Sass这层已经定义好的样式的影响。...这允许我们仅可以修改在特定块(block)级别的修饰符, 并且子块不能重复修饰符(可以理解为父子嵌套不重名;“E”BEM即元素elements)。

1.1K40

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

背景 最近老大维护别人的代码,发现我们团队写的样式各有种的想法及风格,这在后续维护会增加一定的难度,所以老大决定统一样式的会名规范,所以就安排我去调研及实践,下面是我调研的结果。... css 定义,也必须依靠层级选择器来限定约束作用域,以避免跨组件的样式污染。...这有悖BEM命名规范,BEM的命名只包含三个部分,元素名只占其中一部分,所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。...,上面 less 或 sass 可以改成如下结构: .card{ // 省略......{vue,css,less,sass,scss}": "stylelint --fix" }, } 这里涉及到 husky 的使用,如果不懂的,可以自行谷歌了解理详细的信息。

72010

如何更优雅的编写CSS代码

我会略将下我们马上要使用的特性。 变量 scss你可以使用变量。主要好处:可重用性。让我们假设你的app中有一个颜色调色板。你的主题色是蓝色。...使用嵌套可以使你花费更少的时间来编写复杂的css选择器。 分块和导入 当涉及到可维护性和可读性上,不可能将所有的代码都保存在一个大文件。...示例:.post--important,.post__btn--disabled 注意点 当你使用 BEM ,你的命名只有 class 类名并且只使用 class 类名,没有 id ,没有标签,就只使用...这意味着 node-sass将会监听你代码的任何更改,当他们发生改变,它会自动编译为css,这在开发是个很有用的功能。...实际上,构建网站,你可能会使用到并非所有浏览器都完全支持的新特性,这时候,添加浏览器供应商前缀可以支持这些新特性,下面是示例: -webkit-animation-name: myAnimation

1.9K10

详解 vaw-layouts 通过 sass 实现动态换肤功能 (一)

以往的前端开发,css 一直不能称之为一种编程语言,虽然 css3增加了几个变量和函数,但是实现的功能还是比较有限。...如果您对他们还不了解,可以查看一下他们的官网学习一下,vaw-layouts项目中使用的的预处理器是sass,因此本文也是基于sass进行讲解实现动态换肤的功能。...vaw-layouts 通过 sass 实现动态换肤功能 (一) 原创2021-06-03 22:22·知码 以往的前端开发,css 一直不能称之为一种编程语言,虽然 css3增加了几个变量和函数...如果您对他们还不了解,可以查看一下他们的官网学习一下,vaw-layouts项目中使用的的预处理器是sass,因此本文也是基于sass进行讲解实现动态换肤的功能。...答案是不可以,因为预处理器是我们开发阶段使用,一旦打包之后,他们就没有了,我们也就没办法再改这些值。所以我们还是老老实实写恶心的代码?

1.1K10

编写模块化CSS——BEM

BEM ,块被写为像 class 的名字一样,如下所示: ? BEM 使用 .form 而不是 元素的原因是因为 类允许无限的可重用性,而即使是最基本的元素也可能改变样式。...传统的 BEM ,当你使用修饰符,你应该 将块和修饰符添加 到 HTML ,以便在新的 .button--secondary 不重写 .button 样式。 ? ?...方法 1:使用 mixin 第一种方式,如果使用 Sass 或任何其他预处理器,则 使用mixin来封装 需要重用的 所有代码。我们的按钮示例,我们只需要将 padding 写入 mixin。...在这里,我调用这个 mixin: ? 万岁!现在世界静好! 但是...如果我不使用 Sass 怎么办? 放轻松! 即将分享的第二种方法是使用普通的 CSS,所以你也可以使用它!...我的 CSS(Sass,我 .block__item 嵌套 .item 元素,赋予了它所需的上下文。 ? 你可能会说,“但这是违反 BEM 惯例的!”是的,但请阅读下一篇文章 。

2.1K70

怎样才能写出更好的 CSS

当然,但是 CSS 框架也有一些缺点: 它经常会使用平淡无奇的设计。 CSS 框架使得定制很困难,更不用说超越框架了。 使用之前,你必须先学习如何使用它们。...下面介绍一些我们即将使用的功能。 变量 你可以 SCSS 中使用变量。主要的好处在于可重用性。我们假设你的应用有一组颜色。主色是蓝色。...组织 CSS 代码:BEM 方法论 我记不清曾经多少次CSS类中使用包揽一切的名字了。比如:·.button·、·.page-1·、·.page-2·、·.custom-input·。...这意味着node-sasswaits时刻监督你的代码是否发生改动,一旦出现发生,它就会自动编译成CSS。这在开发非常有用。 --output-style:CSS文件的输出内容。...实际上,构建网站,你可能会使用一些并非所有浏览器都完全支持的新功能。因此,提供商方案可以提供对这些功能的支持。

1.7K10
领券