Brzo povezivanje SCSS (SASS) u Drupal pomoću modula Sassy

SASS/SCSS su odavno postali standard za pisanje CSS koda, ako ih još ne koristite za svoje sajtove, vreme je da razmislite o tome. Možete veoma brzo povezati SCSS pomoću modula Sassy, i to čak i na shared hostingu, jer će se kompilacija CSS fajlova vršiti pomoću PHP biblioteke.

Hajde da počnemo. Imam čist Drupal sa Zen temom. Potrebno je da instaliramo modul Sassy:

https://www.drupal.org/project/sassy

Modulu Sassy potreban je modul Prepro za kompilaciju CSS-a:

https://www.drupal.org/project/prepro

Takođe instalirajte modul Libraries API, koji će nam trebati za povezivanje biblioteke za Sassy:

https://www.drupal.org/project/libraries

Potrebna je i biblioteka PHPSass, koja prevodi SCSS kod u CSS. Preuzmite najnoviju verziju "Download ZIP":

https://github.com/richthegeek/phpsass

Biblioteku treba kopirati u folder sites/all/libraries/phpsass tako da fajlovi budu smešteni ovako:
/sites/all/libraries/phpsass/SassLoader.php
/sites/all/libraries/phpsass/SassParser.php i ostali.

Uključujemo module. Sada možemo dodati SCSS fajl. Moja pod-tema se zove sitemade, zato otvaram fajl sitemade.info i dodajem CSS fajl:

stylesheets[all][] = css/styles.scss

Vidite da samo treba napisati ekstenziju .scss, a fajlovi se povezuju kao i obično. Kreirajte fajl css/styles.scss i očistite keš. I to je sve! Fajl će biti povezan i raditi.

Ako imate problema, proverite da li folder files ima prava 777 i nema grešaka u izveštaju o stanju sajta. Postavljanja Drupala za rad sa SCSS-om i mogućnosti SCSS-a obradićemo kasnije.

Rad modula Sassy

Nakon što povežemo SCSS fajl, modul Sassy generiše CSS iz SCSS, a modul Prepro čuva generisani CSS u folderu sites/default/files/prepro po defaultu.

Da CSS ne bi bio generisan na svakoj strani (za produkcijski sajt), potrebno je isključiti keširanje u podešavanjima modula Prepro:

/admin/config/media/prepro

Po defaultu keširanje je isključeno i CSS se regeneriše na svakoj strani. To je dovoljno brzo da možete brzo menjati SCSS i odmah videti rezultate.

Mozilla Firefox Firebug + FireSass

Vrlo je praktično koristiti Firebug i dodatak FireSass, koji omogućava da se vidi koja linija izvornog SCSS fajla odgovara prikazanom CSS kodu:

Ako ne instalirate dodatak, videćete samo linije u kompiliranom CSS fajlu.

Za dodatak uključite opcije na podešavanjima Prepro modula:
/admin/config/media/prepro

Pass @warn and @debug to Watchdog
Include debug information in output

Mogućnosti SCSS

Sve mogućnosti SASS/SCSS možete pročitati na zvaničnom sajtu:

http://sass-lang.com/

Glavna osobina SCSS-a je ugnježdenost.

Ugnježdenost

Možete pisati kod bez dupliranja klasa roditelja, na primer:

#menu-1 {
  margin-top: 20px;

  ul {
    margin-left: 0px;

    li {
      width: 100px;
      display: inline-block;
    }

    .li-1 {
      background: red;
    }
  }
}

Ovaj kod je kraći i pregledniji nego:

#menu-1 {
  margin-top: 20px;
}

#menu-1 ul {
  margin-left: 0px;
}

#menu-1 ul li {
  width: 100px;
  display: inline-block;
}

#menu-1 ul li.li-1 {
  background: red;
}

Zamislite da treba dodati stilove za <a> unutar <li>, a u <a> još i <span>. Sve to možete lako napisati u hijerarhiji:

#menu-1 {
  margin-top: 20px;

  ul {
    margin-left: 0px;

    li {
      width: 100px;
      display: inline-block;

      a {
        text-decoration: none;

        span {
          padding-left: 10px;
          background: url(../images/icon.png) left 3px no-repeat;
        }
      }
    }

    .li-1 {
      background: red;
    }
  }
}

Možete dodavati i :hover koristeći hijerarhiju i selektor &:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

Ovo će biti prevedeno u:

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
body.firefox a {
  font-weight: normal;
}

Varijable

Još jedna sjajna osobina su varijable. Možete definisati paletu boja i koristiti je:

$red: #fa0a0a;
$blue: #0a0afa;
$green: #0afa0a;

$content: 1200px;
$sidebar: 250px;

.sidebar {
  width: $sidebar;
  float: left;
  background: $red;
}

.content {
  width: $sidebar;
  margin-left: $sidebar;
  background: $blue;
}

Funkcije (Mixin)

SASS omogućava definisanje funkcija (mixin):

@mixin blue-button {   
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;

  &:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
  }
}

.form-submit {
  @include blue-button;
}