Share
Non ne farò un segreto: adoro Sass. In questo articolo condividerò i miei consigli per lavorare con Sass quotidianamente e su progetti reali.
Ecco un fantastico plugin che ti farà risparmiare un sacco di tempo. Apri il controllo del pacchetto nel testo sublime, cerca Hayaku e fare una rapida installazione. Ora puoi scrivere il tuo CSS più velocemente e con scorciatoie. Ecco alcuni esempi:
// Scrivi questo e premi la scheda mt10 // Risultato margin-top: 10px; // Oppure questo df // Risultato display: flex;
In particolare per il tuo flusso di lavoro Sass c'è una cartella che dovremmo ignorare durante la ricerca in Sublime Text. La cartella in questione è .sass-cache, perché questo è necessario solo per il processo di compilazione. Inoltre, non devi mai modificare nulla in questa cartella, in modo da semplificarti la vita e nasconderlo!
stampa CMD-, per ottenere il comando userconfig del tuo editor e inserire le seguenti righe:
"folder_exclude_patterns": [".sass-cache"]
Avere una solida struttura di progetto è molto importante, specialmente se lavori in una squadra.
Uso tre sezioni diverse (un approccio di SMACSS di Jonathan Snook): _base, _layouts e _modules. Una configurazione globale è ideale per l'immissione in _base cartella. Per ogni tipo di layout si crea un file univoco e lo si inserisce nella cartella _layouts. Pensa, ad esempio, a un layout di base, alla griglia o magari a un file per il layout di stampa.
È possibile suddividere un sito Web in diversi tipi di moduli come schede, pulsanti, fisarmoniche, ecc. Nessun modulo dovrebbe essere "consapevole" del layout che lo circonda. Questi poi appartengono al _modules cartella.
Normalmente, la mia struttura del progetto si presenta così:
scss / | - _base / | | - _config.scss | | - _presets.scss | | - _headings.scss | | - ... | - _layouts / | | - _l-base.scss | | - _l-grid.scss | - _modules / | | - _m-buttons.scss | | - _m-tabs.scss | - application.scss stylesheets / | - application.css
A meno che non usi Sass 3.3 o Node-Sass, probabilmente avrai bisogno della seguente funzione per simulare le mappe di Sass. Le mappe Sass consentono di definire insiemi di chiavi con valori associati. In questo caso puoi usare la funzione, inserire la chiave e otterrai il valore corrispondente. Ecco un rapido esempio:
// Funzione: Simula array associativi // Autore: Hugo Giraudel // Fonte: http://hugogiraudel.com/2013/08/12/sass-functions/#mappingfunzionalità @function ($ haystack, $ needle) @each $ item in $ haystack $ index: index ($ item, $ needle); @if $ index $ return: if ($ index == 1, 2, $ index); @return nth ($ item, $ return); @return false; // Usage $ list: a b, c d, e f; $ value: match ($ list, e); // restituisce f
Ecco alcuni mix di cui probabilmente avrai bisogno in ogni progetto. Iniziamo con cose più semplici come costruire una colonna con sass
Una griglia è assolutamente indispensabile nel tuo progetto. Con questo aiuto (un mixin che ho chiamato col) È più facile creare la larghezza di una colonna. Si aspetta due valori: il numero della colonna ($ col) E le colonne massime ($ Max-Cols) nella tua griglia, l'essere predefinito 12.
// Calcola la larghezza di una colonna // Il valore predefinito delle colonne massime è 12 @mixin col ($ col, $ max-cols: 12) larghezza: (100% / $ max-cols) * $ col; // Usage .element @include col (3); // Result .element width: 25%;
È passato molto tempo che abbiamo bisogno solo di valori di pixel. Dove possibile in questi giorni cerco di usare em o rem. Queste sono entrambe unità di misura relative, la differenza tra loro è quella em si basa sul valore del suo contenitore genitore e rem si basa sulla dimensione del carattere della radice (il html elemento).
// Mixin @mixin font-size ($ sizeValue: 1.6) font-size: ($ sizeValue * 10) + px; font-size: $ sizeValue + rem; // Usage .element @include font-size (1.8); // Result .element font-size: 18px; font-size: 1.8rem;
Incorporare manualmente i caratteri tramite CSS3 non è facile, perché ci sono così tanti formati per diversi tipi di browser. Un mixin è la soluzione perfetta per questo. Questo mixin è chiamato font-facee si aspetta due valori. Il primo è il nome della famiglia di font e il secondo è il percorso dei diversi formati di file del font. Leggi ulteriori informazioni su questi vari formati su Mozilla Developer Network.
Accentsconagua
// Mixin @mixin font-face ($ name, $ url) @ font-face font-family: # $ name; src: url ('# $ url .eot'); src: url ('# $ url .eot # iefix') format ("embedded-opentype"), url ('# $ url .ttf') format ('truetype'), url ('# $ formato url .svg ## $ name ') (' svg '), url (' # $ url .woff ') (' woff '); @soddisfare; // Uso @include font-face ('icons', '... / fonts / icons / iconfont'); // Result @ font-face font-family: icone; src: url ("... /fonts/icons/iconfont.eot"); src: url ("... /fonts/icons/iconfont.eot#iefix") formato ("embedded-opentype"), url ("... /fonts/icons/iconfont.ttf") format ("truetype"), url ( Formato "... /fonts/icons/iconfont.svg#icons") ("svg"), url ("... /fonts/icons/iconfont.woff") ("woff"); Jayden Seric ha fatto un ottimo lavoro con il suo mixin per includere le icone. Qui abbiamo chiamato un mixin iconacon due parametri: $ posizione per gli pseudo-elementi, poi il booleano $ icona che è impostato su vero o falso. Crea una variabile chiamata $ icone, definire il nome dell'icona (chiave) e il valoreper questo:
// Autore: Jayden Seric // Fonte: http://jaydenseric.com/blog/fun-with-sass-and-font-icons Icona @mixin ($ position: 'before', $ icon: false) &: # $ position @if $ icon content: match ($ icons, $ icon); @content; // Utilizzo // Crea una variabile con tutte le icone // Nome, Icone valore contenuto $: ("segno di spunta" a "," meno "b", "più" c "); // Include mixin .element @include icon ('before before', 'segno di spunta'); // Risultato .elemento: before content: "a";Sono molto grato per questo mix di Snugug: è un ottimo modo per configurare i tuoi punti di rottura globali e la parte migliore è che tu dia il nome ad ogni breakpoint. Differenziare le cose con i nomi è molto meglio che con i pixel. Ciò offre anche una buona panoramica di tutte le larghezze utilizzate e una posizione centrale per modificare il comportamento.
// Usa mixin di Snugug // URL: https://gist.github.com/Snugug/2493551 // Definisci i tuoi punti di interruzione e dai a ciascuno un nome $ breakpoints: ('piccolo' 481px, 'medio' 600px, 'grande '769px); // Uso .element background: red; @include respond-to ('medium') background: blue; // Risultato .elementoment background: red; @media screen e (min-width: 600px) .element background: blue; Gestire le variabili in un front-end scalabile è spesso una questione filosofica. Nel mio caso ho un flusso di lavoro che mi sta bene. Per prima cosa creiamo una tavolozza di colori con tutti i colori disponibili e diamo loro normali nomi identificativi.
$ gray-light: # f2f2f2; $ grigio: #ccc; $ grigio-scuro: # 7a7a7a; $ rosso: # d83a3a; $ verde: # 40b846;
Dopo avere una buona tavolozza con tutti i colori disponibili, dovremmo indicare i colori principali o aziendali del progetto. Con questo passo è possibile creare un tema completamente nuovo per il progetto senza perdere tempo ad adattare i colori all'intero file.
$ corp-color: $ red! default; $ corp-color-dark: darken ($ corp-color, 10%)! predefinito; $ corp-color-second: $ green! default; $ corp-color-second-dark: darken ($ corp-color-second, 10%)! default;
Imposta alcune configurazioni di base come la dimensione del carattere globale, le famiglie di caratteri o il colore del carattere di base in un file di configurazione, ad esempio in un file chiamato _config.scss, che è nella tua cartella _di base.
// Font $ base-font-size: 1.7! Default; $ base-font-family: Helvetica, Arial, sans-serif! default; $ base-font-color: $ gray! default; // Box / Border $ base-border-radius: 3px! Default; $ border-radius-rounded: 50%! default; $ base-border-color: $ gray! default;
Esistono molti sistemi di grid nel mondo, ma la griglia di PureCSS è, ai miei occhi, una delle migliori. Ho preso l'idea alle spalle, ho fatto un po 'di magia con Sass che mi permette di creare rapidamente classi di colonne e creare una griglia per le finestre di piccole, medie e grandi dimensioni.
È estremamente semplice modificare il comportamento reattivo di un elemento. Definisci il comportamento una volta per il modulo, ma se hai un altro comportamento a un certo punto, allora crei un modificatore come .m-text-con-asset - di grandi dimensioni
// Definire le colonne massime e lo spazio tra ogni colonna $ max-cols: 2; $ gutter-width: 25px;
// Nome: Default-Grid @for $ sum da 1 a $ max-cols @for $ i da 1 a $ sum .lu - # $ i - # $ sum @include col ($ i, $ somma); // Nome: Small-Grid @for $ sum da 1 a $ max-cols @for $ i da 1 a $ sum .lu - small - # $ i - # $ sum @include respond-to ('small') @include col ($ i, $ sum); // Nome: Grid medio @for $ somma da 1 a $ max-cols @for $ i da 1 a $ somma .lu - medio - # $ i - # $ somma @include respond-to ('medium') @include col ($ i, $ sum); // Nome: Large-Grid @for $ sum da 1 a $ max-cols @for $ i da 1 a $ sum .lu - large - # $ i - # $ sum @include respond-to ('large') @include col ($ i, $ sum); // Uso Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod temp invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Sul cellulare si otterrà una colonna a larghezza intera, oltre a 480px viewport a mezza colonna e oltre 768px a una terza colonna.
La maggior parte dei siti Web (dichiarazione generale) ha un contenitore centrato. Tuttavia, non è sempre così, quindi per questo è utile creare un helper:
// Nome: Contenitore vincolato .l-constrained margin-left: auto; margin-right: auto; padding-left: $ prevent-spacing; padding-right: $ prevent-spacing; larghezza massima: $ larghezza massima del wrapper;
Se non si utilizza flexbox come motore di layout di scelta, verranno utilizzati i float. È indispensabile pulire i galleggianti, perché altrimenti l'intero layout può essere rovinato.
.l-group: after content: "; clear: both; display: table;
Dove vedo una spaziatura coerente in un layout, uso classi di supporto per mantenere le misure vere.
// Name: Distance-Small // Descrizione: Helper per creare distance-top .l-distance-small margin-top: 20px; // Name: Distance-Medium // Descrizione: Helper per creare distance-top .l-distance-medium margin-top: 40px;
Preferisci un generatore di font online o usi un'interfaccia a linea di comando per generare font? Preferisco una soluzione online, lo strumento di mia scelta essendo fontastic.me. C'è una grande panoramica di tutti i tuoi font, puoi scegliere come dovrebbe essere la mappatura di classe o carattere.
Ora iniziamo a creare classi per le tue icone. Non ti mostrerò gli stili di base di ogni icona. Puoi gestirlo da solo, ma questo può aiutarti con l'impostazione di base dell'icona.
// Nome: Matrice con nome e valore contenuto $ icone: ('segno di spunta' a ',' meno 'b', 'plus' c '); $ prefisso:' icona-- '! Default; // Nome: Loop // Descrizione: Crea per ogni icona una classe con contenuti corretti Configurazione per icone in _config.scss. // Usa il mixin per la creazione di icone che si trova all'inizio dell'articolo @each $ in $ icons $ name : nth ($ icon, 1);. # unquote ($ prefix) # $ name @include icon ('before', $ name); // Result .icon - segno di spunta: before content : 'a'; .icon - meno: before content: 'b'; .icon - plus: before content: 'c';Sai cosa intendo? Quando ho iniziato come sviluppatore CSS, ho creato tutto in base alla pagina del designer, ma se avessi bisogno di un modulo su un altro sito? Per questo motivo è importante creare moduli chiusi senza il layout attorno ad esso.
Crea un file per il tuo modulo e inseriscilo nella cartella _modules. Nella parte superiore del file è presente un'area di configurazione, in cui vengono definiti i colori o altri aspetti che influiranno sul tema.
Sotto la configurazione definirai il modulo con tutti gli stili. Utilizzare i commenti bene, al fine di semplificare il modulo.
@charset 'UTF-8'; // 1. Config $ accordion-bgcolor: $ gray-light! Default; $ accordion-alternative-bgcolor: $ gray-dark! default; $ accordion-fontcolor: $ corp-color! default; // 2.Base // Nome: Default Fisarmonica .m-accordion background: $ accordion-bgcolor; colore: $ accordion-fontcolor; // Name: Alternative Accordion .m-accordion - alternative background-color: $ accordion-alternative-bgcolor;
Sentiti libero di inserire il repository che contiene tutto il codice visto in questo articolo. Spero che ti aiuti a creare un front-end migliore scalabile in progetti del mondo reale. Condividi i tuoi pensieri e idee con me nei commenti.
