第十二节： Sass中@at-root使用-CSDN博客

本文链接：https://blog.csdn.net/everfoot/article/details/141690850

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;
}