Utilizzare la personalizzazione avanzata CSS/SCSS

Che cosa è questa sezione?

Questa sezione del menu Colori consente di personalizzare ulteriormente l'applicazione con CSS / SCSS. Ecco un esempio con una modifica basata sul Layout 6 utilizzando la personalizzazione avanzata con CSS / SCSS in un'applicazione: Screen Shot 2016-09-08 alle 15.24.59
La versione senza queste personalizzazioni:

Screen Shot 2016-09-08 alle 16.32.12

Che cosa è CSS?

CSS è un linguaggio di programmazione (semplice) per formattare e modellare una pagina. Si tratta di Cascading Style Sheet e definisce come vengono visualizzati gli elementi HTML5. Maggiori informazioni qui .

Che cosa è SCSS?

SCSS è un superset di CSS3. Aggiunge ulteriori opzioni al classico CSS utilizzando, in particolare, nidifiche e variabili.

Ad esempio, sono presenti due fogli di stile scritti in CSS e SCSS:

Codice CSS:

#body {
margin: 0;
border: 1px
solid red;
}

#body p {
font-size: 13px;
font-weight: bold;
color: yellow;
}

#body h {
text-transform: capitalize;
}

Lo stesso scritto nel codice SCSS:

$colorYellow: yellow;
#body {
margin: 0;
border: 1px solid
$colorYellow; p {
color: $colorYellow;
font: {
size: 13px;
weight: bold;
} } h {
text-transform; } }

Qual è la differenza tra i due?

  1. Se si guarda il codice di cui sopra si può vedere che c'è una
    $colorYellow: yellow;

    E questa variabile viene chiamata nel CSS stesso come un valore della color: $colorYellow;"colore", vedere:color: $colorYellow; Il potere di questo è che puoi chiamare una variabile nel tuo CSS e quindi dovresti lavorare solo sul valore di questa variabile per modificare il valore di tutti i selettori che utilizza questa variabile. La differenza con il classico CSS è che dovresti cambiare il valore della proprietà per ogni selettore piuttosto che cambiarlo una volta per tutti i selettori.
  2. Se confrontate i due codici di cui sopra, entrambi hanno 3 selettori, due dei quali sono figli di un selettore principale. In SCSS i bambini possono essere nidificati nel genitore. Rende il codice più facile da leggere, scrivere e mantenere. Quindi, invece di scrivere in CSS: #body { margin: 0; } #body p { font-size: 12px; } In SCSS scrivevi: #body { margin: 0; p { color: $colorYellow; font-size: 12px; } }
  3. È possibile vedere che c'è la stessa cosa per alcune proprietà che possono essere suddivise nelle proprietà padre e figlio. Ad esempio, nelfont-weightSCSSfont-weightdiventa una proprietà figlio del "carattere" della proprietà padre In CSS: #body p { font-size: 13px; font-weight: bold; } In SCSS: #body p { font { size: 13px; weight: bold; } }

Hai trovato questa risposta utile?

 Stampa Articolo

Leggi anche

Modalità offline

La modalità offline non è realmente una funzione, ma consente agli utenti di scaricare i...

Come aggiungere collegamenti interni

Questa funzionalità ti consente di creare collegamenti a una funzione nella tua app da un'altra...

Taxiride

Con questa funzione sarai in grado di lanciare un "servizio Uber-like" con la tua app. Per...