sass教程高阶使用:1【&】选择器运用代表父元素； 2【:】属性嵌套选择器； 3 【%】占位符选择器，配套@extend

最新推荐文章于 2025-02-17 10:44:21 发布

前端小云儿

最新推荐文章于 2025-02-17 10:44:21 发布

阅读量219

点赞数 1

分类专栏： css基础-js基础硬核-知识体系文章标签： sass rust 前端

本文链接：https://blog.csdn.net/jieweiwujie/article/details/143563068

版权

css基础-js基础硬核-知识体系专栏收录该内容

49 篇文章

订阅专栏

1【&】选择器运用代表父元素

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

<template>
  <h3>【&】选择器运用 代表父元素</h3>
  <div class="home">
    <h4 class="home-h4">
      红颜色
      <span>span字体</span>
    </h4>
    <div class="home-div">
      <ul>
        <li>
          <div>11</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<!-- <style lang="scss" scoped>
.home {
  border: 1px solid red;
  .home-h4 {
    color: red;
  }
  .home-div {
    color: blue;
  }
}
</style> -->

<style lang="scss" scoped>
.home {
  border: 1px solid red;
  &-h4 {
    color: red;
  }
  &-div {
    color: blue;
    &:hover {
      color: pink;
    }
  }
}
</style>

2【:】属性嵌套选择器

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

<template>
  <h3>【:】属性嵌套选择器</h3>
  <div class="home">
    <h4 class="home-h4">
      红颜色
      <span>span字体</span>
    </h4>
    <div class="home-div">
      <ul>
        <li>
          <div>11</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<!-- <style lang="scss" scoped>
.home {
  border: 1px solid red;
  .home-h4 {
    color: red;
    font-weight: 500;
    font-size: 20;
    font-family: "Courier New", Courier, monospace;
  }
}
</style> -->
<style lang="scss" scoped>
.home {
  border: 1px solid red;
  .home-h4 {
    color: red;
    //这里使用冒号提取公共部分
    font: {
      weight: 500;
      size: 20;
      family: "Courier New", Courier, monospace;
    }
  }
}
</style>

3【%】占位符选择器，配套@extend

复用css样式

<template>
  <h3>【%】占位符选择器，配套@extend</h3>
  <div class="home">
    <h4 class="home-h4">
      红颜色
      <span>span字体</span>
    </h4>
  </div>
</template>

<style lang="scss" scoped>
//可以提取公共部分
.kongclass%base {
  font-weight: 500;
  font-size: 20;
  font-family: "Courier New", Courier, monospace;
}
.home {
  border: 1px solid red;
  .home-h4 {
    color: red;
    //表示继承上面的属性
    @extend %base;
  }
}
</style>

你学废了吗~