SASS - minu töömeetod

Post on 16-Jul-2015

74 views 2 download

Transcript of SASS - minu töömeetod

„SASS“Minu töömeetod

Hannes Kirsman

Lühidalt endast

Pixel perfect guy

10 aastat front-end arendaja

Fännan PHP, SASS, JS, Drupal

Struktuur Meedia (6a), Web Expert (3a), Mekaia (2a)

Sanoma.com, eestipank.ee, m.tallinn.ee, nordecon.com

Millest räägin

Kuidas CSS väiksemateks struktureeritud osadeks jagada

(Näited Omega theme põhjal)

SASS

Mis on SASS?

CSS'i laiendus/kompillaator

Muutujad, nestimine :), funktsioonid, korduvate koodilõikude kasutamine, arvutamine, failide kaasamine (include), süntaksi veakontroll

http://sass-lang.com/

Näide

nav { ul { margin: 0; padding: 0; list-style: none; }

li { display: inline-block; }

a { display: block; padding: 6px 12px; text-decoration: none; }}

nav ul { margin: 0; padding: 0; list-style: none;}

nav li { display: inline-block;}

nav a { display: block; padding: 6px 12px; text-decoration: none;}

Süsteemi seadistus

http://sass-lang.com/install

> gem install sass

> gem install sass-globbing(failide automaatne rekursiivne sisestamine)

Drupali „Omega“theme

Omega - ülevaade

960.gs theme

Responsive (default: mobiil, tablet, desktop, wide)

Kasutajaliides gridi muutmiseks! (pikemalt ei peatu)

https://drupal.org/project/omega

„Mobile first“ lähenemine

Vaikimisi 5 css faili mobiili, tableti, tavalise desktopi ja laia desktopi vaate jaoks

Vastavalt ekraani suurustele laetakse sisse

Hiljem laetud css'id võivad eelmisi stiile üle kirjutada. Samas narrow, normal jawide üksteist mitte.

Probleem -> lahendus

Liiga suured css failid

Suurtest failidest lähtuvalt...

Raske jälgida

Raske hallata

Ülevaate puudumine

Lahendus

Iga osa (logo, menüü jne) eraldi faili

Mobiili, tableti ja desktopi kood eraldi lõikudes kõik ühes failis. St logo puhul kõik responsive osad logo.scss'is jne

Failid omakorda struktureeritudkaustadesse header, content jne

Näide – logo.scss

logo.scss -> css

Kuidas töötab - lühidaltDrupal kasutab css/ kaustas olevad faile

Css/ kausta kõrval on sass/ kaust. Iga css fail on siin dublitseeritud aga scss laiendiga (global.css -> global.scss jne). Nimetame neid juurfailideks.

Iga scss faili sisuks on (kus X on seda faili kirjeldav väärtus, näiteks global):$layout: X;@import 'includes/**/*';

Sass/ kaustas on script:sass -r sass-globbing --watch global.scss:../css/global.css dehd2014-alpha-default.scss:../css/dehd2014-alpha-default.css ...

Juurfaili näited

@import 'includes/**/*';

Loeb includes kaustast failid rekursiivselt sisse vastavalt failisüsteemi järjestusele

Seega kui vaja ettepoole tõsta, lisa näiteks prefix '0'. Minul failid 00-general.scss enamustes kaustades, et teha üldiseid stiilimuudatusi antud regioonile.

Includes/ kausta struktuur Drupali regioonide põhjal:10-header/20-preface/30-content/40-footer/

Nõuanded

1# Sourcemaps ja Chrome

SASS 3.3+ toetab sourcemap tehnoloogiat. Kui kompilleerida failid --sourcemap parameetriga, siis css'is märgitakse ära iga selectori scss allikas

Seda oskab lugeda Chrome!

Failid saab ära seostada kohalikul kettal olevate failidega ja siis otse brauserist muuta

2# Serveris pole SASS'i/SSH'd

Windowsi puhul installeeri SASS kohalikus masinas ja kasuta WinSCP „Keep remote directory up to date“ featuuri.

Ole ettevaatlik! Kohalik seis laetakse alati serverisse üles mitte vastupidi.

3# Hoia SASS 1-3 tasemeline

Alguses võib tunduda, et SASS'i võiks ehitada täpselt HTML struktuuri järgi (lõputu nesting).

Sellel on miinused:1) Rohkem koodi = suurem fail2) Pikk css query on aeglane (ja kole)3) Võib muutuda raskesti hallatavaks

4# Maagiline & märk (1)

nav { ul { margin: 0; padding: 0; list-style: none;

.front & { color: red; } }}

nav ul { margin: 0; padding: 0; list-style: none;}

.front nav ul { color: red;}

Kui kasutada selectori lõpus (tühikuga), siis lisab css'is query algusesse

4# Maagiline & märk (2)

nav { ul { margin: 0; padding: 0; list-style: none;

&:hover { color: red; } }}

nav ul { margin: 0; padding: 0; list-style: none;}

nav ul:hover { color: red;}

Kui kasutada selectori alguses, siis jätab tühiku ära

Aitäh!Aitäh!

Allikad

http://www.slideshare.net/ragnarkurm/compile-your-style-25500334

https://medium.com/what-i-learned-building/b4daab987fb0

http://codepen.io/TimPietrusky/pen/eHGfj