Centralt innehåll

Fakta

1. Less & Sass

Less och Sass är två olika CSS preprocessorer. En preprocessor bearbetar indata och ger utdata till ett annat program. Sass och Less används som indata och en preprocessor omvandlar det till CSS, som kan användas på en webbsida.
Båda preprocessorerna är gjorda med samma grundidé, att göra skrivande av långa CSS koder lättare.

När CSS:er blir större och mer komplexa kan de bli svårare att underhålla (ändra och lägga till). Det är här Less och Sass kan hjälpa till. Less och Sass låter dig använda funktioner som inte existerar i CSS ännu, som t.ex. variabler, nesting och mixins som gör skrivandet av CSS enklare.

Less och Sass-filer omvandlas sedan till en vanlig CSS-fil som du kan använda på din webbplats.

Less och Sass är två olika tekniker som gör samma sak.

1.1 Less

Less (Leaner Style Sheets) är ett stilmallspråk som kan kompileras till CSS. Less är en öppen källkod. Huvudskillnaden mellan mindre och andra CSS-preprocessorer är att Less tillåter realtidskompilering via less.js av webbläsaren (Less Wikipedia 2017).

En Less-fil översätts (m.h.a. en preprocessor) till en vanlig CSS-fil som du kan använda på din webbplats.

1.2 Sass

Sass (Syntactically Awesome Style Sheets) är en tillbyggnad av CSS3 som hjälper dig att skapa bättre stilmallar med mindre ansträngning. Sass lägger helt enkelt till extra funktioner ovanpå CSS.

En Sass-fil översätts (m.h.a. en preprocessor) till en vanlig CSS-fil som du kan använda på din webbplats.

Det finns två olika syntaxer tillgängliga för Sass.

Den äldre syntaxen, använder indragning (indentering) i stället för måsvingar för att och nya rader hellre än semikolon för att skilja egenskaper. Vissa tycker att det här är lättare att läsa och snabbare att skriva än SCSS. Filer som använder den här syntaxen har .sass-tillägget.

Den andra syntaxen kallas SCSS (Sassy CSS). Filer som använder den här syntaxen har .scss-tillägget.

Sass-filer kan skrivas med SCSS syntax.

1.2.1 Sass med syntaxen SCSS

För teckenkodning i Sass rekommenderas att använda UTF-8-kodning i huvudformatarket med @charset-direktivet. Se till att det överst i css-filen står:
@charset 'utf-8';

1.2.2 Variabler

Variabler är ju ett sätt att lagra information som du vill återanvända. Det fungerar likadant i Sass. Det går att lagra t.ex. färger, teckensnitt eller något CSS-värde som du tror att du vill återanvända.

Sass använder $ symbolen för att göra något till en variabel.

1.2.3 Exempel på SCSS med variabler
@charset 'utf-8';

$primaryColor: #12FF01;

ul
{
  color: $primaryColor;
}

table
{
  color: $primaryColor;
}

Efter att en preprocessor använts på SCSS-filen kommer CSS att se ut som: 

ul 
{
  color: #12FF01;
}

table 
{
  color: #12FF01;
}

Prova gärna själv på sidan: https://www.sassmeister.com

Mer om att använda Sass går det att läsa om på: http://sass-lang.com

Begrepp

CSS: Cascading Style Sheet, beskriver utseendet på en webbsida.

Teckenkodning: Hur olika tecken representeras numeriskt (binärt) i minnet.

utf-8: Den rekommenderade teckenkodningen, klarar alla språks specialtecken.

 

preprocessor: Bearbetar indata och ger utdata till ett annat program.

Less: Leaner Style Sheets, ett stilmallspråk som kan kompileras till CSS.

Sass: Syntactically Awesome Style Sheets, stilmallsspråk som är en tillbyggnad av CSS3 och som kan kompileras till CSS.

SCSS: Sassy CSS, den nyare varianten av Sass.

Övningar

Inlämningsuppgift

login     logout    

Exit tickets

Installera Koala

Använd CSS-Grid uppgiften.
1. Döp om css-filen till suffixet, dvs filändelsen scss istället för css.
2. Använd variabler i scss-filen. Minst 6 stycken variabler.
3. Använd Koala för att översätta scss-filen till en css-fil.
4. Lämna in hela CSS-grid projektet med både scss och css-fil.