Design in stile mela. La storia del corporate design in un nuovo libro di Apple. Compilare LESS in CSS

Ciao cari lettori un! Il web design e lo sviluppo web si stanno sviluppando molto rapidamente. Ogni giorno vediamo sempre più nuovi prodotti, siano essi applicazioni o nuovi servizi che rendono la nostra vita online più produttiva e conveniente. E il web design è solo uno spazio illimitato, limitato solo dal talento e dalle capacità dell'"artista" (designer). Allora, parliamo oggi di MENOÈ un linguaggio di markup di stile dinamico che semplificherà la scrittura di stili CSS.

Cos'è MENO?

LESS è un componente aggiuntivo CSS. Ciò significa che qualsiasi codice CSS è valido LESS, ma gli elementi LESS aggiuntivi non funzioneranno in CSS semplice codice. Questo è fantastico perché il CSS esistente è già un codice MENO funzionante, che abbassa la soglia per entrare nella nuova tecnologia.

LESS aggiunge molte proprietà dinamiche utili al file. Introduce variabili, operazioni, elementi e mixin. La possibilità di scrivere fogli di stile in modo modulare ti fa risparmiare un sacco di problemi.

LESS rende gli stili di scrittura molto più facili. Ad esempio, usando i mixin, creiamo qualcosa come funzioni che possono accettare argomenti. Mixin- consentono di includere tutte le proprietà di una classe in un'altra classe semplicemente includendo il nome della classe come valore di una delle proprietà.

E il CSS compilato sarà simile a questo:

Scarica la libreria prefix-free.js e collegala a index.html:

Questo completa la preparazione e procede direttamente alla creazione di un menu in stile mela.com

Markup HTML

Il markup del menu è piuttosto semplice. Il menu è realizzato sulla base di un elenco non ordinato. Apri l'editor HTML e incolla il seguente codice:

MENO stili

In questa sezione inizieremo a scrivere il codice del menu in lingua LESS. Per chi è alle prime armi con la programmazione, sia nella scrittura che nella sintassi di LESS, niente paura, cercherò di mettere tutto sugli scaffali per fare chiarezza. Forse anche a qualcuno piacerà questo modo di scrivere stili per il sito, perché è davvero più produttivo.

Diamo un'occhiata a quali parti costitutive sarà composto il menu:

Come possiamo vedere nello screenshot qui sopra, la navigazione di Apple.com ha le seguenti 6 parti principali:

• Viene utilizzata un'ombra;
• Il confine;
• Separatore tra le voci di menu;
• Gradiente per lo sfondo;
• Effetto di oscuramento al passaggio del mouse;
• Testo del menù.

Ci sono due modi per usare gli stili scritti:

• crunch

Importante: quando si utilizza il primo metodo, in modo che styles.less siano connessi prima che sia connessa la libreria less.js! Resta anche da ricordarsi di connettersi senza prefisso.
Pertanto, la connessione degli stili è simile a questa: