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

如何应用:悬停到sass中的多个bem语句?

在应用悬停到Sass中的多个BEM语句时,可以通过使用嵌套和父选择器来实现。BEM(块、元素、修饰符)是一种命名约定,用于组织和命名CSS类,以便更好地管理和维护代码。

以下是如何应用悬停到Sass中的多个BEM语句的步骤:

  1. 定义块(Block):首先,定义一个块级元素的基本样式,可以是一个容器或一个具有独立功能的组件。使用BEM约定,给块添加一个唯一的类名。
  2. 定义块(Block):首先,定义一个块级元素的基本样式,可以是一个容器或一个具有独立功能的组件。使用BEM约定,给块添加一个唯一的类名。
  3. 定义元素(Element):在块内部,定义块所包含的元素样式。使用块的类名作为父选择器,并使用BEM约定添加一个双下划线(__)作为分隔符。
  4. 定义元素(Element):在块内部,定义块所包含的元素样式。使用块的类名作为父选择器,并使用BEM约定添加一个双下划线(__)作为分隔符。
  5. 定义修饰符(Modifier):定义块或元素的不同状态或变体。使用BEM约定,在块或元素后面添加一个双减号(--)作为分隔符。
  6. 定义修饰符(Modifier):定义块或元素的不同状态或变体。使用BEM约定,在块或元素后面添加一个双减号(--)作为分隔符。
  7. 应用悬停效果:为了应用悬停效果到多个BEM语句,可以使用嵌套和父选择器的组合。首先,定义一个具有悬停样式的父选择器,然后在嵌套的选择器中引用该父选择器。
  8. 应用悬停效果:为了应用悬停效果到多个BEM语句,可以使用嵌套和父选择器的组合。首先,定义一个具有悬停样式的父选择器,然后在嵌套的选择器中引用该父选择器。
  9. 当鼠标悬停在元素上时,将应用定义的悬停样式。

以上是如何应用悬停到Sass中的多个BEM语句的步骤。对于更复杂的情况,可以根据具体需求使用其他Sass特性来进一步优化和扩展代码。

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

相关·内容

怎样才能写出更好的 CSS

让我们开门见山:编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行,但是 CSS 还是算了吧。 在我创建应用的时候,从来都无法从 CSS 中享受到乐趣。...既然你关注了这篇文章,那么你一定有自己的原因,对不对?好了,废话不多说,让我们开始学习如何写出更好地 CSS 代码。 注意:这篇文章不是关于如何设计漂亮的应用。...融会贯通 下面的示例演示了 BEM 的功能。 ? BEM 的功能 写一个博文组件 ? 博文组件 写多个按钮 3. 组织 CSS 文件:7-1模式 你还跟得上节奏吗?很好!...它的 CLI(命令行界面)相当容易使用: node-sass [options] 它有多个选择,但我们只使用其中两个: -w:监视目录或文件。...将npm-run-all添加到项目依赖项中:npm install npm-run-all --save-dev:有了它我们就可以同时运行多个脚本。

1.7K10

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

