【CSS/SCSS】@layer的介绍及使用方法

news2024/11/6 7:46:27

目录

  • 基本用法
  • `@layer` 的作用与优点
    • 分离样式职责,增强代码可读性和可维护性
    • 防止无意的样式冲突
    • 精确控制样式的逐层覆盖
    • 提高复用性
  • 兼容性
  • 实际示例:使用 `@import` 管理加载顺序
  • 实际示例:混入与 `@layer` 结合使用

@layer 是 CSS 中用于组织和管理样式优先级的分层规则。通过 @layer,可以将 CSS 样式分为多个层(layer),控制不同层的样式覆盖关系,而不需要依赖于选择器的具体优先级。这个功能在较大的项目中尤其有用,因为它可以避免样式冲突,确保自定义样式能覆盖框架或第三方库的默认样式。

基本用法

@layer reset, base, components, utilities;

/* 定义 reset 层 */
@layer reset {
  * {
    margin: 0;
    padding: 0;
  }
}

/* 定义 base 层 */
@layer base {
  body {
    font-family: sans-serif;
  }
}

/* 定义 components 层 */
@layer components {
  .button {
    padding: 10px;
    background-color: blue;
    color: white;
  }
}

/* 定义 utilities 层 */
@layer utilities {
  .text-center {
    text-align: center;
  }
}

@layer 的作用与优点

分离样式职责,增强代码可读性和可维护性

@layer 允许我们将不同层的样式逻辑分开,使得代码更加结构化和模块化。例如:

  • reset 层:用于初始化样式,清除浏览器默认样式。
  • base 层:为全局标签(如 body、h1 等)设置基础样式。
  • components 层:包含组件的样式,如按钮、卡片等。
  • utilities 层:是用于修改特定样式的工具类,如 text-center 等。

控制样式的覆盖顺序@layer 通过定义层级次序决定样式的应用顺序。reset 层会先应用,然后是 base、components 和 utilities 层,后面的层可以覆盖前面的层样式。
使用多个 @layer 顺序控制:通过将自定义样式按顺序放入 @layer,并保证它们在样式表中位于第三方样式之后,可以更好地管理优先级。

防止无意的样式冲突

通过 @layer,可以显式控制样式的优先级,不依赖于选择器的权重。这样可以减少无意的样式冲突。例如,如果一个第三方库没有使用 @layer,而您将其放在 base 层之前,它不会覆盖您的 components 层或 utilities 层样式。

精确控制样式的逐层覆盖

即使在多个层次中为同一元素定义样式,层的优先级仍然让您可以有序地覆盖样式。比如:

@layer reset {
  .button {
    background: none;
  }
}
@layer base {
  .button {
    padding: 8px;
  }
}
@layer components {
  .button {
    background-color: blue;
    color: white;
  }
}
@layer utilities {
  .button.large {
    padding: 12px;
  }
}

在这种情况下,components 和 utilities 可以为 .button 添加样式,但不会互相冲突,而是有条理地叠加。

提高复用性

分层结构有助于让样式在组件之间复用。例如 base 和 utilities 中的规则可以在多个组件中复用,而无需重新定义。这减少了代码的重复性,提高了样式的复用率。

兼容性

在这里插入图片描述

实际示例:使用 @import 管理加载顺序

如果您的样式是通过 @import 引入的,可以借助 @layer 和 @import 的组合,在 @layer 中引入第三方样式,以便更好地管理加载顺序。例如:

@layer library {
  @import url('third-party-library.css');
}

@layer custom {
  /* 自定义样式放置在 custom 层 */
  .button {
    background-color: blue;
    color: white;
  }
}

实际示例:混入与 @layer 结合使用

