SASS로 CSS 클래스 선택기를 구조화합니다-CSS 튜토리얼-php.cn

Structuring CSS Class Selectors with Sass 키 포인트

BEM 및 SMACSS와 같은 CSS 이름 지정 규칙은 CSS 클래스 선택기에 크게 의존하며 SASS를 사용하면 이러한 선택기를 작성하면 모듈 식적이고 재사용 할 수 있습니다. SASS에서 네이티브 셀렉터를 사용하면 문서의 루트 레벨에서 원본 블록 이름에서 서브 클래스 이름을 생성하여 코드를 단순화하고 변수 또는 믹스 인과 같은 추가 도우미의 필요성을 줄일 수 있습니다.

BEM Mixin은 BEM의 작동 방식을 이해하면 이해하기 쉬운 친절한 API를 제공하지만 논리는 Mixin 뒤에 숨겨져있어 새로운 선택기와 클래스를 생성 할 수 있습니다.

인 Humanifed-BEM Mixin은 블록 요소 모디퍼 용어를 숨겨 코드 가독성을 향상 시키도록 설계되었지만 일부 개발자에게는 너무 많은 추상화가 필요할 수 있습니다.

많은 CSS 명명 규칙이 있습니다. 당신은 이미 BEM과 SMACSS에 대해 알고있을 것입니다 (후자는 단순한 이름 지정 대회 이상). 그리고 OOCSS는 완전한 방법론과 같습니다. 그들은 모두 재사용 가능하기 때문에 CSS 클래스 선택기에 크게 의존합니다.
Sass를 사용하는 는
이 선택기를보다 모듈 식으로 작성하는 데 도움이 될 수 있습니다. 선택기 중첩 및 믹스 인을 사용하면 필요한 API를 구축하기 위해 멋진
미친 솔루션을 만들 수 있습니다. 이 기사에서는이 방법들 중 몇 가지를 소개하여 내가 생각하는 각 방법의 장단점을 나열합니다.
기본 선택기 중첩
원래 블록 이름을 반복하지 않고 선택기를 둥지 할 수 있다는 것은 SASS에서 장기적인 요구 사항이었습니다. Sass 3.3 에서이 기능이 마침내 소개되었습니다. 베타 기간 동안, 매우 이상한 구문이 처음 사용되었고, 안정적인 버전이 생방송 될 때 나중에 더 나은 구문으로 변경되었습니다. Natalie Weizenbaum 은이 게시물의 변경에 대한 이유를 설명합니다.
기본적으로, 참조 선택기 (&)는 서브 클래스 이름의 일부로 사용하여 문서의 루트 레벨에서 일류 이름을 가진 다른 클래스를 생성 할 수 있습니다 ( @at root가 필요하지 않음) 이름.

이 기능은 매우 인기있는 미디어 객체와 같은 BEM Selectors를 작성하기 위해 빠르게 과도하게 사용되었습니다.

이전 코드는 다음과 같이 컴파일됩니다

pros 는 기본 기능에 의존하며 변수 또는 믹스 인과 같은 추가 도우미가 필요하지 않습니다. ~~참조 선택기 (&)의 작동 방식을 이해하면 전체적으로 마스터하기 쉽습니다.~~

단점 는 & 구문을 노출시켜 SASS에 익숙한 개발자에게 익숙하지 않으면 약간 혼란스럽고 두려워 할 수 있습니다. 중첩은 @at-root를 사용하지 않는 한 일반적으로 루트 디렉토리에 인쇄되지 않습니다.

bem mixin

