Indlejring i SASS

Denne artikel forklarer indlejring i SASS.

Vi forklarer SASS-indlejring trin for trin, inklusive eksempler på kode for at uddybe din forståelse.

YouTube Video

Indlejring i SASS

SASS er et udvidet stylesheet-sprog til CSS, der tilbyder mange funktioner for effektiv styling. Blandt disse er indlejring en særlig nyttig funktion til visuelt at repræsentere den hierarkiske struktur af CSS.

Grundlæggende om indlejring

I SASS kan du organisere din kode visuelt ved at skrive CSS-selectors i en hierarkisk struktur. For eksempel, lad os se, hvordan du kan omskrive følgende CSS-kode ved at bruge indlejring.

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

Med SASS kan du skrive denne kode kortfattet med indlejring som vist nedenfor.

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}

• Denne kode bruger indlejringsfunktionen i SASS til at beskrive navigation-menuens styles kortfattet og hierarkisk. Ved at bruge indlejring bliver forældre-barn relationer visuelt klare og læsbarheden forbedres.

Henvisning til overordnet selector (&)

Når du har brug for at referere til overordnet selector i indlejrede styles, skal du bruge &. Dette giver dig mulighed for at oprette selectors med specifikke tilstande eller modifikatorer.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}

• Denne kode bruger & i SCSS til at definere :hover og :active tilstandene for den overordnede .button selector.

Genereret CSS

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

Indlejring af media queries

I SASS kan du også indlejre media queries. Dette gør det muligt at implementere responsivt design, samtidig med at du bevarer relevansen af dine styles.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}

• Denne kode indlejrer en media query i .container-klassen, hvilket muliggør et responsivt design, der ændrer bredde baseret på skærmstørrelse.

Genereret CSS

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

Vigtige punkter om indlejring

Brug af for meget indlejring kan gøre din kode meget lagdelt og vanskeligere at vedligeholde. Du bør undgå dyb indlejring som i eksemplet nedenfor.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

Denne slags kode er for dybt indlejret, så den kan omstruktureres som følger.

1.header .nav ul li a {
2    color: red;
3}

Praktisk eksempel: Navigationsbar

Nedenfor er et eksempel på styling af en navigationsbar med brug af SASS-indlejring.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}

• Denne kode organiserer og definerer styles for lister og links i navigationsbaren, inklusive hover-effekter, ved hjælp af SASS-indlejring.

Genereret CSS

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

Sammendrag

Indlejringsfunktionen i SASS er et effektivt værktøj til kortfattet at beskrive CSS' hierarkiske struktur og forbedre læsbarheden. Det er dog vigtigt at undgå overdreven indlejring og at organisere din kode ordentligt.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video