大前端

主题

@at-root ​

作用 ​

@at-root可以使被嵌套的选择器或属性跳出嵌套

语法 ​

scss
@at-root <selector>{
	...
}

普通嵌套 ​

scss
.parent {
  font-size: 12px;
  .child {
    font-size: 14px;
    .son {
      font-size: 16px;
    }
  }
}

作用某个选择器使其跳出嵌套 ​

scss
.parent {
  font-size: 12px;
  @at-root .child {
    font-size: 14px;
    @at-root .son {
      font-size: 16px;
    }
  }
}

作用某些选择器使其跳出嵌套 ​

scss
.parent {
  font-size: 12px;
  @at-root {
    .child-1 {
      font-size: 14px;
    }
    .child-2 {
      font-size: 16px;
    }
  }
}

@at-root 与 & 的结合使用 ​

&的使用

scss
.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 的一则样式

scss
.block {
  width: 1000px;
}
.block__element {
  font-size: 12px;
}
.block--modifier {
  font-size: 14px;
}
.block__element--modifier {
  font-size: 16px;
}

实现

scss
.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）

演示

scss
@media screen {
  .parent {
    font-size: 12px;
    @at-root (without: media) {
      .child {
        font-size: 14px;
        .son {
          font-size: 16px;
        }
      }
    }
  }
}
scss
@supports (display: flex) {
  .parent {
    font-size: 12px;
    @at-root (with: supports) {
      .child {
        font-size: 14px;
        .son {
          font-size: 16px;
        }
      }
    }
  }
}

案例简单演示@at-root 的用法 ​

html

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

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