sass
Zagnieżdżanie

Podstawowe zagnieżdżanie

Ilekroć deklarujesz nową regułę w innej regule, nazywa się to zagnieżdżaniem. W przypadku podstawowego zagnieżdżania, jak pokazano poniżej, zagnieżdżony selektor zostanie skompilowany jako nowy selektor CSS z dodanymi wszystkimi rodzicami oddzielonymi spacją.

// SCSS
.parent {
  margin: 1rem;

  .child {
    float: left;
  }
}

// CSS output
.parent {
  margin: 1rem;
}

.parent .child {
  float: left;
}

Głębokość zagnieżdżenia

Zagnieżdżanie jest bardzo potężną funkcją, ale należy z nią korzystać ostrożnie. Może się zdarzyć dość łatwo i szybko, że zaczniesz zagnieżdżać się i włączać wszystkie dzieci w gnieździe, gnieździe, gnieździe. Pokażę:

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// CSS output of the last rule
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

Problemy

Specyficzność

li z powyższego przykładu ma ustawiony margin . Powiedzmy, że chcemy to później zastąpić w zapytaniu o media.

@media (max-width: 480) {

  // will not work
  .dropdown-list ul li {
    margin: 0;
  }

  // will work
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

Dlatego zagnieżdżając zbyt głęboko, będziesz musiał zagnieżdżać się ponownie za każdym razem, gdy chcesz zastąpić określoną wartość. Co gorsza, często stosuje się zasadę !important

@media (max-width: 480) {

  // BIG NO-NO, don't do this
  .dropdown-list ul li {
    margin: 0 !important;
  }

Dlaczego !important zasada jest złym pomysłem

Powinieneś napisać swój SCSS w dobry sposób, aby te obejścia nie były w ogóle konieczne. Używanie !important w tak drobnych kwestiach już doprowadzi cię do króliczej nory!

Wielokrotnego użytku

Jest to dość podobne do problemu specyficzności, ale warto zwrócić uwagę osobno. Jeśli stylizujesz coś w stylu przycisku, a nawet menu rozwijanego, możesz chcieć ponownie użyć tych stylów w innym miejscu na stronie.

Poprzez zbyt głębokie zagnieżdżenie twoje style są powiązane tylko z elementami znajdującymi się w najbardziej zewnętrznym rodzicu (element na górze twojego SCSS). To prowadzi do kopiowania stylów i wklejania ich gdzie indziej. Prawdopodobnie w innej regule zagnieżdżonej.

Twoje arkusze stylów będą coraz większe i trudniejsze w utrzymaniu.

Jak głęboko powinieneś zagnieździć?

Większość poradników stylów ustawia maksymalną głębokość na 2. Jest to ogólnie dobra rada, ponieważ jest bardzo niewiele okazji, w których chciałbyś zagnieżdżać się głębiej. W większości przypadków 2 wystarcza.

Zagnieżdżanie z @ at-root

Zagnieżdżanie jest prawdopodobnie najczęściej używane do tworzenia bardziej szczegółowych selektorów, ale można go również wykorzystać do organizacji kodu. Korzystając z dyrektywy @at-root , możesz „wyskoczyć” z miejsca, w którym zagnieżdżasz ją w Sassie, przywracając cię z powrotem na najwyższy poziom. Dzięki temu możesz grupować style bez tworzenia większej szczegółowości niż potrzebujesz.

Na przykład możesz zrobić coś takiego:

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

To by się skompilowało do tego:

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

W ten sposób wszystkie nasze style związane z klasą .item są razem w SCSS, ale niekoniecznie potrzebujemy tej klasy w każdym selektorze.

Z wyłączeniem kontekstów

Domyślnie deklaracje wewnątrz @at-root pojawią się w dowolnym kontekście. Oznacza to, że reguły wewnątrz bloku @media na przykład pozostaną.

@media print {
  .item-wrapper {
    @at-root {
      .item {
        background: white;
      }
    }
  }
}

// Will compile to
@media print {
  .item {
    background: white;
  }
}

Nie zawsze jest to pożądane zachowanie, więc można wykluczyć kontekst medialny, przekazując media do opcji „ without dyrektywy @at-root .

@at-root (without: media) {..

Aby uzyskać więcej informacji, zobacz oficjalną dokumentację

Selektor nadrzędny (&)

Zagnieżdżanie doskonale nadaje się do utrzymywania powiązanych selektorów, aby ułatwić przyszłym programistom zrozumienie kodu. Selektor nadrzędny reprezentowany przez znak ampersand („&”) może to zrobić w bardziej złożonych sytuacjach. Istnieje kilka sposobów jego wykorzystania.

Utwórz nowy selektor, który wymaga zarówno selektora nadrzędnego, jak i innego na tym samym elemencie, umieszczając nowy selektor bezpośrednio za selektorem nadrzędnym.

// SCSS
.parent {

  &.skin {
    background: pink;
  }
}

// CSS output
.parent.skin {
  background: pink;
}

Niech rodzic pojawi się za zagnieżdżonym selektorem w skompilowanym CSS, umieszczając selektor nadrzędny za zagnieżdżonym selektorem.

// SCSS
.parent {

  .wrapper & {
    border: 1px solid black;
  }
}

// CSS output
.wrapper .parent {
  border: 1px solid black;
}

Stany i pseudoelementy

Oprócz używania zagnieżdżania dla klas i dzieci, zagnieżdżanie za pomocą selektora rodzica jest również powszechnie używane do łączenia stanów :active :hover i :focus dla łączy.

// SCSS
a {
  color: blue;

  &:active,
  &:focus {
    color: red;
  }

  &:visited {
    color: purple;
  }
}

// CSS output
a {
  color: blue;
}

a:active,
a:focus {
  color: red;
}

a:visited {
  color: purple;
}

Podobnie można stylizować pseudoelementy, zagnieżdżając je za pomocą selektora rodzica.

// SCSS
.parent {

  &::after {
    display: table;
    clear: both;
    content: '';
  }

  &::only-child {
    font-weight: bold;
  }
}

// CSS output
.parent::after {
  display: table;
  clear: both;
  content: '';
}

.parent::only-child {
  font-weight: bold;
}

Właściwości zagnieżdżania

Niektóre właściwości CSS należą do przestrzeni nazw, na przykład border-right należy do przestrzeni nazw border . Aby napisać mniej, możemy wykorzystać zagnieżdżanie właściwości i pomijać te prefiksy, nawet na wielu poziomach.

Gdybyśmy musieli utworzyć granicę po prawej i lewej stronie klasy o nazwie .borders , moglibyśmy napisać to:

 //SCSS
 .borders {
    border: 2px dashed blue;
    border: {
        left: 1px solid black;
        right: 1px solid red;
    }
  }

 // CSS output 
 .borders {
    border: 2px dashed blue;  
    border-left: 1px solid black;
    border-right: 1px solid red;
  }
 

To oszczędza nam konieczności pisania border-right i border-left , jednak wciąż piszemy powtarzalny kod z liniami 1px solid black i 1px solid red . Możemy napisać jeszcze mniej powtarzalny CSS, wykonując następujące czynności:

// SCSS
.borders {
  border: 2px dashed blue {
    left: 1px solid black;
    right: {
      color: red;
    }
  }
}

// CSS output
.borders {
   border: 2px dashed blue;
   border-left: 1px solid black;
   border-right-color: red;
}