preprocesor SASS

Syntactical Awesome StyleSheet– język skryptowy, którego kod przetwarzany jest do plików wynikowych kaskadowych arkuszy stylów – CSS.

 

Uruchomienie SASS

  1. Instalacja Ruby – download
  2. odpalenie konsoli (terminal/cmd)
  3. sprawdzenie czy mamy już Ruby ruby -v
  4. sprawdzamy czy mamy gem gem --version
  5. instalacja SASS
    1. na systemie Windows gem install sass
    2. na Mac OS lub Linux sudo gem install sass

 

Uruchomienie SASS z node.js

  1. instalacja node.js – download z nodejs.org
  2. command terminal – sprawdzenie wersji node node -v
  3. stworzenie pliku package.json – zawierającego definicje projektu – npm init
    1. name – brana z nazwy katalogu
    2. version (1.0.0)
    3. description
    4. entry point (index.js)
    5. test command
    6. git repository
    7. keywords
    8. author
    9. license (ISC)
  4. instalacja sass kompilatora i dodanie go do devDependencies – npm install node-sass –save-dev
  5. instalacja potrzebnych modułów z zapisanego pliku package.json – npm install
  6. odinstalowanie npm uninstall jquery –save – jeśli był dodany jako dependencies
  7. 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”
  8. command line – npm run compile:sass
  9. odświeżanie plików w przeglądarce po ich zmianie, instalacja globalna – npm install live-server -g (linux sudo npm install…)
  10. command line w katalogu projektu – live server – otwiera domyślną przeglądarkę z otwartą stroną z portem 127.0.0.1:8080

framework:

 

Preprocesor SASS odmiany:

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)

 

korzyści:

 

SASS – build process – npm


  1. compile:sass – npm install compile-sass –save-dev
  2. concat:css – npm install concat –save-dev
    1. concat -o output.css ./1.css ./2.css ./3.css
  3. prefix:css – npm instal autoprefixer –save-dev + npm install postcss-cli –save-dev (autoprefixer jest częścią paczki postcss)
    1. -b – okresla browser i x ostatnich wersji
    2. -o – output plik
  4. compress:css – za pomocą paczki node-sass
    1. –output-style compressed
  5. build:css – npm install npm-run-all –save-dev – npm run build:css
    1. –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

 

Komendy Compass

 

Komendy SASS w Start Command Prompt with Ruby

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:

 

Funkcje kolorów:

http://jackiebalzer.com/color

 

 

Partials in SASS

#sass

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.