CSS moderno con SASS

Lingua: Tedesca

CSS moderno con Sass - tutorial pratico

Ti sei sempre irritato dal fatto che in CSS non ci siano variabili e loop? Basta così! I preprocessori CSS come Sass forniscono proprio queste funzionalità. Così è possibile generare finalmente codice CSS in modo efficiente. Oltre a Sass, in questo tutorial verrà naturalmente esaminato anche il popolare framework Compass, che porta l'uso di Sass a un livello superiore. Scopri in tre ore le possibilità offerte da Sass e Compass.

Diventa un maestro di Sass con questo video corso di tre ore insieme allo sviluppatore web Daniel Koch.
Definisci variabili, crea i tuoi propri mixins, sperimenta con colori e numeri e infine utilizza Compass come ciliegina sulla torta.
Impara a creare in modo efficiente il CSS e applicare le tue nuove conoscenze ai progetti futuri.

Passo dopo passo verso lo sviluppo CSS professionale. Se si tratta di CSS, allora in modo moderno e con Sass - Daniel Koch te lo mostrerà!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

dettagli

Può essere utilizzato con:
Contenuto: 3 h Formazione video
Licenza: privata e commerciale Diritti d'uso

Categorie

Webdesign, CMS & Sviluppo

Creata con amore da:

Daniel Koch

CSS moderno con Sass

Gratis

CSS moderno con Sass - 01 Un'introduzione

Grazie ai pre-processori CSS è possibile scrivere CSS in modo decisamente più efficace. Cosa sono questi pre-processori, quali esistono e perché la scelta in questa serie è caduta su Sass, viene mostrato in questo video.

CSS moderno con Sass - 02 L'installazione

Prima di poter utilizzare Sass, è necessario installarlo. E il requisito per questo è Ruby. Entrambi - quindi l'installazione di Ruby e Sass - vengono mostrati in questo video. Successivamente potrete subito verificare se l'installazione di Sass è effettivamente riuscita.

CSS moderno con Sass - 03 Compilazione esperta

I sass devono essere convertiti in file CSS affinché diventino effettivamente utilizzabili. Grazie al comando Watch, è possibile rilevare facilmente le modifiche ai singoli file o all'interno di intere directory.

Modern CSS con Sass - Combinare i file 04

Modern CSS con Sass - Unire file 04

Con @import è possibile importare e unire file SCSS. Quello che ha a che fare con un trattino basso aggiunto al nome del file è uno degli aspetti di questo video.

Utilizzare Sass per scrivere CSS moderno - Dichiarare e utilizzare le variabili - 05

Utilizzare Sass moderno con CSS - Dichiarare e utilizzare le variabili - 05

In Sass esiste la possibilità di dichiarare variabili. Questo concetto non è disponibile nell'CSS tradizionale, ma in Sass è un geniale strumento per lo sviluppo efficace di fogli di stile.

Moderno CSS con Sass - 06 Il principio del nesting

CSS moderno con Sass - 06 Il principio del nesting

Grazie al nesting, è possibile mantenere la sintassi di Sass significativamente più snella rispetto a quanto sia usuale in CSS. Inoltre, l'annidamento vi aiuta a scrivere il codice in modo molto più ordinato.

CSS moderno con Sass - 07 Ereditarietà abile con Extend

Moderni CSS con Sass - 07 Ereditarietà competente con Extend

L'uso di @extend vi permette di passare un insieme di proprietà CSS da un selettore a un altro. Ciò aiuta anche a mantenere snelli i file Sass.

CSS moderno con Sass - 08 moduli con i selettori di segnaposto

CSS moderno con Sass - 08 moduli con i selettori del segnaposto.

Il selettore del segnaposto consente la definizione di moduli. Questa modularizzazione permette di suddividere la sintassi Sass in blocchi logici che possono essere inclusi in diverse parti.

CSS moderno con Sass - definire 09 mixins

I mixin sono funzioni con cui è possibile semplificare notevolmente i processi di lavoro, ad esempio. In questo video verrà mostrato come definire i propri mixin e infine come applicarli.

CSS moderno con Sass - 10 Il selettore dell'elemento genitore

CSS moderno con Sass - Il selettore dell'elemento genitore

Con il selettore di cui si parla in questo video, è possibile accedere all'elemento genitore di un elemento. Questo selettore non esiste notoriamente in CSS e quindi offre un enorme valore aggiunto.

CSS moderno con Sass - 11 Automazione con cicli for

