SASS CSS - nästla selektorer

I serien om preprocessorn SASS så tittar vi idag på hur SASS kan nästla selektorer så vi inte behöver skriva alla varianter och så att vi på ett snyggt och enkelt sätt kan gruppera selektorer som hör till en viss huvudklass.

Normal när vi skriver klasser och selektorer så skriver vi dem i en tydlig ordning så att vi går utifrån och in mot en specifik klass. Ibland kan det bli lite traggligt att alltid skriva ut alla selektorerna som kan se ut så här:

nav ul {

  margin: 0;

  padding: 0;

  list-style: none;

}
 

nav li {

  display: inline-block;

}
 

nav a {

  display: block;

  padding: 6px 12px;

  text-decoration: none;

}

Istället för att hela tiden skriva ut nav och sedan selektorerna under nav så kan vi SASS nästla koden på ett väldigt smidigt sätt:

nav {

  ul {

    margin: 0;

    padding: 0;

    list-style: none;

  }
 

  li { display: inline-block; }
 

  a {

    display: block;

    padding: 6px 12px;

    text-decoration: none;

  }

}

Som du ser så lägger vi selektorerna inuti nav och det ger sedan en CSS kod som blir precis som den ovan. Detta gör att vi mycket enklare kan jobba med CSS i SASS utan att förlora möjligheten till nästlad CSS.