Od Sass-a do PostCSS-a

Share

Svako ko se iole dotakao web developmenta i client side front end-a sigurno se susreo ili barem čuo za Sass, Less, Stylus i druge alate koji olakšavaju pisanje i održavanje CSS-a. Danas se rad sa CSS-om na velikim projektima teško može zamisliti bez ovih CSS pre-procesora.

Pojavom CSS pre-procesora dobijamo brojne mogućnosti kao sto su raspodele fajlova u više manjih modula radi bolje organizacije (koji se na kraju spajaju u jedan fajl ne bi li imali jedan – umesto više – HTTP poziva), pisanje koda koji se lako može iskoristiti više puta i sa lakoćom menjati, automatizacija prilikom pravljenja slika, sprite-ova i ostale pogodnosti koje nisu bile dostupne u samom CSS-u.

Zašto onda menjati stabilnost Sass-a, podršku zajednice koju ima i udobnost rada na koju smo navikli radeći sa njim?

Sass je sam po sebi je monolitan sistem (kao i većina drugih CSS pre-procesora), što znači da kada ga instaliramo dobijamo sve njegove mogućnosti, iako bi možda koristili samo određene. Dakle, sve ili ništa. Ako se kojim slučajem desi da neka mogućnost ne postoji, morali bismo da napišemo plugin u Ruby-ju, što verujem da mali broj front end developera zna, a naročito oni koji pre svega rade sa CSS-om.

Sass ima svoju filozofiju funkcionisanja koja jasno naglašava da to nije CSS, već nestandardna sintaksa koja se dalje kompajlira u standardni CSS i zatim se servira browser-u, što znaci da korišćenjem Sass-a učimo i održavamo sintaksu koja verovatno nikada neće biti prihvaćena od strane W3C auditorijuma pa samim tim i implementirana u browser-e i da nećemo moći tako jednostavno izbaciti alat iz upotrebe kada postane suvišan ili prevaziđen.

Takođe, jedan od većih problema sa Ruby Sass-om je taj što je veoma spor, posebno za potrebe „live reload“ funkcionalnosti u pretraživaču, a ako bi u proces uveli i Compass (najpopularniji Sass framework, zadužen za vendor prefix-e, color i image helper-e, sprite builder-e itd.) proces bi se dodatno usporio.

Mada, treba pomenuti da postoji i LibSass biblioteka koja je dosta brža od izvornog Ruby Sass-a, jer je pisana u C programskom jeziku, a pruža i mogućnost rada u različitim jezicima preko takozvanih wrapper-a (poput node-sass), pa pored problema sa brzinom rešava i problem sa instalacijom Ruby programskog jezika, kao dodatne zahtevnosti.

Primer Sass koda

// import files
@import "components/component";

// define variables
$CyanColor: #00FFFF;
$LightCyanColor: lighten($CyanColor, 20%);
$DarkCyanColor: darken($CyanColor, 10%);
$small: 479px;

// define mixins
@mixin transition($transition...) {
   -moz-transition:    $transition;
   -o-transition:      $transition;
   -webkit-transition: $transition;
   transition:         $transition;
}

// write SCSS
.holder {
   @include transition(all 0.3s ease-out);
   background: $LightCyanColor;

   @media (min-width: $small) {
      display: none;
   }

   &:hover {
       background: $DarkCyanColor;
   }
}

Nova nada na vidiku – PostCSS!

PostCSS je alat za obradu stilova pomoću JavaScript plugin-ova. Funkcioniše tako što parsira CSS u abstract syntax tree (AST) i prosleđuje ga svojim plugin-ovima, posle čije obrade će se završiti ciklus i dobiti string CSS-a spreman za browser.

Cela filozofija funkcionisanja ovog alata je bazirana baš na plugin-ovima specijalizovanim samo za jednu svrhu. Potrebne su vam Variables, Mixins, Extends, Color Helpers, Optimizations, Fallbacks, Grids… dovoljno je da odaberete neki od preko 200 trenutno dostupnih plugin-ova na sajtu postcss.parts.

Ako baš ono što vama treba još uvek ne postoji, lako možete da napišete svoj plugin u JavaScript-u. Pogledajte PostCSS Plugin Guidelines, PostCSS API, PostCSS Plugin Boilerplate. Čak i ljudi koji nisu stručni u radu sa JavaScript-om mogu da se oprobaju, jer je vredno ulagati u učenje jezika koji se koristi svakodnevno u front end-u i koji je jedini jezik koji radi u web pretraživačima.

Automatsko dodavanje vendor prefix-a

