sass Handledning
Komma igång med sass

Anmärkningar

versioner

Uppstart

När det gäller att använda SASS finns det flera sätt att ställa in arbetsytan. Vissa människor föredrar att använda kommandoradsverktyg (förmodligen Linux-personer) och andra föredrar att använda GUI-applikationer. Jag täcker båda.

Kommandoradsverktyg

Sidan 'Install SASS' på sass-lang.com täcker detta ganska bra. Du kan använda SASS med Ruby (som kan installeras från en Linux-pakethanterare eller du kan ladda ner installationsprogrammet på Windows). macOS levereras med Ruby förinstallerat.

När du har installerat Ruby måste du installera SASS (i vissa fall kan det hända att sudo inte behövs):

sudo gem install sass

Slutligen kan du kontrollera att du har installerat SASS med sass -v .

GUI-applikationer

Även om det finns ett antal GUI-applikationer som du kan använda, rekommenderar jag Scout-App . Den bygger och komprimerar dina CSS-filer automatiskt åt dig, sparar fil och stöder macOS, Windows och Linux.

variabler

Om du har ett värde som du använder ofta kan du lagra det i en variabel. Du kan till exempel använda detta för att definiera färgscheman. Du skulle bara behöva definiera ditt schema en gång och sedan kan du använda det i dina stilmallar.

För att definiera en variabel måste du prefixera dess namn med $ -symbolen. (Som du skulle göra i PHP.)

Du kan lagra alla giltiga CSS-egenskaper i en variabel. Såsom färger, teckensnitt eller URL: er.

Exempel 1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

importera

Låt oss anta följande scenario: Du har två stilark: _variables.scss och layout.scss . Logiskt håller du alla dina variabler inuti ditt variabla stilschema men vill komma åt dem från ditt layoutstilsblad.

OBS: Du kanske märker att variablerna har ett understreck ('_') innan det heter. Det beror på att det är en delvis - vilket betyder att den kommer att importeras.

sass-lang.com säger följande om partiklar: Du kan skapa partiella Sass-filer som innehåller små utdrag av CSS som du kan inkludera i andra Sass-filer. Detta är ett bra sätt att modulera din CSS och hjälpa till att hålla saker lättare att underhålla. [...] Underskriften låter Sass veta att filen endast är en delfil och att den inte bör genereras till en CSS-fil. Sass-partiklar används med @import-direktivet.

SCSS-variabler är bra för detta scenario. Låt oss anta att dina _variables.scss ser ut så här:

$primary-color: #333;

Du kan importera det med @import och sedan stilarkets namn i citat. Ditt layoutstilsblad kan nu se ut så här (se till att det inte finns en understruk eller filändelse i importen):

@import 'variables';
body {
  color: $primary-color;
}

Detta skulle ge ut något liknande följande:

body {
  color: #333;
}

Nesting

layout.scss

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 0 5px;
           }
       }
}

produktion

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0 5px;    
}

kommentarer

SASS stöder två typer av kommentarer:

• Inline-kommentarer - Dessa sträcker sig bara över en rad och används vanligtvis för att beskriva en variabel eller ett block. Syntaxen är som följer: // Your comment here (du beror på den med en dubbel snedstreck ( // ) och resten av raden ignoreras av tolkaren.

• Multiline-kommentarer - Dessa sträcker sig över flera rader och används vanligtvis för att visa en upphovsrätt eller licens högst upp i ett dokument. Du kan öppna ett multiline-kommentarblock med /* och du kan stänga ett multiline-kommentarblock med */ . Här är ett exempel:

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/