开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在SASS中使用BEM时遇到问题

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

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

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

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

SASS：https://cloud.tencent.com/product/sass
BEM：https://cloud.tencent.com/product/bem

相关搜索:Python，Pytorch，在使用cuda时遇到问题使用DartJS sass编译器扩展在vscode中编译Sass时出错使用parents在不太像的SASS中使用BEM 使用内容：“"；在SASS (非scss)中使用媒体查询，遵循SASS和BEM的标准？在Ionic 3中使用插件时遇到问题在material ui中使用sass like插值来获得类似BEM的类名在react组件中应用sass css时遇到问题在TypeScript中使用EditorJS时遇到问题在使用"addRole“方法时遇到问题

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Jekyll 中 Sass 的使用

Jekyll 中 Sass 的使用什么是 Sass 关于 Sass 的优势 Usage Install Sass 目录结构使用 include stylesheet to html...项目实例参考文献 Jekyll 中 Sass 的使用什么是 Sass Sass 是一群超级懒的人创造的 Css 快速编程工具 Sass（Syntactically Awesome Style...通过这种新的编程语言，你可以使用最高效的方式，以少量的代码创建复杂的设计。它改进并增强了 CSS 的能力，增加了变量，局部和函数这些特性。...文件,这些个文件在最后构建的时候不会被生成。...这部分文件写的时候上方要加 YAML header: 最顶上的两行横杠不能删除, 这个是为了让文件按照 Jekyll 标准进行读取使用 _sass/test.scss .content { height

7472 0

在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，就看到了我们安装的插件列表如果你看到了sass和sass...这是你把scss文件写完之后，按ctrl+b就可以实现sass文件的编译了，他会生成一个自动编译生成css文件。（最好把sass放在c盘，否侧编译不出来，亲测）

7481 0

在Typescript & Javascript 中使用Sass变量

在Vue中我们往往会单独抽取css全局变量，除了在页面css中使用，往往属性也会用到。准备 ---- 默认安装了： TypeScript Sass 如果没有安装可自行安装。...{ test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader..."] } ] } }; 导出使用 ---- 1.导出可以通过:export进行导出，如下面sass 文件： $textColor: #333; $primaryColor...在webpack cssloader 中添加 typings-for-css-modules-loader.插件会自动定义类型。...参考： https://mattferderer.com/use-sass-variables-in-typescript-and-javascript

3.1K1 0

Angular 中 SASS 样式的使用

在 Angular 自定义指令 Tooltip 文章中，我们说会出一篇关于 sass 样式的文章，现在它来了。....scss 为后缀，语法用 {} 修饰 .sass 为后缀，语法是缩紧方式推荐使用 .scss 项目集成 angular 项目使用脚手架生成，在添加样式这一个步骤，会询问你编写样式的方式，让你选择...在 angular 中编写样式，可以分为组件样式和全局样式。...Sass 重点语法针对日常的开发工作，我们来介绍下比较重要的内容。 1. 使用变量使用变量能够让你在多个页面或者页面中的多处进行调用。...使用 mixin 混合器在编写样式的时候，我们会出现在多个类中调用同一份的样式内容。

5K2 0

在VUE中怎么全局引入sass文件

在使用vue开发SPA应用中，我们经常需要在一个或多个scss文件中定义公共变量或者mixin亦或是很多通用的function，而且不希望在每个vue文件中都去@import，针对这种情况，可以使用下面的方法添加全局引入的...sass文件，使这些样式或者方法可以被打包到全局的样式文件中。...添加依赖 npm install sass-resources-loader --save-dev 修改build/utils.js 'use strict' const path = require(...', { loader: 'sass-resources-loader', options: { // it need a absolute...css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass

1.3K1 0

在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.8K2 0

在Docker中安装kafka遇到问题记录

在/kafka后面的/kafka路径是指定Kafka在Zookeeper中的命名空间。...后，使用ifconfig,查看ip是172.17.0.2.在Windows的宿主机上ping 172.17.0.2，ping不通。...但是在docker中的zk可以ping 通宿主机的ip。...因此，172.17.0.2是在Docker的虚拟网络上分配给zk容器的IP地址，仅在Docker虚拟网络中可用。...然后，在Windows主机上，可以使用它自己的IP地址和映射的端口访问zk。那如果在docker中启动了kafka镜像。

3051 0

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 地址点击这里。...不过我感觉没必要所以没有去尝试使用过。

2K7 0

您知道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来解决问题。

8951 0

node-sass 在 jenkins 中因为权限无法安装的问题

发表于2018-05-152019-01-01 作者 wind 这个问题发现了好多次了，今天应该是找到了正确的解决方式：我使用 whoami 输出执行命令的用户是 root，但是 node 执行安装...node-sass时调用了 mkdir 以及调用 binding.node 没有权限。...然后试了一下使用 sudo 来执行 rebuild node-sass ，就成功了。...--save-dev > node-sass@4.9.0 install /var/lib/jenkins/workspace/【测试环境】XXX-后台网页/node_modules/node-sass...> node scripts/install.js Downloading binary from https://github.com/sass/node-sass/releases/download

2.3K1 0

在大型项目中组织CSS

Peergrade.io 处理CSS的方式法则一：（给类名）加上前缀在Peergrade.io我们在所有类名中用了前缀 .pg 。在CSS代码库里不使用前缀是自找麻烦。...法则二：避免使用CSS选择器嵌套在Peergrade.io我们使用 Sass。...使用 Sass 你很快进入一种Sass结构跟HTML结构相匹配的模式，例如： #user-profile-page .profile-description h3 ul...法则三：采用BEM命名来开发组件在构建可隔离组件时，尽可能采用BEM命名方案给类命名。...这就允许我们只要指定区块的修饰符——也就是正在编辑的内容—— 不用在区块内的所有子元素上重复修饰符（BEM中的E）。

7812 0

大型项目中的结构化CSS

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

1.1K4 0

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

类名建议使用破折号代替驼峰法。如果你使用 BEM，也可以使用下划线（参见下面的 OOCSS 和 BEM）。不要使用 ID 选择器。在一个规则声明中应用了多个选择器时，每个选择器独占一行。...(在 Sass 中是 //) 代替块注释。...JavaScript 钩子避免在 CSS 和 JavaScript 中绑定相同的类。否则开发者在重构时通常会出现以下情况：轻则浪费时间在对照查找每个要改变的类，重则因为害怕破坏功能而不敢作出更改。...Book 边框在定义无边框样式时，使用 0 代替 none。...Bad .foo { border: none; } Good .foo { border: 0; } Sass 语法使用 .scss 的语法，不使用 .sass 原本的语法。

2.4K2 0

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

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

7201 0

在使用Vue2.0中使用axios库时，遇到415错误

解决办法：在axios的第三个参数config中，设置请求头信息'Content-Type': 'application/json;charset=UTF-8' this.

3.3K2 0

如何更优雅的编写CSS代码

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

1.9K1 0

详解在 vaw-layouts 中通过 sass 实现动态换肤功能（一）

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

1.1K1 0

编写模块化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.1K7 0

20个为前端开发者准备的文档和指南4

RSCSS 它意味着”合理的CSS 样式表结构标准”,在为很大的项目编写Sass/CSS时,它还在备档一些技巧和技术。...当用Flexbox开始构建一个新布局时，应该为它们确定一个必要的标签。 10....Get BEM 它是一个综合的站点,旨在推广和教导开发者使用流行的BEM CSS方法学。...BEM的链接地址: http://www.w3cplus.com/css/bem-definitions.html 14....，是因为在制作一个动态的UI元素时，有一些重要的好的经验可以应用到自己的项目上。

85610 0

怎样才能写出更好的 CSS

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

1.7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