[sass] Sass .scss : 중첩 및 여러 클래스?

Program / 글쓴이

현재 프로젝트에 Sass (.scss)를 사용하고 있습니다.

다음 예 :

HTML

<div class="container desc">
    <div class="hello">
        Hello World
    </div>
</div>

SCSS

.container {
    background:red;
    color:white;

    .hello {
        padding-left:50px;
    }
}

이것은 잘 작동합니다.

중첩 스타일을 사용하면서 여러 클래스를 처리 할 수 ​​있습니까?

위의 샘플에서 나는 이것에 대해 이야기하고 있습니다 :

CSS

.container.desc {
    background:blue;
}

이 경우 모든 div.container것이 정상적으로 red되지만 div.container.desc파란색이됩니다.

containerSass와 함께 이것을 어떻게 중첩시킬 수 있습니까?

답변

부모 선택기 reference를 사용할 수 있으며 &컴파일 후 부모 선택기로 대체됩니다.

예를 들어 :

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

이 &완전히 해결되므로 부모 선택기가 자체 중첩 된 경우을 교체하기 전에 중첩이 해결됩니다 &.

이 표기법은 의사 요소 및 클래스 를 작성하는 데 가장 자주 사용됩니다 .

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

그러나 *& 를 거의 원하는 위치에 배치 할 수 있으므로 다음도 가능합니다.

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

그러나 이렇게하면 중첩 구조가 손상되어 스타일 시트에서 특정 규칙을 찾는 노력이 증가 할 수 있습니다.

* : 앞에 공백 이외의 문자는 사용할 수 없습니다 &. 당신의 직접 연결 할 수 없도록 selector+를 &– #id&오류가 발생합니다.

답변

이 경우 클래스 이름이나 클래스 이름 규칙을 만드는 더 좋은 방법을 사용해야한다고 생각합니다. 예를 들어, 당신이 말한 것처럼 .container특정 사용법이나 모양에 따라 클래스의 색상이 달라 지길 원합니다 . 당신은 이것을 할 수 있습니다 :

SCSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

  // or you can do a more specific name
  &--blue {
    background: blue;
  }

  &--red {
    background: red;
  }
}

CSS

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

위의 코드는 클래스 명명 규칙에서 BEM 방법론을 기반으로합니다. 이 링크를 확인할 수 있습니다. BEM — 블록 요소 수정 자 방법론

답변

Christoph의 답변은 완벽합니다. 그러나 때로는 하나보다 많은 수업을 원할 수도 있습니다. 이 경우을 사용하여 두 루트 클래스를 나란히 배치 할 수있는 @at-root및 #{}css 기능을 시도 할 수 &있습니다.

이것은 nothing before &규칙 으로 인해 작동하지 않습니다 .

container {
    background:red;
    color:white;

    .desc& {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}

스 니펫 확장

그러나 이것은 (를 사용하여 @at-root plus #{&}) :

container {
    background:red;
    color:white;

    @at-root .desc#{&} {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}

스 니펫 확장

답변