Sass .scss: Zagnieżdżanie i wiele klas?

332

Używam Sass (.scss) do mojego obecnego projektu.

Poniższy przykład:

HTML

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

SCSS

.container {
    background:red;
    color:white;

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

To działa świetnie.

Czy mogę obsługiwać wiele klas podczas używania stylów zagnieżdżonych.

W powyższym przykładzie mówię o tym:

CSS

.container.desc {
    background:blue;
}

W tym przypadku div.containernormalnie wszystko byłoby, redale div.container.descbyłoby niebieskie.

Jak mogę zagnieździć to w containerSass?

matowy
źródło
1
Powinieneś użyć selektora podwójnej klasy. Ten problem jest doskonałym przykładem opcji zagnieżdżania w Sass. Wszystko o tym możesz przeczytać tutaj kolosek.com/nesting-in-less-and-sass
Zoric

Odpowiedzi:

570

Możesz użyć referencyjnego selektora rodzica & , zostanie on zastąpiony selektorem rodzica po kompilacji:

Na przykład:

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

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

&Będzie całkowicie rozwiązać, więc jeśli rodzic selektor jest zagnieżdżony się, gniazdowania zostaną rozwiązane przed wymianą &.

Notacja ta jest najczęściej używana do pisania pseudoelementów i klas :

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

Możesz jednak ustawić &praktycznie dowolną pozycję * , więc możliwe są również:

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

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

Należy jednak pamiętać, że to w jakiś sposób psuje strukturę zagnieżdżania, a tym samym może zwiększyć wysiłek związany ze znalezieniem określonej reguły w arkuszu stylów.

*: Żadne inne znaki oprócz białych znaków nie są dozwolone przed &. Nie można więc wykonać bezpośredniego połączenia selector+ &- #id&zwróciłoby błąd.

Christoph
źródło
12
Na marginesie, powszechnym zastosowaniem &jest pseudoelementy i pseudoklasy. Na przykład: &:hover.
zmiażdżyć
1
@crush Dla kompletności dodałem to do mojej odpowiedzi. Dziękuje za komentarz.
Christoph,
1
Dzięki. Myślałem, że jestem głupi, ponieważ nie jest to wspomniane w przewodniku po podstawach! BTW, dokumentacja przeniosła adres URL na: sass-lang.com/documentation/…
scipilot
1
Jeśli &jest używany na końcu linii, umieszcza tę linię na początku pozostałych klas na wszystkich pozostałych poziomach. Możesz łączyć elementy, wykonując czynności &.descponiżej .container, które dołączałyby do niego .desc, w wyniku czego.container.desc
Kate Miller
scss-lint sugeruje użycie „& :: hover” (podwójne dwukropki)
Marcel Lange
18

W takim przypadku myślę, że musisz użyć lepszego sposobu tworzenia nazwy klasy lub konwencji nazwy klasy. Na przykład, tak jak powiedziałeś, chcesz, aby .containerklasa miała inny kolor w zależności od określonego zastosowania lub wyglądu. Możesz to zrobić:

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;
}

Powyższy kod jest oparty na metodologii BEM w konwencjach nazewnictwa klas. Możesz sprawdzić ten link: BEM - Metodologia modyfikatora elementu bloku

Murdock Helscream
źródło
zauważ, że to brzmi dobrze, ale należy tego unikać za wszelką cenę. podziękujesz mi w przyszłości, kiedy spróbujesz wyszukać swój projekt .container--desci skończysz bez rezultatów.
Stavm,
2

Odpowiedź Christopha jest idealna. Czasami jednak możesz chcieć iść więcej klas niż jedna. W takim przypadku możesz wypróbować funkcje @at-rooti #{}css, które pozwoliłyby dwóm klasom głównym siedzieć obok siebie przy użyciu &.

To nie zadziałałoby (z powodu nothing before &reguły):

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

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

Ale to (przy użyciu @at-root plus #{&}):

container {
    background:red;
    color:white;
    
    @at-root .desc#{&} {
      background: blue;
    }

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

użytkownik2299879
źródło