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

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

Następujący 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 zagnieżdżonych stylów.

W próbce powyżej mówię o tym:

CSS 

.container.desc {
    background:blue;
}

W tym przypadku wszystkie div.container normalnie byłyby red, ale div.container.desc byłyby niebieskie.

Jak mogę zagnieździć to w środku container z Sass?

 237
sass
Author: Jordi Castilla, 2012-06-18
Source

2 answers

Możesz użyć referencji selektora rodzicielskiego &, po kompilacji zostanie zastąpiony przez selektor nadrzędny:

Dla Twojego przykładu: 

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

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

& zostanie całkowicie rozwiązane, więc jeśli selektor rodzica jest zagnieżdżony, zagnieżdżenie zostanie rozwiązane przed zastąpieniem &.

Zapis ten jest najczęściej używany do zapisu pseudoelementów i-klas : 

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

Możesz jednak umieścić & w praktycznie dowolnej pozycji lubisz*, Tak więc możliwe jest 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 łamie strukturę zagnieżdżania, a tym samym może zwiększyć wysiłek znalezienia określonej reguły w arkuszu stylów.

*: przed & nie są dozwolone znaki inne niż spacje. Nie można więc dokonać bezpośredniej konkatenacji selector+& - #id& rzuciłby błąd.

 448
Author: Christoph,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-29 14:21:43

Jeśli tak jest, myślę, że powinieneś użyć lepszego sposobu tworzenia nazwy klasy lub konwencji nazwy klasy. Na przykład, tak jak powiedziałeś, chcesz, aby klasa .container miała inny kolor w zależności od konkretnego 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 opiera się na metodologii Bema w konwencjach nazewnictwa klas. Możesz sprawdzić ten link: bem-Block element Modifier Methodology

 5
Author: Murdock Helscream,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-09 07:35:59