Please enable JavaScript.

Coggle requires JavaScript to display documents.

SASS - Coggle Diagram

- - - - Possiamo direttamente scrivere:
        
        ESEMPIO
        div{
        font-size: 18px;
        p{
        color: blue;
        }
        ul{
        color: green;
        }
        }
        
        Che grammaticalmente significherebbe:
        -Per ogni p all'interno di div imposta il colore blu
        -Per ogni ul all'interno di div imposta il colore verde.
        
        Una volta compilato il file Sass, facendolo diventare un file CSS, il codice verrà AUTOMATICAMENTE convertito come un normale codice CSS.
        
        NESTED
  - - - Inheritance, non è nient'altro che l'ereditarietà di un elemento.
        
        Consente di definire delle regole di stili comuni e poi estenderle o modificarle in base alla necessità.
        
        @ extend %nomedellostile;
        
        ESEMPIO
        %message{
        font-family: sans-serif;
        font-size: 18px;
        font-weight: bold;
        border: 1px solid black;
        padding: 20px;
        margin: 20px;
        }
        .success{
        @ extend %message;
        background-color: green;
        }
        
        In questo esempio andiamo a definire un elemento "genitore" che è %message.
        Andiamo ad inserire all'interno dei valori.
        Sottostante andiamo a dichiarare la classe ".success" e tramite essa andiamo ad estendere "%message", e quindi di conseguenza a prendere le caratteristiche elencate in precedenza senza rielencarle di nuovo.
        Infine aggiungiamo un colore per lo sfondo verde.
        
        .success avrà le stesse caratteristiche di %message, con l'aggiunta di un colore di sfondo.
        
        Quando vado a creare un ereditarietà di un elemento faccio in modo che tutti gli elementi che andrò ad estendere successivamente abbiano le stesse caratteristiche del elemento "genitore" che ho creato.
- - - - Tutte le variabili in Sass si creano scrivendo come primo elemento il simbolo del dollaro. Successivamente inserendo il nome della variabile
        
        È possibile, successivamente, richiamare la variabile inserendo direttamente il nome della variabile compreso del simbolo del dollaro.
      - ESEMPIO:
        $color : red;
        div{
        font-size: 14px
        color: $color;
        }
        
        In Sass è possibile scrivere comune CSS, quindi sarà possibile dichiarare la variabile e assegnare il valore della variabile ad un elemento all'interno dello stesso file.
    - - Inoltre se si deve effettuare una modifica ad un valore, si effetturà la verifica solamente nella variabile, rendendo così il tutto più semplice.
- - - - Questo processo può essere AUTOMATIZZATO
        
        TERMINALE
        sass --watch nomedelfile.scss