时间戳

首页 > 解决方案 > sass 嵌套不像我想象的那样工作

css - sass 嵌套不像我想象的那样工作

问题描述

我正在尝试学习如何使用 Sass，但我似乎无法嵌套。有人可以向我解释我做错了什么。我知道这是一个真正的初学者问题，但我不明白我做错了什么。任何帮助，将不胜感激。

.header {
  display: flex;
  height: 10vh;
  background-color: #131921;
  position: sticky;
  top: 0;
  z-index: 100;
  align-items: center;

  header__logo {
    width: 100px;
  }
} 

<div className="header">
  <img
    className="header__logo"
    src="https://pngimg.com/uploads/amazon/amazon_PNG11.png"
    alt="amazon_logo"
   />

  <div className="header__search">
    <input className="header__searchInput" type="text" />
    <SearchIcon />
  </div>
  <div className="header__nav">
    <div className="header__boxes">
      <span className="header__boxesFirstLine">hello</span>
      <span className="header__boxesSecondLine">sign in</span>
    </div>
    <div className="header__boxes">
      <span className="header__boxesFirstLine">returns</span>
      <span className="header__boxesSecondLine">& orders</span>
    </div>
    <div className="header__boxes">
      <span className="header__boxesFirstLine">your</span>
      <span className="header__boxesSecondLine">prime</span>
    </div>
  </div>
</div>

我的印象是，为了设置标题 img 的样式，它有一个 header__logo 类，我可以将它嵌套在我的 sass 文件中的 .header 括号中，但这显然是错误的，因为它没有出现在生成的 App 中。 css 文件，并且不在开发人员工具中。

对不起，我知道这是一个菜鸟问题。

标签： cssreactjssassmaterial-ui

解决方案

我正在添加一个快速答案，即使这是一个错字（缺少.类名`），但因为您正在学习。

由于您的所有子元素都使用 BEM 样式作为类名，因此您可以使用以下方法引用父元素&：

.header {
  
  /* set the parent as a variable to reference for grandchildren */  
  $p : &;
    
  display: flex;
  height: 10vh;
  background-color: #131921;
  position: sticky;
  top: 0;
  z-index: 100;
  align-items: center;

  &__nav {
      /* styles */
      
      #{$p}__boxes {
          /* styles */
      }
  } 

  &__logo {
    width: 100px;
  }

  &__search {
      /* styles*/
 
  }

  &__boxes {
      /* styles*/
 }

}

这将编译为：

.header {
  display: flex;
  height: 10vh;
  background-color: #131921;
  position: sticky;
  top: 0;
  z-index: 100;
  align-items: center;
}
.header__nav {
  /* styles */
}
.header__nav .header__boxes {
  /* styles */
}
.header__logo {
  width: 100px;
}
.header__search {
  /* styles*/
}
.header__boxes {
  /* styles*/
}

推荐阅读