• Passa alla navigazione primaria
  • Passa al contenuto principale
  • Passa alla barra laterale primaria
  • Passa al piè di pagina
Glue Labs

Glue Labs

Trasformiamo le tue idee in prodotti digitali di successo!

  • HOME
  • SOLUZIONI
  • NEWS
  • PRODOTTI
  • CONTATTI
  • CASE STUDY

Sass – Perchè usarlo nei fogli di stile CSS

Variabili e caratteristiche da linguaggio di programmazione per CSS

I fogli di stile, meglio detti stylesheet, CSS vengono utilizzati per fornire la presentazione delle pagine Web, vale a dire il mix di colori, forme e disposizione di elementi affinchè la pagina Web sia quella che immaginiamo nella nostra testa e nella testa del nostro Cliente.

Creare e modificare CSS è un’esperienza entusiasmante, ma i fogli di stile stanno diventando sempre più grandi, più complessi e più difficili da mantenere; è in questo contesto che ci viene in aiuto Sass che ci permette di utilizzare funzionalità che non esistono nel classico CSS quali : variabili, annidamento, eredità, mixin.

Sass – Syntactically Awesome Stylesheets

Proprio come l’acronimo ci indica ( Syntactically awesome stylesheets – fogli di stile sintatticamente imponenenti) Sass implementa funzioni semplici ma che portano importanti risultati. Hai bisogno di cambiare un colore nel tuo stylesheet e scopri che devi trovare e rimpiazzare il valore più volte? Ebbene con Sass sarebbe così:

 $coloreazienda = #5F9EA0;
a {
  color : $coloreazienda;
  }
nav {
   background-color: $coloreazienda;
}

E se, invece hai delle regole di default che applichi a diversi elementi? Per esempio:

p {
   margin-bottom: 10px;
   font-size: 14px; 
   line-height: 1.5;
}
footer {
   margin-bottom: 10px;
   font-size: 14px;
   line-height: 1.5;
}

Con CSS dovresti modificare in ogni elemento la regola con rischi di errori e con grande perdita di tempo, con Sass sarebbe così :

@mixin default-type {
     margin-bottom: 20px;
     font-size: 14px;
     line-height: 1.5;
     }
p {
   @include default-type;
}
footer {
     @include default-type;
}

Già con due esempi si può subito vedere quanto, attraverso Sass, sia più semplice, più veloce e più flessibile creare fogli di stile CSS.

Definizione e principi

Sass è un preprocessore CSS, vale a dire uno strato tra il foglio di stile che crei e quello che rendi disponibile al browser; Sass in sostanza copre le mancanze nel linguaggio CSS permettendo di scrivere codice che rispetti il principio DRY ( Don’t Repeat Yourself ).

Una definizione completa la troviamo nel sito ufficiale di Sass : Sass è un meta-linguaggio che si situa sopra al CSS e che viene utilizzato per descrivere lo stile del documento in maniera pulita e strutturata, con una maggiore capacità di quanto possa fare il solo CSS. Sass fornisce sia una sintassi più semplice ed elegante per il CSS sia implementa diverse funzionalità che sono utili per creare fogli di stile gestibili.

SCSS – Sassy CSS

Attualmente Sass è divenuta una vera e propria estensione di CSS3, pertanto qualsiasi documento valido come CSS3 è un documento valido in SCSS e quindi che puà utilizzare Sass. Inoltre convertire un documento da CSS3 a SCSS può essere fatto in pochi passaggi.

Come inziare

Per inziare ad utilizzare Sass occorre installare un compilatore che prenda i file Sass e li trasformi nell’equivalente CSS che è quindi interpretabile dal Browser. Potrebbe sembrare difficile ma come vedrete sulla guida ufficiale il tutto si traduce in pochissimi passi ed utilizzarlo non sarà complesso.

Contattaci subito per supporto e consulenza!

Continua la lettura

  1. Documento dei Requisiti: perchè è importante e cosa scrivere
  2. Le novità di Angular 12
  3. I vantaggi delle CSS Container Query

Categoria: News Tags: CSS, Padova, Roma, Sass

Barra laterale primaria

