Förståelse av Sass-syntax för Bättre CSS

För att börja skriva sass-kod behöver vi skapa en fil med filändelsen .scss. (t.ex. feature.scss).

Låt oss titta på sass-syntaxen med följande css-kod. Vi kommer att manipulera en knapp som har en hover-effekt. Vi skriver css-kod för detta:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Låt oss skriva om samma kod med sass-syntax:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

Skillnaden är att vi använder stilar för ett element inuti det första paret av {}-klamrar. Vi använder inte heller elementets klassnamn två gånger. Istället använder vi et-tecknet (&).

Observera

Vid frågor eller oklarheter kring vissa sass-funktioner rekommenderas det starkt att använda sass-dokumentationen.

Kompilering

Webbläsare förstår inte preprocessor-syntax. De förstår endast html-, css- och javascript-syntax. Hur fungerar det då? Vi behöver kompilera sass-filen till en css-fil. Efter kompileringen ser vi resultatet.

Vi har följande alternativ för att kompilera sass till css:

• Använd Visual Studio Code-tillägget - Live Sass Compiler;
• Använd applikationen - Scout App.