Autoprefixer je svakako najpoznatiji Post CSS plugin, a ujedno i prvi plugin koji je napisan za PostCSS. Ovaj plugin parsira CSS i automatski dodaje vendor prefikse pomoću servisa caniuse.com.

/* Unos */
.box {
   display: flex;
}


/* Rezultat */
.box {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
}

CSS4 sintaksa danas!

Želite da pišete i učite sintaksu koja će verovatno biti usvojena u budućnosti? Jednostavno koristite neki od PostCSS plugin-ova koji se ponašaju kao polyfill, omogućavajući da pišete buduću sintaksu još danas (cssnext, postcss-custom-properties), a jednog dana, kada to postane standard, samo isključite taj plugin i vaš aktuelni kod će radi isto kao što je radio i pre uz pomoć PostCSS plugin-a!

:root {
--linkColour: purple;
}

a {
color: var(--linkColour);
}

Instalacija PostCSS-a

Da bi instalirali PostCSS potrebno je da prethodno imamo instaliran Node, jer ćemo koristiti njegov package manager (npm) za instalaciju.

PostCSS se može koristiti direktno iz komandne linije  ili ga možemo uključiti u neki od popularnih build alata poput Webpack-a, npm-a, Grunt-a, Gulp-a, a takođe postoji i PostCSS JS API koji omogućava rad u drugim okruženjima.

Do sada smo koristili „compass compile“, a od sada?

Nakon što napravimo izmene obično smo pokretali „compass compile“ u komandnoj liniji, sačekali da se posao završi i refresh-ovali stranicu u browseru da vidimo efekte. Opcije pre-procesiranja su se nalazile u Ruby config fajlu – config.rb.

Ovaj put se opcije nalaze u JSON fajlu options.json a komanda je „postcss –use autoprefixer -c options.json -o main.css css/*.css“. Ovaj način podrazumeva i instalaciju PostcssCLI.

PostCSS sa Gulp-om

Za potrebe ovog primera nećemo koristiti komandnu liniju već Gulp task runner. Iz komandne linije pokrenemo:

npm install --save-dev gulp-postcss postcss-import postcss-nested postcss-cssnext

U gulpfile.js dodamo:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var postcssImport = require('postcss-import');
var nested = require('postcss-nested');
var cssnext = require('postcss-cssnext');

gulp.task('css', function () {
   return gulp.src('./src/*.css')
       .pipe(postcss([
           postcssImport(),
           nested(),
           cssnext({ browsers: 'last 2 version, > 1%, ie > 10'}),
       ]))
       .pipe(gulp.dest('./dest'));
});

Primer PostCSS koda

/* import files */
@import "components/component";

/* define variables and media queries */
:root {
   --CyanColor: #ff00ee;
   --LightCyanColor: color(var(--CyanColor) whiteness(20%));
   --DarkCyanColor: color(var(--CyanColor) blackness(10%));
}

@custom-media --small (width >= 480px);

/* write CSS */
.holder {
   transition: all 0.3s ease-out;
   background: var(--CyanColor);
   background: var(--LightCyanColor)

   @media (--small) {
       display: none;
   }

   &:hover {
       background: var(--DarkCyanColor);
   }
}

Ako zanemarimo „nesting“, ostatak koda je pisan po zvaničnoj W3C sintaksi.

Pisanje Sass sintakse u PostCSS-u

Ako ste ipak previše navikli na Sass sintaksu, njegove varijable i mixine i za to postoje PostCSS plugin-ovi poput precss, postcss-mixins, koji omogućavaju da pišete PostCSS kod koji izgleda identično Sass kodu. Ovo vam takođe može olakšati tranziciju sa Sass na PostCSS, ukoliko to želite da uradite, a bojite se obima posla.

Treba pomenuti i da je moguće koristiti PostCSS povrh LibSass-a, odnosno da je moguće raditi transformacije nad CSS fajlom pomoću PostCSS plugin-ova nakon što je fajl već obrađen od strane LibSass-a. Na primer, možete dodati samo Autoprefixer na postojeću Sass arhitekturu.

Besplatni PostCSS tutorijali

Ako biste želeli da detaljnije proučite PostCSS, postoje odlični PostCSS tutorial-i koje je snimio Scott Tolinski i koji su besplatni.

Share

Prijavi se da prvi dobijaš nove blogove i vesti.

Ostavite odgovor

Jovan Milovanović and Front End Team

JavaScript Developer @Vast
mm

Jovan Milovanović works as a JavaScript Developer in Vast since 2015. He loves gadgets, video recording & editing, listening and creating electronic music. 

Prijavi se da prvi dobijaš nove blogove i vesti.

Kategorije