Cosa facciamo

  • Content Strategy
  • E-Commerce
  • Formazione avanzata Web, Mobile & Cloud
  • IoT – Sviluppo e Integrazione
  • Micro Live Learning(MLL) Web, Mobile & Cloud
  • Project Management Prince2
  • PushAPE
  • Sicurezza ICT
  • Software Aziendali
  • Sviluppo Mobile App
  • Sviluppo, Supporto, Assistenza Tecnica e Hosting Google Cloud
  • System Integration
  • Web Application
  • Web Design

Contatti

Scrivici dal form di contatto

Tel +39 06 56549766
Fax +39 06 21122581
Mail: info@glue-labs.com
Pec: gluelabs@legalmail.it

Dove siamo

Roma: Piazza Don Sturzo 15
Milano: Via Lazzaretto 19
Torino: Via San Domenico 28
Altamura: Via Maggio 1648 24

"*" indica i campi obbligatori

Nome*
Questo sito è protetto da reCAPTCHA e si applicano le Normative sulla Privacy e i Termini di Servizio di Google.
Inviando i tuoi dati accetti le condizioni sulla Privacy. Li useremo per rispondere alle tue domande e richieste.
Consenso*
Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.

Siamo parte di

La nostra Agenzia di Marketing

Footer

Partnership



Rimaniamo in contatto

Iscriviti alla nostra newsletter

Nome
Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.

Soluzioni

  • Integrazione di Passkey di Google nelle Web e Mobile Application
  • Consulenza, assistenza e supporto di Cloud Engineer
  • Sportello virtuale con il sistema Jitsi
  • Time & Material – Web Designer
  • Corso Angular 16
  • Time & Material personale IT
  • Assistenza, Supporto e Sviluppo NestJS e Node.js
  • Integrazione di Spreaker API con WordPress e Web Application
  • Revisione, validazione, attestazione e Relazione Tecnica su Ricerca & Sviluppo e Innovazione Tecnologica
  • Migrazione da ASP.NET Web Forms e Visual Basic ad Angular Web Application

Articoli

  • Apache Airflow: una piattaforma per l’orchestrazione dei workflow
  • Le novità di Angular 16
  • Come avere uno spazio per dati privati e confidenziali su Cloud: Confidential Space
  • Il modello Zero Trust applicato allo sviluppo software
  • Vonage Dialer per automatizzare le chiamate ed aumentare le vendite
  • Come comunicare con i dispositivi Bluetooth tramite Javascript: Web Bluetooth API
  • PostgreSQL Logical Decoding
  • KWOK : un tool per creare migliaia di nodi Kubernetes in un attimo
  • Le 6R del Cloud Migration: le strategie per passare al Cloud
  • Scetticismo nella progettazione del software ed i Quality Attribute Requirements(QAR)

Le nostre sedi

  • Roma, Piazza Don Sturzo 15
  • Milano, Via Lazzaretto 19
  • Torino, Via San Domenico 28
  • Altamura, Via Maggio 1648 24

Contatti

  • Tel. +39 06 87811067
  • Fax +39 06 99335373
  • glue-labs@legalmail.it
  • info@glue-labs.com
  • Facebook
  • LinkedIn
  • Twitter

Scarica app da App StoreScarica app da Play Store


Glue Labs © 2011–2023 | Copyright | Privacy Policy | Codice Etico | Company Info | Cookie Policy

Gestisci Consenso Cookie
Usiamo cookie per ottimizzare il nostro sito web ed i nostri servizi.
Funzionale Sempre attivo
La conservazione tecnica o l'accesso sono strettamente necessari al fine legittimo di consentire la fruizione di uno specifico servizio esplicitamente richiesto dall'abbonato o dall'utente, o al solo fine di effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica.
Preferenze
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistiche
L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente a fini statistici anonimi. Senza un mandato di comparizione, il rispetto volontario da parte del tuo provider di servizi Internet o registrazioni aggiuntive da parte di terzi, le informazioni archiviate o recuperate solo per questo scopo non possono essere generalmente utilizzate per identificarti. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
L'archiviazione tecnica o l'accesso è necessario per creare profili utente per inviare pubblicità o per tracciare l'utente su un sito Web o su più siti Web per scopi di marketing simili.
Gestisci opzioni Gestisci servizi Gestisci fornitori Per saperne di più su questi scopi
Gestisci preferenze
{title} {title} {title}