preprocesor SASS
Syntactical Awesome StyleSheet– język skryptowy, którego kod przetwarzany jest do plików wynikowych kaskadowych arkuszy stylów – CSS.
Uruchomienie SASS
- Instalacja Ruby – download
- odpalenie konsoli (terminal/cmd)
- sprawdzenie czy mamy już Ruby
ruby -v
- sprawdzamy czy mamy gem
gem --version
- instalacja SASS
- na systemie Windows
gem install sass
- na Mac OS lub Linux
sudo gem install sass
- na systemie Windows
Uruchomienie SASS z node.js
- instalacja node.js – download z nodejs.org
- command terminal – sprawdzenie wersji node node -v
- stworzenie pliku package.json – zawierającego definicje projektu – npm init
- name – brana z nazwy katalogu
- version (1.0.0)
- description
- entry point (index.js)
- test command
- git repository
- keywords
- author
- license (ISC)
- instalacja sass kompilatora i dodanie go do devDependencies – npm install node-sass –save-dev
- instalacja potrzebnych modułów z zapisanego pliku package.json – npm install
- odinstalowanie npm uninstall jquery –save – jeśli był dodany jako dependencies
- modyfikacja script w package.json – dodanie polecenie do kompilacji sass na css i watchowania zdarzeń – „compile:sass” : ” node-sass sass/main.sass css/style.css -w”
- command line – npm run compile:sass
- odświeżanie plików w przeglądarce po ich zmianie, instalacja globalna – npm install live-server -g (linux sudo npm install…)
- command line w katalogu projektu – live server – otwiera domyślną przeglądarkę z otwartą stroną z portem 127.0.0.1:8080
framework:
- compass
- inuit.css
Preprocesor SASS odmiany:
- SASS – bez klamer i średników na końcu lini
- SCSS – zawiera klamry i średniki
SASS | SCSS |
---|---|
indentation | curly braces & semi-colons |
strict rules for whitespace | ignores whitespace |
=my-mixin | @mixin my-mixin |
+my-mixin | @include my-mixin |
@import foo | @import foo |
@extend foo | @extend foo |
kompilacja online: (do sprawdzenia)
- http://codepen.io/pen
- http://jsbin.com/
- http://cssdeck.com/labs
- http://fiddlesalad.com/sass/
- http://beautifytools.com/sass-compiler.php
- http://devotter.com/sass-compiler
- http://sassmeister.com/
- http://rendera.herokuapp.com/
korzyści:
- zmienne
- wstawki
- porcjowanie plików, plik partials oznaczony _ przed nazwą – _mixins.sass
- dziedziczenie selektorów
- zagnieżdzanie
- pętle warunkowe
- pętle iteracyjne
SASS – build process – npm
- compile:sass – npm install compile-sass –save-dev
- concat:css – npm install concat –save-dev
- concat -o output.css ./1.css ./2.css ./3.css
- prefix:css – npm instal autoprefixer –save-dev + npm install postcss-cli –save-dev (autoprefixer jest częścią paczki postcss)
- -b – okresla browser i x ostatnich wersji
- -o – output plik
- compress:css – za pomocą paczki node-sass
- –output-style compressed
- build:css – npm install npm-run-all –save-dev – npm run build:css
- –parallel – uruchamianie tasków jednocześnie
uruchomienie pojedynczego taska – npm run compile:sass
plik packages,json:
"devserver": "live-server", "start": "npm-run-all --parallel devserver watch:sass", "watch:sass": "node-sass sass/main.scss css/style.css -w", "compile:sass": "node-sass sass/main.scss css/style.comp.css", "concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css", "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css", "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed", "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
Komendy SASS
- sass-watch – przegląda katalog w poszukiwaniu plików do przetworzenia
- sass-update – jednorazowa kompilacja
- sass-check – sprawdza składnię bez kompilacji
- sass-style NAME – styl css na wyjściu, jako NAME:
- nested
- compact
- compressed
- expanded
- sass-compas – importowanie modułów Compass, ładuje konfigurację projektu
- sass-help – pomoc
- watch – kompiluje pliki gdy zostaną zmienione
Komendy Compass
- compass clean – usuwa wygenerowane pliki i czyści cashe
- compile – kompiluje pliki SASS do CSS
- create – tworzy nowy projekt
- init – dodaje Compass do projektu
Komendy SASS w Start Command Prompt with Ruby
- sass–watch sass/styles.scss : css/styles.css
http://grafmag.pl/artykuly/wstep-do-sass-prepreocesora-jezyka-css/
http://sass-lang.com/
kompilacja z poziomu konsoli z Ruby
sass [options] [input] [outpu]
sass –help – pomoc
sass –watch sass/styles.scss:css/styles.css – śledzenie
Ctrl – C – zakończenie śledzenia, potwierdzenie przez T/N
sass –watch sass/styles.scss:css/styles.css –style compressed – otrzymujemy skompresowany plik css
sass shell – sass -i
Konwerter css – scss:
http://sebastianpontow.de/css2compass/
Frameworks:
- http://oddbird.net/susy/
- http://breakpoint-sass.com/
- http://compass-style.org/
- http://compass-style.org/reference/compass/
Funkcje kolorów:
http://jackiebalzer.com/color
Partials in SASS
- abstracts – katalog z plikami w których kod nie jest kompilowany na css
- _variables.sass
- _mixins.sass
- _functions.sass
- base
- _utilities.sass
- _animations.sass
- _typo.sass
- _base.sass
- components – building blocks/ organisms w Atomic Design nie zależne, re-używalne elementy, które mogą wystąpić w dowolnym miejscu strony
- layouts – elementy które są na każdej stronie, trzyma razem components – jak templates w Atomic Design
- _header.sass
- _footer.sass
- pages – specyficzne style tylko dla jednej, określonej strony, występujące tylko tam
- _home.sass
- _contact.sass
- themes – kiedy uzywamy różnych tematów dla aplikacji
- vedors – inne pliki css które są potrzebne do działania strony/aplikacji
- bootstrap.css
- icons.css