@layer components {
  /* 按钮样式 */
  @mixin button-style($bg-color) {
    background-color: $bg-color;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .btn-primary {
    @include button-style(blue);
  }

  .btn-secondary {
    @include button-style(gray);
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2230242.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PHP反序列化原生类字符串逃逸框架反序列化利用

PHP反序列化 概念 序列化的原因:为了解决开发中数据传输和数据解析的一个情况(类似于要发送一个椅子快递,不可能整个椅子打包发送,这是非常不方便的,所以就要对椅子进行序列化处理,让椅子分成很多部分在一起打包发送…

红队-shodan搜索引擎篇

如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 一.shodan原理与功能的介绍 Shodan Search Engine 它是专门搜网络设备的,只要联网的,只要有IP地址的都可以称为网络设备 1.shodan&#x…

synchronized进阶原理

synchronized进阶原理 1.轻量级锁 轻量级锁的使用场景:如果一个对象虽然有多个线程访问,但多线程访问的时间是错开的(也就是没有竞争),那么可以使用轻量级锁来优化(如果出现竞争,操作系统会将轻量级锁升级为重量级锁)。轻量级锁对使用者是透明的(由操作系统控制),即语法仍是s…

JavaWeb——Web入门(3/9)-HTTP协议:概述(概念、特点,HTTP协议定义,基于 TCP 协议,基于请求-响应模型)

目录 概念 特点 内容预告 概念 HTTP 协议定义:全称 Hyper Text Transfer Protocol,即超文本传输协议,规定了浏览器与服务器之间数据传输的规则,具体指客户端浏览器与服务器之间进行数据交互的数据格式。 在互联网的世界中&…

Altium Designer使用技巧(二)

一、创建类 1、按DC键,打开对象类。 2、右键添加一个类。命名为PWR。 3、将所有的电源类,全部添加到新创建的类中,从非成员类中点选到成员类中。 4、右下角点panes ,点PCB。 5、然后在左边单击PWR,点连接,可显示或…

边缘计算【智能+安全检测】系列教程--agx orin解决RTC时间问题

因为是离线运行,首要问题是时间不准确,就在主板上加装了纽扣电池,但是会有一系列问题,比如无法将RTC时间回写到系统时间,或者无法将系统时间写到RTC中等等一些列问题。为解决这些问题,一劳永逸的方式&#…

React中常用的hook函数(二)——useReducer和useContext

React中常用的hook函数(一)——useState和useEffect_usestate useeffect-CSDN博客https://blog.csdn.net/Mrs_Lupin/article/details/142905749?sharetypeblogdetail&sharerId142905749&sharereferPC&sharesourceMrs_Lupin&spm1011.2480.3001.8118React中常用…

Java项目实战II基于Java+Spring Boot+MySQL的智能推荐的卫生健康系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 基于Java、…

《Linux系统编程篇》消息队列(Linux 进程间通信(IPC))——基础篇

文章目录 引言消息队列(Message Queue)消息队列的特点消息队列的特性消息队列的操作ipcs -q 拓展ipcrm 拓展注意事项 结论 “山重水复疑无路,柳暗花明又一村。” ——陆游 引言 《Linux系统编程篇》——基础篇首页传送门 想象一下&#xff0…

微服务设计模式 - 重试模式(Retry Pattern)

微服务设计模式 - 重试模式(Retry Pattern) 定义 重试模式(Retry Pattern)是一种微服务中的设计模式,用于在临时性失败(如网络故障或暂时不可用的服务)发生时,自动重新尝试请求&…

『 Linux 』网络传输层 - TCP(二)

文章目录 TCP六个标志位TCP的连接三次握手 四次挥手为什么是三次握手和四次挥手 重传机制 TCP六个标志位 在TCP协议报文的报头中存在一个用于标志TCP报文类型的标志位(不考虑保留标志位),这些标志位以比特位选项的方式存在,即对应标志位为0则表示为假,对应标志位为1则为真; SYN…

VLAN虚拟局域网,eNSP实验讲解

VLAN虚拟局域网,eNSP实验讲解 一、概念二、eNSP仿真实验1、实验一:vlan演示(交换机端口access模式)2、实验二:vlan演示(交换机端口trunk模式) 一、概念 VLAN(Virtual Local Area Ne…

Ubuntu UFW防火墙规则与命令示例大全

在服务器安全领域,防火墙是守护网络安全的坚实盾牌。UFW(Uncomplicated Firewall),即“不复杂的防火墙”,是一个运行在iptables之上的防火墙配置工具,它为Ubuntu系统默认提供了一个简洁的命令行界面&#x…

基于 Python 的 Django 框架开发的电影推荐系统

项目简介:本项目是基于 Python 的 Django 框架开发的电影推荐系统,主要功能包括: 电影信息爬取:获取并更新电影数据。数据展示:提供电影数据的列表展示。推荐系统:基于协同过滤算法实现个性化推荐。用户系…

ORB-SLAM2源码学习:ORBextractor.cc:IC_Angle 利用灰度质心法求解关键点方向角

ORB特征点: 特征点是由关键点和描述子两部分组成,关键点是指特征点在图像中的位置,描述子是用来描述关键点周围的像素信息。ORB关键点是在FAST关键点的基础上进行改进给像素增加了一个主方向,称为Oriented FAST。描述子在BRIEF的…

【设计模式】如何用C++实现依赖倒置

【设计模式】如何用C实现依赖倒置 一、什么是依赖倒置? 依赖倒置原则(Dependency Inversion Principle,DIP)是SOLID面向对象设计原则中的一项。它的核心思想是: 高层模块不应该依赖于低层模块,两者都应该…

‌植物神经紊乱患者,这些锻炼适合你!

植物神经紊乱是一种常见的心理疾病,其主要症状包括焦虑、抑郁、失眠等,严重时还可能出现心慌、气短、憋气、出汗异常等症状。然而,通过适量的锻炼,我们可以帮助调节自主神经系统,缓解这些症状。那么,植物神…

Golang | Leetcode Golang题解之第525题连续数组

题目: 题解: func findMaxLength(nums []int) (maxLength int) {mp : map[int]int{0: -1}counter : 0for i, num : range nums {if num 1 {counter} else {counter--}if prevIndex, has : mp[counter]; has {maxLength max(maxLength, i-prevIndex)} …

第十七届山东省职业院校技能大赛通知分享

近日,山东省教育厅联合相关部门发布了关于举办第十七届山东省职业院校技能大赛的通知,标志着这一旨在深化教育教学改革、推进产教融合与校企合作的重要赛事即将拉开帷幕。 据了解,本次大赛将设中等职业教育组和高等职业教育组,共包…