Sass 3.3의 베타 기간 동안 클래스에서 생성 된 구문은 매우 추악했기 때문에 (@at-root #{&} __ 요소), 우리는 곧 여기저기서 믹스 인을 보았고 더 친근한 API를 제공했습니다.

<code>.foo {
  // .foo 的样式

  &-bar {
    // .foo-bar 的样式
  }
}</code>

로그인 후 복사

당신은 다음과 같이 사용할 수 있습니다 :

우리는 또한 같은 방식으로 블록 믹스를 만들 수 있지만 블록은 클래스 이름이기 때문에 블록만큼 유용하지 않습니다. 간단하게 유지합시다. 일부의 경우 수정 자와 요소가 너무 길어 보이지만 일부 E와 M이 전체 개화를 볼 수 있습니다.

<code>.media {
  // .media 块的样式

  &__img {
    // .media__image 元素的样式

    &--full {
      // .media__image--full 修改后的元素的样式
    }
  }

  &--new {
    // .media--new 修饰符的样式
  }
}</code>

로그인 후 복사

pros

이 버전은 BEM의 작동 방식을 이해하면 이해하기 쉬운 친숙한 API를 제공합니다.

<code>.media {}
.media__img {}
.media__img--full {}
.media--new {}</code>

로그인 후 복사

단점

물류는 Mixin 뒤에 숨겨져 있으며, 새로운 선택기와 클래스를 생성하는 것은 무슨 일이 일어나고 있는지 정확히 알지 못한다면 분명하지 않습니다.

단일 문자 Mixins는 믹스 인이 사용되는 것을 이해하기가 어렵 기 때문에 좋은 생각이 아닐 수도 있습니다. B와 M은 많은 것을 나타낼 수 있습니다.

인간화 된 빵 믹스

최근에, 나는 Anders Schmidt Hansen의 새로운 BEM과 같은 접근법을 읽었습니다. 아이디어는 큰 소리로 읽을 때 의미가있는 일반적인 단어 뒤에 블록 요소 모디퍼 용어를 숨기는 것입니다.

이 경우, 요점은 잘 알려진 믹스 인 뒤에 코드를 숨기고 코드가 이야기를하는 것처럼 보이므로 새로운 믹스 인이 실제로 유용합니다.
anders는 추가로 사용됩니다 (..) 및 Holds (..) Mixin. 전체 아이디어는 내 시대 (..) Mixin을 상기시켜줍니다. 요소가 우수한 맥락에 따라 스타일이있을 때 사용자 친화적 인 Mixin을 숨기고 뒤에 숨어 있습니다.

pros 이 접근법은 주요 IS (SMACSS에 의해 홍보)를 사용하여 주 수업을 지명하기 시작한 것처럼 코드의 가독성을 향상시키는 데 도움이됩니다. 는 여전히 특정 접근법 (이 경우 BEM)을 고수하지만 개발자가 더 쉽게 사용할 수 있습니다.

단점

<code>@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}</code>

로그인 후 복사

더 많은 믹스 인, 더 많은 보조 도구 및보다 안정적인 학습 곡선을 얻기 위해 배울 수있는 것들. CSS 선택기와 같은 간단한 것을 쓰기 위해 많은 믹스 인을 다루는 것을 좋아하는 것은 아닙니다.

이것은 일부 사람들에게는 너무 추상적 일 수 있습니다. 상황에 따라 다릅니다.

