Sass中@at-root使用
作用
@at-root可以使被嵌套的选择器或属性跳出嵌套
使用场景
- 跳出嵌套:当你有一系列的嵌套规则,但希望某个特定的样式规则不被嵌套时,可以使用
@at-root
。 - 全局样式:在编写组件或模块化样式时,你可能需要一些全局样式。使用
@at-root
可以确保这些样式不会被嵌套在组件的选择器内。 - 优化编译后的CSS:有时深层嵌套会导致编译后的CSS效率低下,使用
@at-root
可以减少不必要的嵌套,优化生成的CSS。 - 与混合宏(Mixins)一起使用:在混合宏中,如果你想让混合宏中的某些样式跳出当前的嵌套结构,可以在混合宏内部使用
@at-root
。 - 与媒体查询一起使用:当你想在媒体查询中应用样式,但不希望这些样式被嵌套在父选择器内时,可以在媒体查询中使用
@at-root
。
语法
@at-root <selector>{
...
}
普通嵌套
.parent {
font-size: 12px;
.child {
font-size: 14px;
.son {
font-size: 16px;
}
}
}
作用某个选择器使其跳出嵌套
.parent {
font-size: 12px;
@at-root .child {
font-size: 14px;
@at-root .son {
font-size: 16px;
}
}
}
作用某些选择器使其跳出嵌套
.parent {
font-size: 12px;
@at-root {
.child-1 {
font-size: 14px;
}
.child-2 {
font-size: 16px;
}
}
}
@at-root与&的结合使用
&的使用
.foo {
& .bar {
color: gray;
}
}
.foo {
& {
color: gray;
}
}
.foo {
.bar & {
color: gray;
}
}
这跟前面加@at-root效果是一样的
使用@at-root结合#{&}实现BEM效果
理解BEM:https://zhuanlan.zhihu.com/p/122214519
官网学习:https://en.bem.info/methodology/quick-start/
BEM完整命名规则:block-name__element-name–modifier-name (也可以换成驼峰式命名)
官方网站最新推出:block-name__element-name_modifier-name
比较BEM的一则样式
.block{width: 1000px;}
.block__element{font-size: 12px;}
.block--modifier{font-size: 14px;}
.block__element--modifier{font-size: 16px;}
实现
.block {
width: 1000px;
@at-root #{&}__element {
font-size: 12px;
@at-root #{&}--modifier {
font-size: 16px;
}
}
@at-root #{&}--modifier {
font-size: 14px;
}
}
//或
.block {
width: 1000px;
@at-root {
#{&}__element {
font-size: 12px;
@at-root #{&}--modifier {
font-size: 16px;
}
}
#{&}--modifier {
font-size: 14px;
}
}
}
// 实现上也能直接用&实现
.block {
width: 1000px;
&__element {
font-size: 12px;
&--modifier {
font-size: 16px;
}
}
&--modifier {
font-size: 14px;
}
}
@at-root (without: …)和@at-root (with: …)的使用
默认@at-root只会跳出选择器嵌套,而不能跳出@media或@support,如果要跳出这两种,则需使用@at-root (without: media),@at-root (without: support)。这个语法的关键词有四个:
1、all(表示所有) 2、rule(表示常规css) 3、media(表示media) 4、supports(表示supports)
演示
@media screen {
.parent {
font-size: 12px;
@at-root (without: media) {
.child {
font-size: 14px;
.son {
font-size: 16px;
}
}
}
}
}
@supports (display: flex) {
.parent {
font-size: 12px;
@at-root (with: supports) {
.child {
font-size: 14px;
.son {
font-size: 16px;
}
}
}
}
}
案例简单演示@at-root的用法
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示@at-root的用法</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<!-- 头部 -->
<header class="header">
<div class="logo">logo</div>
<form class="search-form">
<div class="content">
<input class="input" placeholder="搜索内容">
<button class="button">搜索</button>
</div>
</form>
</header>
<!-- 中间 -->
<div class="center"></div>
<!-- 底部 -->
<footer class="footer"></footer>
</body>
</html>
简单的test.scss
body {
margin: 0;
padding: 0;
width: 750px;
max-width: 750px;
margin: 0 auto;
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
background-color: aquamarine;
height: 100px;
display: flex;
align-items: center;
padding: 0 30px;
@at-root .logo {
font-size: 36px;
margin-right: 30px;
}
.search-form {
.content {
display: flex;
align-items: center;
.input {
padding: 4px 10px;
margin-right: 10px;
}
.button {
border: none;
background-color: cadetblue;
color: #FFF;
height: 28px;
width: 60px;
}
}
}
}
.center {
flex: 1;
background-color: black;
}
.footer {
height: 200px;
background-color: burlywood;
}