.cssx preprocessor

Proč CSSX?

Instalace

Pro správnou funkčnost je nutné mít funkční PHP 5.4 (používání anonymních funkcí) a mod_rewrite. Pro kompilaci CSSX vložte do .htaccess souboru následující řádky:

RewriteCond %{REQUEST_URI} (.*\.cssx)$
RewriteRule ^(.*)$ /cssx.php [QSA,L]

Stáhnout (verze 160203)

Definice konstant

Definovat lze jak jednotlivé hodnoty, tak celé části (snipety) CSS kódu.

Zdrojový kód

$color: #FF0000;

$font {
   font-family: helvetica, sans-serif;
   font-size: 1em;
}

.block {
   $font;
   color: $color;
}

Výsledný kód

.block {
   font-family: helvetica, sans-serif;
   font-size: 1em;
   color: #FF0000;
}

Dědičnosti

Jednotlivé styly lze psát hierarchicky.

Zdrojový kód

.column {
   padding: 4px;
   .header {
      background: white;
   }
   .content, .remarks {
      font-weight: bold;
   }
   +.main {
      border: 1px;
   }
}

Výsledný kód

.column {
   padding: 4px;
}
.column .header {
   background: white;
}
.column .content, .column .remarks {
   font-weight: bold;
}
.column.main {
   border: 1px;
}

CSSX příkazy

@comments on|off

Zapíná nebo vypíná komentáře ve výstupním souboru. Výchozí nastavení je na off.

@mixin <mixin_name>(param[, ...]) { ... }

@include <mixin_name>(param[, ...]) { ... }

Umožňuje definovat CSS snipet a dále ho využívat ve stylesheetu. Narozdíl od konstant umožňuje používat při volání snipetu parametry.

Zdrojový kód

@mixin RoundBorder($round, $color) {
   border-radius: $round;
   -moz-border-radius: $round;
   -webkit-border-radius: $round;
   border: 1px solid $color;
}

.block {
   padding: 4px;
   @include RoundBorder(4px, #FF0000);
}

Výsledný kód

.block {
   padding: 4px;
   border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border: 1px solid #FF0000;
}

@extend <style_name>

Rozšiřuje styl pomocí již definovaného stylu

Zdrojový kód

h2 {
   font-weight: bold;
   color: #FF0000;
}

h3 {
   @extend h2
   font-size: 0.8em;
}

Výsledný kód

h2 {
   font-weight: bold;
   color: #FF0000;
}

h3 {
   font-weight: bold;
   color: #FF0000;
   font-size: 0.8em;
}

@mediaquery <media_name> {mediaquery}

Definuje nový typ média s uvedenými vlastnostmi. Nyní se můžou jednotlivé vlastnosti stylu doplnit o cílové médium.

Zdrojový kód

@mediaquery mobile {screen and (max-width: 1024px)}

.block {
   padding: 8px;
   padding: 5% @mobile;
}

Výsledný kód

.block {
   padding: 8px;
}

@media screen and (max-width: 1024px) {
.block {
   padding: 5%;
}
}