SASS - minu töömeetod

29
„SASS“ Minu töömeetod Hannes Kirsman

Transcript of SASS - minu töömeetod

Page 1: SASS - minu töömeetod

„SASS“Minu töömeetod

Hannes Kirsman

Page 2: SASS - minu töömeetod

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

Page 3: SASS - minu töömeetod

Millest räägin

Kuidas CSS väiksemateks struktureeritud osadeks jagada

(Näited Omega theme põhjal)

Page 4: SASS - minu töömeetod

SASS

Page 5: SASS - minu töömeetod

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/

Page 6: SASS - minu töömeetod

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;}

Page 7: SASS - minu töömeetod

Süsteemi seadistus

http://sass-lang.com/install

> gem install sass

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

Page 8: SASS - minu töömeetod

Drupali „Omega“theme

Page 9: SASS - minu töömeetod

Omega - ülevaade

960.gs theme

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

Kasutajaliides gridi muutmiseks! (pikemalt ei peatu)

https://drupal.org/project/omega

Page 10: SASS - minu töömeetod

„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.

Page 11: SASS - minu töömeetod
Page 12: SASS - minu töömeetod

Probleem -> lahendus

Page 13: SASS - minu töömeetod

Liiga suured css failid

Page 14: SASS - minu töömeetod

Suurtest failidest lähtuvalt...

Raske jälgida

Raske hallata

Ülevaate puudumine

Page 15: SASS - minu töömeetod

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

Page 16: SASS - minu töömeetod

Näide – logo.scss

Page 17: SASS - minu töömeetod
Page 18: SASS - minu töömeetod

logo.scss -> css

Page 19: SASS - minu töömeetod

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 ...

Page 20: SASS - minu töömeetod

Juurfaili näited

Page 21: SASS - minu töömeetod

@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/

Page 22: SASS - minu töömeetod

Nõuanded

Page 23: SASS - minu töömeetod

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

Page 24: SASS - minu töömeetod

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.

Page 25: SASS - minu töömeetod

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

Page 26: SASS - minu töömeetod

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

Page 27: SASS - minu töömeetod

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

Page 28: SASS - minu töömeetod

Aitäh!Aitäh!

Page 29: SASS - minu töömeetod

Allikad

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

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

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