Image
Teknologio
(Savoir faire, savoir vivre)

(Savoir faire, savoir vivre)

Enhavo

Donate to Pakistan Floods Appeal

SASS: CSS plibonigita.

Povo kaj eleganteco

Sass estas etendaĵo de CSS kiu aldonas potencon kaj elegantecon al la baza lingvo. Ĝi permesas vin uzi variablojn, ingitajn regulojn, enmiksaĵojn, entekstajn importojn, kaj pli, ĉiuj kun plene CSS-kongrua sintakso. Sass helpas gardi grandajn stilfoliojn bone organizatajn, kaj funkciigi malgrandajn stilfoliojn rapide...

(Libere elangligita el retejo de SASS, http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html ).

Mia animo de programisto

Dum la diferencigo inter enhavo kaj prezentaĵo estas vaste akceptata kiel "Ion Bonan", kaj oni estimas ke Laŭtemaj Stilfolioj estas la plej bona metodo trafi tiun celon, CSS mankas multon kiel lingvo priskriba de stiloj. Ĝi havas preskaŭ neniun strukturon, rompas la principon DRY (ne ripetu vin) kaj ĝenerale kondukas al neeleganta markado kiu estus tute neakceptebla en iu ajn respektinda programadolingvo. Certe, CSS ne estas precize programadolingvo, vere pli ia metalingvo, tamen, mia animo de programisto ribelas kiam mi devas uzi ĝin.

Mirindega

SASS, kiu estas angla mallongigo de "Syntactically Awesome StyleSheets", aŭ "Sintakse mirindegaj stilfolioj", vere estas awesome, provizante puran kaj preskaŭ objekteman tavolon ĉirkaŭ standardaj CSS-aj elementoj. La sass-a skripto estas kompilata de la sass programo, kreante perfekte validan CSS-dosieron. Tiu procezo de kompilado ja estas rapidega, kaj oni povas uzi ĝin en konstruskripton, aŭ kompili ĝin per fona tasko, aŭ enhavigi ĝin en kelkajn redaktilojn.

Elreliĝita?

SASS estis konceptita kiel kromprogramo por Ruby/Rails, sed vi povas ankaŭ uzi ĝin sendepende. Instalinte ĝin, vi simple rulas ŝelan komandon, kiu prenas SASS-forman dosieron (.scss aŭ .sass) kaj konvertas ĝin en standarda CSS-dosiero (.css). Dosieroj en .sass formo uzas krommarĝenojn por indiki la CSS-an blokstrukturon, kaj dosierojn en .scss formo uzas kuniga-krampan sintakson same kiel standarda CSS. Fakte, standarda CSS-a dosiero estas validan SASS-an dosieron, do vi povas komenci kun ekzistanta CSS-dosiero kaj migri ĝin iom post iom al SASS. La formo .scss (CSS-simila) estas pli nova ol la formo .sass, kvankam subteno por la formo .sass daŭros sen tempolimo.


Instalado (Linukso/Ubuntu)

Instalu Ruby-on

(Bash)
$ sudo apt-get install ruby

Instalu Gem-an instalilon

(Bash)
$ sudo apt-get install rubygems1.8

Instalu plej freŝan SASS-gemon

(Bash)
$ sudo gem install haml-edge

Kreu ligilojn por igi atingeblaj la ruleblajn programojn

En dosierujo en via PATH (ekzemple, /usr/bin), kreu la sekvantajn ligilojn:-

(Bash)
$ cd /usr/bin    #or other directory in your $PATH
$ sudo ln -s $HOME/.gem/ruby/1.8/bin/sass
$ sudo ln -s $HOME/.gem/ruby/1.8/bin/css2sass
$ sudo ln -s $HOME/.gem/ruby/1.8/bin/sass-convert

Uzado

(Vidu je http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html por pliaj detaloj.)

(Bash)
$ sass input_file_name.scss output_file_name.css

Ankaǔ haveblas fonan demonon, kiu gvatos viajn dosierojn SASS / SCSS kaj kompilos ilin kiam ajn ili ŝanĝas.

Kelkaj ekzemploj

Variabloj
(SCSS)
$Blue: #0000FF;
background: $Blue;
Ingado
(SCSS)
$vert: #00ff00;
$rouge: #ff0000;
$noir: #000000;
#main p {
  color: $vert;
  width: 97%;
  .redbox {
    background-color: $rouge;
    color: $noir;
  }
}
Enmiksaĵoj
(SCSS)
@mixin sexy_border($color, $width: 5px) {
    border: {
        color: $color;
        width: $width;
        style: dashed;
    }
}
/* Mixin examples */
p { @include sexy_border($blue); }
h1 { @include sexy_border($blue, 2em); }

Valid XHTML 1.1 Image Image © 2010 Simono Tite, ĉiuj rajtoj reservataj