sass Zelfstudie
Aan de slag met Sass

Opmerkingen

versies

Opstelling

Als het gaat om het gebruik van SASS, zijn er meerdere manieren om uw werkruimte in te stellen. Sommige mensen gebruiken liever opdrachtregelprogramma's (waarschijnlijk Linux-mensen) en anderen gebruiken liever GUI-toepassingen. Ik zal beide dekken.

Opdrachtregelhulpmiddelen

De pagina 'SASS installeren' op sass-lang.com behandelt dit vrij goed. U kunt SASS gebruiken met Ruby (die kan worden geïnstalleerd vanuit een Linux-pakketbeheerder of u kunt het installatieprogramma downloaden op Windows). macOS wordt geleverd met vooraf geïnstalleerde Ruby.

Nadat je Ruby hebt geïnstalleerd, moet je SASS installeren (in sommige gevallen is sudo misschien niet nodig):

sudo gem install sass

Ten slotte kun je controleren of je SASS hebt geïnstalleerd met sass -v .

GUI-toepassingen

Hoewel er een aantal GUI-applicaties zijn die je kunt gebruiken, raad ik Scout-App aan . Het bouwt en comprimeert automatisch uw CSS-bestanden voor u, bij het opslaan van bestanden en ondersteunt macOS, Windows en Linux.

Variabelen

Als u een waarde hebt die u vaak gebruikt, kunt u deze opslaan in een variabele. U kunt dit bijvoorbeeld gebruiken om kleurenschema's te definiëren. U hoeft uw schema slechts eenmaal te definiëren en vervolgens kunt u het in uw stylesheets gebruiken.

Om een variabele te definiëren, moet u de naam voorafgaan door het $ -symbool. (Zoals je zou doen in PHP.)

U kunt elke geldige CSS-eigenschapswaarde in een variabele opslaan. Zoals kleuren, lettertypen of URL's.

Voorbeeld 1:

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

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

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

Importeren

Laten we het volgende scenario veronderstellen: U hebt twee stylesheets: _variables.scss en layout.scss . Logisch gezien houdt u al uw variabelen in uw variabelestijlblad, maar wilt u er vanuit uw lay-outstijlblad toegang toe hebben.

OPMERKING: het kan zijn dat de variabelen-stylesheet een onderstrepingsteken ('_') heeft vóór de naam. Dit komt omdat het een gedeeltelijke is - wat betekent dat het zal worden geïmporteerd.

sass-lang.com zegt het volgende over gedeeltelijke: U kunt gedeeltelijke Sass-bestanden maken die kleine stukjes CSS bevatten die u in andere Sass-bestanden kunt opnemen. Dit is een geweldige manier om uw CSS te modulariseren en dingen gemakkelijker te onderhouden te houden. [...] Het onderstrepingsteken laat Sass weten dat het bestand slechts een gedeeltelijk bestand is en dat het niet in een CSS-bestand moet worden gegenereerd. Sass gedeeltelijke worden gebruikt met de @ import-richtlijn.

SCSS-variabelen zijn geweldig voor dit scenario. Laten we aannemen dat uw _variables.scss er als _variables.scss uitziet:

$primary-color: #333;

U kunt het importeren met @import en vervolgens de naam van de stylesheet tussen aanhalingstekens. Uw lay-outstijlblad kan er nu zo uitzien (let op dat er geen onderstrepingsteken of bestandsextensie aanwezig is bij het importeren):

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

Dit levert ongeveer het volgende op:

body {
  color: #333;
}

nesting

layout.scss

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

uitgang

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

Comments

SASS ondersteunt twee soorten opmerkingen:

• Inline comments - Deze omvatten slechts één regel en worden meestal gebruikt om een variabele of blok te beschrijven. De syntaxis is als volgt: // Your comment here (u plaatst het voor een dubbele schuine streep ( // ) en de rest van de regel wordt genegeerd door de parser.

• Opmerkingen over meerdere regels: deze bevatten meerdere regels en worden meestal gebruikt om een copyright of licentie boven aan een document weer te geven. U kunt een commentaarblok met meerdere regels openen met /* en u kunt een commentaarblok met meerdere regels sluiten met */ . Hier is een voorbeeld:

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