CSS moderno con Sass - 11 Automatizzazione con cicli For

Sass permette l'uso di cicli For. Ciò funziona molto facilmente in Sass e può essere utilizzato ad esempio per la definizione di un proprio sistema di griglia.

CSS moderno con Sass - 12 cicli Each e While

CSS moderno con Sass - 12 ciascuno e cicli While

Oltre a For, in Sass è possibile utilizzare anche cicli Each e While. Come utilizzarli per l'automazione è mostrato in questo video.

CSS moderno con Sass - 13 decisioni cruciali con if e else.

In linguaggi come PHP e JavaScript c'è la possibilità di reagire a eventi diversi usando if e else. Questa possibilità esiste effettivamente anche in Sass. Come è possibile farlo vedere questo video.

CSS moderno con Sass - 14 operatori matematici

Potete calcolare in Sass. Ad esempio, questo è pratico per definire le dimensioni dei caratteri. Grazie agli operatori appropriati, è possibile costruire il proprio sistema di griglie completamente individuale.

CSS moderno con Sass - 15 giochi di colore.

Naturalmente, è possibile definire i colori in Sass. Ma Sass va anche molto oltre nel campo rispetto al tradizionale CSS. Grazie alle funzioni appropriate, ad esempio, è possibile manipolare facilmente i colori.

CSS moderno con Sass - 16 Compass

Il framework Compass amplia ulteriormente le possibilità di Sass. Questo primo video mostra come potete installare e utilizzare Compass.

CSS moderno con Sass - 17 Compass e CSS3.

Il sito web del progetto Compass è lo strumento informativo centrale quando si tratta di lavorare con questo framework. Vi mostrerò come potete lavorare con la documentazione basata sulle caratteristiche di CSS3 di Compass.

Modern CSS con Sass - 18 Compass in azione bullet e uno sguardo a Susy.

CSS moderno con Sass - 18 Compass in azione e uno sguardo a Susy

Un esempio mostra quanto sia facile realizzare le cose con Compass. Alla fine di questa serie verrà anche dato uno sguardo a un framework Sass alternativo. Susy offre un sistema di griglie leggero.

Dettagli sul contenuto

CSS in modo efficiente: inizia con il tutorial pratico con Sass
Sass ha rivoluzionato lo sviluppo del CSS, poiché finalmente è possibile scrivere codice CSS in modo efficace. In sole tre ore con 18 lezioni scoprirai tutto ciò che c'è da sapere su Sass e il framework Sass Compass.

Installazione dell'ambiente di sviluppo Sass

Prima di iniziare il tuo viaggio con Sass nel tutorial su CSS, è necessario procedere con l'installazione. Ma non preoccuparti – è davvero semplice. Ruby e alcuni comandi nella riga di comando sono sufficienti e diventerai fiero possessore di un ambiente di sviluppo Sass. Chi finora ha esitato davanti all'installazione di Sass, verrà guidato passo dopo passo attraverso l'installazione. Un primo test mostrerà quindi quale versione di Sass è stata installata.

Primi passi con una struttura di progetto tipica

Successivamente seguiranno subito i primi passi: Inizia con Sass! Dopo una prima occhiata alla sintassi, seguiranno particolarità linguistiche fondamentali. Imparerai a conoscere le variabili, vedrai una struttura di progetto tipica e ti orienterai rapidamente in Sass.

Sviluppo: cicli e istruzioni If

Pertanto, passiamo allo sviluppo avanzato: Ciò che rende Sass così speciale sono le cose che ricordano quasi le vere linguaggi di scripting come JavaScript. Anche in Sass è possibile definire cicli e utilizzare istruzioni If. Queste cose sono quindi il prerequisito fondamentale per la disciplina di punta in Sass – la definizione di Mixins. Si tratta di potenti funzioni che semplificano notevolmente il lavoro con Sass e, alla fine, con CSS.

Compass: semplifica il lavoro con il CSS

La ciliegina sulla torta di questo corso è Compass. Questo porta lo sviluppo di Sass a un livello completamente diverso, poiché questo framework Sass offre innumerevoli strumenti e funzioni che semplificano notevolmente il lavoro con CSS.

Cosa imparerai nel tutorial su CSS e Sass

Imparerai passo dopo passo le funzionalità di Sass, dall'ingresso agli strumenti professionali fino al lavoro con Compass. Avrai così a disposizione ciò che è attualmente possibile e potrai applicare direttamente le tue conoscenze. Scrivere CSS non è mai stato così efficiente!