preprocesor SASS
Syntactical Awesome StyleSheet– język skryptowy, którego kod przetwarzany jest do plików wynikowych kaskadowych arkuszy stylów – CSS.
SASS można rozumieć, jako dodatkową warstwę lub rozszerzenie na CSS. Ponieważ przeglądarki nie mogą odczytywać bezpośrednio plików SASS, dlatego potrzebujemy kompilatorów, które mogą konwertować pliki SASS do pliku CSS czytelnego dla przeglądarki.
SASS dostarcza wiele przydatnymi funkcjami i właściwości, na przykład istnieją zmienne, zagnieżdżanie, czy pisanie funkcji.
Tutaj znajdziesz więcej informacji:
- strona główna SASS.
- dokumentacja
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
Hope this helps and happy coding :)
Zobacz jeszcze
programy do kodowania
brackets - podgląd srtony notepad++ - koloruje składnie, pisanie makr ze skrótami klawiaturowymi html-kit - podgląd, skróty klawiaturowe do dodawania znaczników coffeecup free -...
web development
instrukcje warunkowe
if (warunek){ instrukcja; } if (warunek) { instrukcja 1; } else { instrukcja 2; } if (warunek 1 ) { instrukcja 1; } else if (warunek 2 )...