Składnia SASS i SCSS

Ten artykuł wyjaśnia składnię SASS i SCSS.

Wyjaśnimy szczegółowo różnice między składnią SASS i SCSS oraz podamy konkretne przykłady, aby pogłębić Twoje zrozumienie.

YouTube Video

Składnia SASS i SCSS

SASS to język arkuszy stylów zaprojektowany w celu rozszerzenia możliwości CSS. SASS posiada dwie składnie. Są to: składnia SASS i składnia SCSS.

Przegląd SASS i SCSS

Składnia SASS

Składnia SASS jest zapisywana w następujący sposób:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• Składnia oparta na wcięciach, nie używająca nawiasów klamrowych {} ani średników ;.
• Jest zaprojektowana do pisania zwięzłego i łatwego do odczytania kodu.
• Rozszerzenie pliku to .sass.

Składnia SCSS

Składnia SCSS jest zapisywana w następujący sposób:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• Składnia podobna do CSS, używająca nawiasów klamrowych {} i średników ;.
• Wysoka kompatybilność z istniejącym kodem CSS, umożliwiająca bezpośrednie przekonwertowanie CSS na plik SCSS.
• Rozszerzenie pliku to .scss.

Główne różnice między SASS a SCSS

Kryteria wyboru

Wybór zależy od potrzeb projektu i zespołu.

• Kiedy wybrać składnię SASS

  • Składnia SASS umożliwia pisanie zwięzłego i przejrzystego kodu.
  • Jeśli cały zespół zna składnię SASS, jest to odpowiedni wybór.

• Kiedy wybrać składnię SCSS

  • Jeśli ważna jest kompatybilność z CSS i wielu członków zespołu zna CSS, składnia SCSS będzie bardziej odpowiednia.

Zalety SASS i SCSS

Oto wspólne zalety zarówno składni SASS, jak i SCSS:.

1. Użycie zmiennych

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• Dzięki zmiennym można zdefiniować styl w jednym miejscu i używać go wielokrotnie w różnych lokalizacjach. Zmiany w projekcie można wdrożyć globalnie, po prostu zmieniając wartości zmiennych, co poprawia łatwość utrzymania.

2. Mixiny

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• Mixiny pozwalają grupować style lub kod z prefiksami dostawców używany wielokrotnie w wielu miejscach oraz stosować je elastycznie za pomocą argumentów. To zmniejsza duplikację kodu i poprawia łatwość utrzymania.

3. Zagnieżdżone reguły

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• Korzystając z zagnieżdżania, możesz pisać style hierarchicznie według struktury HTML, co ułatwia grupowanie powiązanych reguł. To poprawia zarówno czytelność kodu, jak i łatwość jego utrzymania.

4. Dziedziczenie

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• Dzięki dziedziczeniu możesz grupować i ponownie używać wspólnych stylów. To zmniejsza duplikację kodu i utrzymuje spójny wygląd.

Wnioski

Wybór między SASS a SCSS zależy od preferencji programisty i wymagań projektu.

Składnia SASS stawia na prostotę, podczas gdy składnia SCSS podkreśla kompatybilność z CSS. Obie składnie są potężne i mogą znacznie zwiększyć wydajność pracy z CSS.

Wybór najbardziej odpowiedniej opcji do Twojego projektu pozwala na efektywne zarządzanie arkuszami stylów.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video