Nästande i SASS

Den här artikeln förklarar nästande i SASS.

Vi kommer att förklara nästande i SASS steg för steg, inklusive exempel på kod för att fördjupa din förståelse.

YouTube Video

Nästande i SASS

SASS är ett utökat stilmallspråk för CSS som erbjuder många funktioner för effektiv styling. Bland dessa är nästande en särskilt användbar funktion för att visuellt visa den hierarkiska strukturen av CSS.

Grunderna i nästande

I SASS kan du organisera din kod visuellt genom att skriva CSS-selektrar i en hierarkisk struktur. Till exempel, låt oss se hur du kan skriva om följande CSS-kod genom att använda nästande.

 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 skriva denna kod koncist med hjälp av nästande som visas nedan.

 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}

• Den här koden använder nästande-funktionen i SASS för att beskriva navigeringsmenyns stilar koncist och hierarkiskt. Genom att använda nästande blir relationerna mellan förälder och barn visuellt tydliga och läsbarheten förbättras.

Referera till förälder-selektrar (&)

När du behöver referera till förälder-selektorn i nästlade stilar, använd &. Detta gör att du kan skapa selektorer med specifika tillstånd eller modifierare.

 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}

• Den här koden använder & i SCSS för att definiera tillstånden :hover och :active för föräldern .button.

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

Nästande av media queries

I SASS kan du även nästla media queries. Detta låter dig implementera responsiv design samtidigt som du behåller relevansen av dina stilar.

 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}

• Den här koden nästlar en media query inuti klassen .container och möjliggör ett responsivt utseende som ändrar bredden baserat på skärmstorlek.

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

Att tänka på kring nästande

Om du använder för mycket nästande kan din kod bli alltför djup och svår att underhålla. Du bör undvika djup nästande som i exempel nedan.

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

Den här typen av kod är för djupt nästlad, så den kan omstruktureras enligt följande.

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

Praktiskt exempel: Navigeringsmeny

Nedanför finns ett exempel på navigeringsmeny-styling med användning av SASS-nästande.

 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}

• Denna kod organiserar och definierar stilar för listor och länkar inuti navigeringsmenyn, inklusive hover-effekter, med användning av SASS-nästande.

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

Sammanfattning

Nästande-funktionen i SASS är ett kraftfullt verktyg för att koncist beskriva den hierarkiska strukturen av CSS och förbättra läsbarheten. Det är dock viktigt att undvika överdriven nästande och att organisera din kod på rätt sätt.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video