首页 > 其他分享 >SCSS的嵌套规则可以减少重复代码,那么如何在嵌套规则中使用父选择器?

SCSS的嵌套规则可以减少重复代码,那么如何在嵌套规则中使用父选择器?

时间:2023-10-30 11:06:09浏览次数:22  
标签:color button 嵌套 background 规则 active 选择器

在SCSS中,使用&符号来引用父选择器,在嵌套规则中使用父选择器。这样可以避免重复编写选择器,并且在生成的CSS中保持正确的层级关系。

以下是一个示例,展示了如何在嵌套规则中使用父选择器:

.button {
  background-color: blue;

  &:hover {
    background-color: darkblue;
  }

  &.active {
    background-color: red;
  }

  .icon {
    color: white;
    font-size: 16px;
  }
}

在上面的示例中,.button选择器是父选择器。在嵌套规则中,使用&引用父选择器。

  • &:hover表示当鼠标悬停在.button元素上时,应用这个样式。
  • &.active表示当.button元素有.active类时,应用这个样式。
  • .icon表示嵌套在.button元素内的.icon元素,不使用&引用父选择器。 在编译为CSS后,生成的代码如下:
.button {
  background-color: blue;
}

.button:hover {
  background-color: darkblue;
}

.button.active {
  background-color: red;
}

.button .icon {
  color: white;
  font-size: 16px;
}

通过使用&引用父选择器,可以编写更具可读性和维护性的代码。

父选择器的引用可以嵌套在任何层级的规则中,并且可以与其他选择器和修饰符组合使用。

标签:color,button,嵌套,background,规则,active,选择器
From: https://blog.51cto.com/u_15315508/8086447

相关文章

  • idea 插件 checkstyle 规则示例和说明
    idea安装插件idea配置插件checkstyle.xml示例和说明<?xmlversion="1.0"?><!DOCTYPEmodulePUBLIC"-//Checkstyle//DTDCheckstyleConfiguration1.3//EN""https://checkstyle.org/dtds/configuration_1_3.dtd"><m......
  • 【C++】继承 ⑧ ( 继承 + 组合 模式的类对象 构造函数 和 析构函数 调用规则 )
    文章目录一、继承+组合模式的类对象构造函数和析构函数调用规则1、场景说明2、调用规则二、完整代码示例分析1、代码分析2、代码示例一、继承+组合模式的类对象构造函数和析构函数调用规则1、场景说明如果一个类既继承了基类,又在类中维护了一个其它类型的成员......
  • json 对象属性的输出顺序测试,fastJson 有序,jackson,gson无序(需代码中人工按约定来编码
    json对象属性的输出顺序测试,fastJson有序,jackson,gson无序(需代码中人工按约定来编码)接口数据签名规则fastJson会根据对象的字段的首字母来排序。而jackson,gson是根据对象的类中定义的属性的代码中的先后顺序输出。不会排序。针对业务场景需要对接口中对象存在集合列表等,需要......
  • vant时间选择器中对minDate进行初始化
    vant组件库中,DatetimePicker可以通过min-date和max-date属性确定可选的时间范围。但他只支持Date类型,时间戳的话会报错,需要转换一下<van-popupv-model="showStartTime"position="bottom"><van-datetime-pickerv-model="defaultStartDate"......
  • 潮玩蘑菇星球app软件开发系统规则
      潮玩蘑菇星球app游戏是一款迅速在全球流行的软件,我们的平台目标是打造一个富有乐趣的玩法,用户进入就会发现稀有的玩法,道具,人物。我们精心打造的一套严格的模式玩法规则,保证拥有高品质的客户体验。  1.游戏的开放性:平台坚持开放的态度,所有的用户参与加入,团队,我们都会提供......
  • 潮玩宇宙游戏系统开发详细规则
      一、游戏概述  潮玩宇宙游戏软件开发主题是以策略类游戏为主,玩家扮演各种的潮玩角色,通过收集相关的潮玩形象,培养潮玩宠物,打造出属于自己的潮玩宇宙项目。  二、系统概述  该游戏系统软件包括潮玩收集,潮玩养成,宇宙区域探索,战斗环境。玩家通过游戏内的各种玩法......
  • MySQL学习(10)基于规则的优化
    前言MySQL为了更高的执行效率,会将客户端发送的SQL语句进行优化。条件化简MySQL优化器会对SQL语句中的表达式进行简化处理,以提高执行效率。移除不必要的括号。常量传递。a=5ANDb>a可优化为a=5ANDb>5。移除没用的条件。优化器会移除掉明显为TRUE或FALSE的表......
  • PCB封装命名规则,本文转载https://www.xjx100.cn/news/432127.html?action=onClick
    SO、SOP、SOIC、MSOP、TSSOP、TSOP、VSSOP、SSOP、SOJ封装详解 1. 简要信息如下: 2.SOP和SOIC的规格多是类似的,现在大多数厂商基本都采用的是SOIC的描述:SOIC8有窄体150mil的(外形封装宽度,不含管脚,下同),管脚间距是1.27mm,如下:有宽体的208mil的,管脚间距是1.27mm,如下:......
  • 【技术文档】RTSP摄像头不同厂家规则
    海康摄像头rtsp规则(常见)1. rtsp://admin:[email protected]:554/h264/ch1/main/av_stream2. rtsp://admin:[email protected]:554/Streaming/Channels/101  (主码)3. rtsp://admin:[email protected]:554/Streaming/Channels/102  (子码)海康摄像头rtsp规......
  • iptables规则补充
    iptables规则小结1.设置默认规则为ACCEPTiptables-PINPUTACCEPTiptables-PFORWARDACCEPTiptables-POUTPUTACCEPT2.iptables-S获得完整的规范#iptables-S(snip)-ADOCKER-d172.17.0.2/32-ptcp-mtcp--dport80-jACCEPT(snip)将-A转换为-D并将......