目录 术语 规则声明 选择器 属性CSS 格式 注释 OOCSS 和 BEM - ID 选择器 JavaScript 钩子 - 边框Sass 语法 排序 变量 Mixins 扩展指令...属性以键值对形式存在,一个规则声明可以包含一或多个属性定义。...如果你使用 BEM,也可以使用下划线(参见下面的 OOCSS 和 BEM)。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时,每个选择器独占一行。...想要了解关于这个主题的更多内容,参见 CSS Wizardry 的文章,文章中有关于如何处理优先级的内容。 JavaScript 钩子 避免在 CSS 和 JavaScript 中绑定相同的类。...Bad .foo { border: none; } Good .foo { border: 0; } Sass 语法 使用 .scss 的语法,不使用 .sass 原本的语法。

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

    通常我们会认为浏览器是这样工作的:找到唯一ID元素ul-id —> 把样式应用到li元素上。...通过浏览HTML代码中的class属性,你就能够明白模块之间是如何关联的:有一些仅仅是组件,有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。...这有悖BEM命名规范,BEM的命名中只包含三个部分,元素名只占其中一部分,所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。...上面我们每个样式都要写一遍 card,如果 card 换成一个比较长的单词,这样也太冗长了,这也是大家不太喜欢 bem 的一个原因,但这个 sass 或 less 是很好的解决的,我们可以用 & 表示根元素...,上面在 less 或 sass 中可以改成如下结构: .card{ // 省略...

    81410

    在ASP.NET MVC中如何应用多个相同类型的ValidationAttribute?

    [源代码从这里下载] 一、一个自定义ValidationAttribute:RangeIfAttribute 为了演示在相同的目标元素(类、属性或者字段)应用多个同类的ValidationAttribute...具体的验证逻辑定义在重写的IsValid方法中。...在HttpPost的Index操作中,如果验证成功我们将“验证成功”字样作为ModelError添加到ModelState中。...在默认的情况下,Attribute的TypeId返回的是自身的类型,所以导致应用到相同目标元素的同类ValidationAttribute只能有一个。...幸好Attribute的TypeId属性是可以被重写的,县在我们在RangeIfAttribute中按照如下的方式对这个属性进行重写: 1: [AttributeUsage( AttributeTargets.Field

    2.1K60

    在大型项目中组织CSS

    而在CSS中是反过来的。我每写一行CSS代码,可能会影响到项目里的所有部分,并且会无意间改变其他页面的外观。我的样式不仅仅是泄露;它们蜂拥而出,遍布应用程序的每个角落。...并且,像这样的样式定义会应用到父元素内部的任何元素上——而不仅仅是你写在Sass里的那个层级。 对CSS选择器嵌套你所做的是用 微妙 和 脆弱的方式绑定CSS和HTML结构。...我们没有遵循完整的BEM指南——只是命名方案,这就是说类名应该是这种形式: .block__element--modifier 为此我们这样组织我们的 Sass: .pg-deadline &__date...Sass嵌套为我们创建BEM类名。...这就允许我们只要指定区块的修饰符——也就是正在编辑的内容—— 不用在区块内的所有子元素上重复修饰符(BEM中的E)。

    80820

    如何更优雅的编写CSS代码

    css方面让它变得更好吧, Ps: 这不是一篇关于如何设计漂亮app的文章,它是关于编写可维护和可组织的css代码的学习文章 SCSS 在本文的示例代码中我将使用SCSS编写。...CSS 代码组织方案:BEM 我曾经无数次给我的css类名提供我能想到的全部术语,你懂的,比如这些命名:.button .page-1 .page-2 。我经常不知道如何进行命名。...把这些知识进行结合 在下例中你会发现 BEM 的强大之处: 编写单个文章组件示例 —— https://codepen.io/thomlom/pen/RJvVdQ 编写多个按钮示例——https://codepen.io...这意味着 node-sass将会监听你代码的任何更改,当他们发生改变时,它会自动编译为css,这在开发中是个很有用的功能。...注意:这是个全局package 添加npm-run-all依赖:npm install npm-run-all:它将允许我们同时运行多个script 在package.json文件中添加如下script

    1.9K10

    您知道SASS吗?

    特别是当您遵循BEM体系架构 时特别有用,因为Sass与它的体系结构非常兼容,因此他们在文档中经常提到它。 它是一种更优雅、更酷的UI设计方式。使用Sass构建CSS也更加容易。...以下这两个功能将帮助您更好地构建CSS: 您可以使用&符号连接CSS选择器 如果您使用的是BEM体系结构,请使用纯CSS进行编码: 遵循BEM(Block Element Modifier)架构的CSS...现在如果你用sass来做这件事,它看起来是这样的: 上面的示例展示了SASS如何通过使用(&)将CSS选择器串联在({})中来嵌套几个选择器。...如果您使用的是BEM体系结构,那么您就节省了一些需要重复输入CSS类和选择器来遵循该体系结构时间,因为SASS在后台已经帮您生成了完整的CSS了。...在纯CSS中,父子关系如下所示: Sass是这样处理的: 并排比较,您可以看到这两者有很大区别: 就像选择符连接一样,使用Sass通过将CSS父子关系分组到括号中,自动为您生成CSS的嵌套父子关系。

    92010

    CSS模块化的演进

    在大型 Web 应用里面,CSS 的组织是一件复杂和凌乱的事情,你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。...Sass、LESS、Stylus 是目前最主流的 CSS 预处理器,它们本质上是一种编译器。此处以 Sass 为例,它支持 .scss,.sass 文件类型。...其语法支持变量、选择器嵌套、继承(extend)、混合(mixin)和一些逻辑语句,同时还支持跨文件的导入功能,因而使得开发者能够很好的使用编程思想书写样式。...首先一个页面可以按层级依次划分未多个组件,其次就是单独标记这些元素。BEM通过简单的块、元素、修饰符的约束规则确保类名的唯一,同时将类选择器的语义化提升了一个新的高度。...在 CSS 模块化演进的过程中,出现了很多优秀的设计思想和实践,这些值得我们借鉴和学习。

    1.7K20

    React 设计模式 0x4:样式

    学习如何轻松构建可伸缩的 React 应用程序:样式 # 组件样式 在每个 Web 应用程序中,样式化非常重要,因为样式使其对用户非常有吸引力,并为用户提供良好的体验。...在 React 中有不同的方法来实现这一点。 # 样式化类型 在 React 和网站或 Web 应用程序中,有不同的样式化应用程序的方式。...# 外部/引用 CSS 外部 CSS 是网站或 Web 应用程序样式化的一种方式,它在文件中编写所有样式,并在应用程序或组件内引用它。...CSS 框架,Bootstrap 已经内置了样式和类,可以立即应用于您的应用程序。...# BEM BEM 是一种命名约定,它可以帮助您更好地组织样式。BEM 代表块(block)、元素(element)和修饰符(modifier),它们可以组合在一起,用于将大型界面拆分为独立的块。

    1.3K20

    从element-ui源码来看BEM实现

    BEM代表“块(block),元素(element),修饰符(modifier)”,开发组件的过程中经常使用这三个实体,而在选择器中,这三个实体由以下符号来表示扩展关系: - 中划线:仅作为连字符使用...我在element组件库中的mixins.scss文件中找到了想要的答案。 接下来我要讲的就是如何利用sass,编写具有可读性和可维护性的BEM规则的css代码。...#{$B} { @content; } } 为了方便大家理解代码,我现在开头贴上配置文件中定义的变量,而这时就能很清楚的看到block的生成就是基于BEM规范中,块是设计或布局的一部分,具有唯一地意义...利用刚刚介绍的函数,以及块、元素、修饰符的实现代码,在sass中已经能非常高效率并且优雅的基于BEM规范的代码了。...贴一段示例代码,如何利用上面的代码编写BEM规范的css代码: @import "mixins/mixins"; @import "common/var"; @include b(test) {

    1.9K30

    CSS Modules入门教程

    同时,也没有解决全局样式的冲突问题 一个SASS的的文件是这样的: /* app.sass */ @import './reset' @import './color' @import '....BEM名词解释 Block:逻辑和页面功能都独立的页面组件,是一个可复用单元,特点如下: 可以随意嵌套组合 可以放在任意页面的任何位置,不影响功能和外观 可复用,界面可以有任意多个相同Block的实例...BEM(Block-Element-Modifier) 如何看待 CSS 中 BEM 的命名方式?...,我们再看看浏览器中inspector中的样式应用,如下: ?...总结 至此,所有的CSS Modules用法就已经介绍完毕了,至于后续的还有如何应用于React、Vue以及Angular中,相信掌握了上面的内容之后就可以知道怎么写了,如何与预处理器一起使用相信问题也不大

    2.6K40

    CSS @scope 如何取代 BEM

    即将在 Chrome 浏览器中实施的 @scope 允许在样式表中对样式进行块级作用域划分,从而进一步提高了 BEM 的性能。这将使样式表更易于维护,同时对 CSS 级联进行更严格的控制。...在这篇文章中,我们将展示如何在 Chrome 中使用 @scope 特性,以及如何使用它来替换前端项目中的 BEM。我们通过几个例子进行讲解,你可以在 GitHub 上的示例项目中查看并跟随操作。...使用@scope重构BEM 展示使用 @scope 的优势的最佳方式是在使用 React 等主流框架或库的应用程序中使用 @scope。...在 GitHub 上的示例应用程序中, react-example 文件夹中有一个项目,其中的页面首先使用 BEM 进行了样式设计,然后使用 @scope 进行了重构。...最终注意到它是如何使样式更简洁、更易读的。 @scope 与 BEM 相比的其他优势 除了将 BEM 重构为 @scope 的优势外,使用 @scope 还可以更好地控制 CSS 级联。

    12210

    进阶 | CSS进阶:提高你前端水平的 4 个技巧

    确定你将要如何命名这些组件,同时理清各个组件之间的关系。...BEM 代表块(block)、元素(element)和修饰符(modifier)。Yandex,在俄罗斯的相当于谷歌的搜索引擎,为了解决他们 CSS 代码库中的缩放问题而提出了它(它指BEM)。...这样,如果你想要修改样式中的颜色,那么你将会很容易的找到它。 无论你使用哪种方式组织文件结构,尽量在决定的时候参考单一功能原则。一旦有某个文件开始变的臃肿,那么考虑按照逻辑功能将它分成多个部分。...当单一功能原则应用于你的每一个 CSS 类选择器中时,这意味着每一个类选择器都有着唯一的功能。换句话说,要根据不同关注点将样式分离到不同的类选择器中。...你可以通过阅读下列文章进一步了解单一功能原则在样式表和类中的应用。《单一功能原则在 CSS 中的应用》和《单一功能原则》。

    45710

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

    BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字会稍长...) 如何使用BEM 一个独立的(语义上或视觉上),可以复用而不依赖其它组件的部分,可作为一个块(Block) 属于块的某部分,可作为一个元素(Element) 用于修饰块或元素,体现出外形行为状态等特征的...,可作为一个修饰器(Modifier) 在本规范中,以双下划线 __ 来作为块和元素的间隔,以单下划线 _ 来作为块和修饰器 或 元素和修饰器 的间隔,以中划线 - 来作为 块|元素|修饰器 名称中多个单词的间隔...search-form_theme1 .search-form__input {} /* 错误:使用了标签 */ button.search-form__button {} .search-form button {} 而在SASS...文件中,也需要注意嵌套层次的意义,尽量按照 BEM三层来 /* 避免这样做 .search 不是一个独立的块 */ .search { /* 应该把这个块提取出来 */ &-form {

    98361

    css模块化及CSS Modules使用详解

    它可以通过在不同组件设定不同的功能,把一个问题分解成多个小的独立、互相作用的组件,来处理复杂、大型的软件。...class 命名技巧 CSS Modules 的命名规范是从 BEM 扩展而来。...BEM 把样式名分为 3 个级别,分别是: Block:对应模块名,如 Dialog Element:对应模块中的节点名 Confirm Button Modifier:对应节点相关的状态,如 disabled...下面演示如何在 JS 中读取 Sass 变量: /* config.scss */ $primary-color: #f40; :export { primaryColor: $primary-color...幸运的是,CSS Modules 这点做的很好: 如果我对一个元素使用多个 class 呢? 没问题,样式照样生效。 如何我在一个 style 文件中使用同名 class 呢?

    6.9K100

    编写模块化CSS——BEM

    如果做过,你可能会意识到 CSS 架构不够强大所带来的恐惧。你可能还会研究如何编写可维护的 CSS。 由于我们的行业很棒,我们有很多推荐的解决方案。...然后,当我尝试不同的方法时,我开始把我认为有意义的东西包含在我的探索过程中。 在这篇文章中,我想和大家分享一下我如何构建 CSS 以及为什么我这样做。 希望它可以帮助你找到你喜欢的方法。...在我们的按钮示例中,我们只需要将 padding 写入 mixin。 在这里,我在块中调用这个 mixin: ? 万岁!现在世界静好! 但是...如果我不使用 Sass 怎么办? 放轻松!...他们是: 只把子子元素链接到有意义的块 创建新的块来保存元素 链接孙元素到块 虽然 BEM 建议你将 BEM 元素写作 .block__element ,但它不会规定你的 HTML 应如何。...但是,在.block__item中有连接到 .item 的元素中。 在我的 CSS(Sass)中,我在 .block__item 中嵌套 .item 元素,赋予了它所需的上下文。 ?

    2.1K70

    【Web前端】理解调试和组织 CSS

    这种方式可以直观地看到 CSS 如何应用于每个元素,并且实时预览更改效果。 View Source:显示页面的原始 HTML 代码。...审查 CSS 在开发者工具的“元素”面板中,你可以查看选定元素的所有 CSS 样式。点击某个元素后,右侧的样式面板会列出该元素应用的所有 CSS 规则及其来源。...你可以通过以下操作审查 CSS: 查看所有样式:展开每个 CSS 规则,查看所有应用的样式属性。 计算样式:在“计算”面板中查看该元素的最终计算样式,了解实际渲染的属性值。...在“元素”面板中,通常会显示元素的盒模型视图,帮助你理解每个部分的大小和位置。 三、解决优先级问题 CSS 的优先级规则决定了当多个样式规则适用于同一元素时,哪个规则生效。...在 BEM 中,一个“块”指的是独立的组件,比如按钮、菜单或徽标。一个“元素”则是属于某个块的子组件,例如列表项或标题。修饰符用于标识块或元素的不同状态或变体,从而改变它们的样式或行为。

    6100
    领券