Upload
hannes-kirsman
View
74
Download
2
Embed Size (px)
Citation preview
„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