[0919 TIL]scssについて

ネストされた文のサポート

.container {
  display: flex;
  .item {
    background-color: red;
    > span {
      background-color: blue;
      &:hover {
        background-color: green;
      }
    }
  }
}

.container {
  display: flex;
}
.container .item {
  background-color: red;
}
.container .item > span {
  background-color: blue;
}
.container .item > span:hover {
  background-color: green;
}

&演算子

$演算子

.container {
  .content {
    $size: 200px;
    width: $size;
    height: $size;
    @at-root .header {
      width: $size;
    }
  }
}

!global

.box-a {
  // !는 flag라고 부르며 글로벌이다.
  $h: 200px !global;
  width: $w;
  height: $h;
  margin: $w;
}

$primary: blue;
.box {
  $primary: orange !default;
}