<code>.media {
  // .media 块的样式

  @include element("image") {
    // .media__image 元素的样式

    @include modifier("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include modifier("new") {
    // .media--new 修饰符的样式
  }
}</code>

로그인 후 복사

최종 생각

<code>.media {
  // .media 块的样式

  @include e("image") {
    // .media__image 元素的样式

    @include m("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include m("new") {
    // .media--new 修饰符的样式
  }
}</code>

로그인 후 복사

이러한 기술을 사용하면 SASS에 의해 생성되기 전에 선택기가 실제로 존재하지 않기 때문에 선택기 코드베이스가 검색 될 수 없게됩니다. 선택기 전에 댓글을 추가하면이 문제를 해결할 수 있지만 처음부터 선택기를 작성하지 않겠습니까?

검색 가능한 코드 기반에 관심이있는 경우 새 SASS 기능을 사용하여 모든 선택기 (.B {& __ e {}})를 사용하지 마십시오.

- Kaelig (@kaelig) 2014 년 3 월 12 일

어쨌든, 친구, 여기 Sass에서 CSS 셀렉터를 작성하는 것이 가장 인기있는 방법이 있습니다. 나와 당신 사이에 나는 그들을 좋아하지 않습니다. 그리고 그것은 단지 검색 문제 때문이 아니라 큰 문제가 아닙니다.

나는 그들이 해결하려는 문제를 볼 수 있지만 때로는 단순성이 건조하다는 것을 볼 수 있습니다. 루트 선택기를 반복하는 것은 큰 문제가되지 않으며 코드는 중첩되지 않았을뿐만 아니라 CSS에 더 가깝기 때문에 읽기가 더 쉽게 읽을 수 있습니다.

때로는 건조보다 간단합니다.

- Hugo Giraudel (@hugogiraudel) 2015 년 5 월 19 일
SASS 구조화 된 CSS 클래스 선택기 사용에 대한 FAQ SASS 구조화 된 CSS 클래스 선택기를 사용하는 의미는 무엇입니까?
SASS 구조화 된 CSS 클래스 선택기를 사용하는 것은 깨끗하고 순서가 좋고 효율적인 스타일 시트를 유지하는 데 필수적입니다. Sass (Syntacly Awesome 스타일 시트를 대신하여)는 개발자가 변수, 중첩 규칙, Mixin 및 기능을 사용할 수 있도록 CSS 전처리 업체로 CSS를보다 역동적이고 재사용 할 수 있도록합니다. 구조화 된 클래스 선택기를 사용하면 스타일 계층 구조를 만들어 다른 요소와 스타일 간의 관계를보다 쉽게 이해할 수 있습니다. 이는 CSS 코드의 유지 관리 가능성과 확장 성을 크게 향상시킬 수 있습니다.
Sass에서 와일드 카드 선택기를 사용하는 방법은 무엇입니까?
범용 선택기라고도하는 와일드 카드 선택기는 SASS에서 특정 패턴과 일치하는 요소를 선택하는 데 사용될 수 있습니다. 예를 들어 와일드 카드 선택기 "*"를 사용하여 모든 요소를 선택할 수 있습니다. 그러나 Sass는 와일드 카드 클래스 이름을 직접 지원하지 않습니다. 클래스 이름이 특정 문자열로 시작하는 요소를 선택하려면 속성 선택기 사용과 같은 해결 방법을 사용해야합니다. 예를 들어, 선택기

를 사용하여 클래스 이름이 "접두사"로 시작하는 모든 요소를 선택할 수 있습니다.

Sass의 클래스 선택기와 @extend 지시문을 사용할 수 있습니까?

예, @extend 지시문은 Sass에서 클래스 선택기와 함께 사용할 수 있습니다. @extend 지시문은 한 선택기가 다른 선택기의 스타일을 상속받을 수 있도록합니다. 이는 CSS 코드의 중복성을 줄이는 데 유용합니다. 예를 들어, 동일한 스타일을 많이 공유하는 두 개의 클래스가있는 경우 한 클래스에서 해당 스타일을 정의한 다음 @extend 지시문을 사용하여 이러한 스타일을 다른 클래스에 적용 할 수 있습니다.

SASS를 사용하여 CSS 코드를보다 효율적으로 구성하는 방법은 무엇입니까?

SASS는 CSS 코드를보다 효과적으로 구성하는 데 도움이되는 몇 가지 기능을 제공합니다. 기능 중 하나는 Nesting으로, HTML 구조를 반영하여 다른 선택기의 CSS 선택기를 중첩 할 수 있습니다. 이로 인해 CSS 코드를 쉽게 읽고 유지 관리 할 수 있습니다. 다른 기능은 변수로 재사용 가능한 값을 정의 할 수 있습니다. 이것은 색상, 글꼴 및 간격과 같은 스타일의 일관성을 유지하는 데 유용합니다.

SASS 구조화 된 CSS 클래스 선택기를 사용하기위한 모범 사례는 무엇입니까?

SASS 구조화 된 CSS 클래스 선택기를 사용하기위한 몇 가지 모범 사례가 있습니다. 모범 사례 중 하나는 선택기를 가능한 한 구체적으로 만드는 것입니다. 이를 통해 스타일이 실수로 다른 요소에 영향을 미치는 것을 방지 할 수 있습니다. 또 다른 모범 사례는 의미있는 클래스 이름을 사용하여 요소의 목적 또는 기능을 설명하는 것입니다. 이로 인해 CSS 코드를 쉽게 읽고 유지 관리 할 수 있습니다. 또한 BEM (블록, 요소, 수정 자)과 같은 수업에 일관된 명명 규칙을 사용하여 다른 클래스 간의 관계를보다 쉽게 이해할 수 있도록하는 것이 가장 좋습니다.