03. Dezember 2011

SASS / SCSS & sassify Extension – Türchen 3

in Templates, Tutorial, TYPO3, TypoScript

Sass (Syntactically Awesome Stylesheets) ist eine Stylesheet-Sprache, welche in gut formatierte standard CSS umgewandelt wird.
Mit dieser ist es möglich Variables, Nesting, Mixings und Selector Inheritance und vieles mehr zu verwenden. Die Dateiendung ist „.scss“. Anbei einige Beispiele…

Variablen

Man definiert einen Wert, welcher dann an entsprechender Stelle im Code immer wieder eingefügt werden kann.

$black:       #222222;
$blue:        #083672;
$white:       #fff;
$arrow_white: url('../img/arrow_white.png');
$arrow_blue:  url('../img/arrow_blue.png');
body {
  font-family: Arial, Verdana, sans-serif;
  font-size:   0.8em;
  color:       $black;
  text-align:  center;
  background:  $white;
}
 
a {
  display: block;
  background: $blue $arrow_white no-repeat 205px 13px;
}

Nesting

Mit dieser Methode kann man sich super viel Schreibarbeit ersparen. Es werden einfach die Elemente ineinander verschachtelt.

nav {
  position: relative; 
  padding: 0 0  0 240px;
  width: 710px;
 
  li {
    display: inline;
    float: left;
 
    a {
     display: block; 
     float: left;
     margin: 0 10px 0 0;
     font-size: 0.85em;
     }
 
   } /* li */
 
 } /* nav */

Mixins

Mit dieser Methode ist es möglich mehrere CSS-Definitionen einzufügen. Sehr hilfreich z.B. bei den CSS3 Definitionen, die für jeden Browser speziell definiert werden müssen.
Definition Mixin

@mixin verlaufZweiFarben($hauptfarbe, $farbe1) { 
  background: $hauptfarbe; /* Old browsers */
  background: -moz-linear-gradient(top, $hauptfarbe 0%, $farbe1 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$hauptfarbe), color-stop(100%,$farbe1)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* IE10+ */
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='$hauptfarbe', endColorstr='$farbe1',GradientType=0 )"; /* IE6-9 */
  background: linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* W3C */
}

Integration Mixin

article { 
  @include verlaufZweiFarben;
}

Selector Inheritance

Mit dieser Methode ist es möglich Stile zu kopieren, ohne die CSS Eigenschaften zu duplizieren.

.infobox { 
  border: 1px solid #000;
  background: #dddddd;
  color: #000;
  width: 100px;
}

Hier werden jetzt alle Styles, die bereits in “.infobox” definiert wurden integriert.

.teaser { 
  @extend .infobox;
  font-size: 1em;
}

Funktionen

$color: #777777;
#content {
  background:-color: darken($color,20%);
  color: lighten($color,50%);
}
 
Definition als CSS
#content {
  background-color: #444444;
  color: #f6f6f6;
}

Weitere Informationen sind auf der offiziellen SASS Homepage zu finden unter sass-lang.com. Für alle, die die Firebug Extension für den Firefox nutzen, gibt es zudem die Erweiterung FireSass (Update: Link entfernt da 404. Weitere Infos gibt es auch unter https://digital.com/blog/webextensions-firefox/).

SASS in TYPO3

Die Extension sassify unterstützt die Integration von SASS in TYPO3. Einfach herunter laden, installieren, Include static Template einbinden und Ts Code definieren. z.B.:

plugin.tx_sassify_plugin {  
  debugInfo = 0
  showExceptions = 1
  cache = 0
  stylesheets {    
    10 = reset.scss
    10 {
      filenameWrap.wrap = fileadmin/templates/scss/|    
      media = screen    
    }
    20 = screen.scss
    20 {
      filenameWrap.wrap = fileadmin/templates/scss/|    
      media = screen    
    }
    50 = print.scss
    50 {
      filenameWrap.wrap = fileadmin/templates/scss/|    
      media = print    
    }
 
  }
}

Seitenspezifische CSS können einfach mittels Conditions definiert werden

[PIDinRootline = 2]
  plugin.tx_sassify_plugin.stylesheets.21 = home.scss
  plugin.tx_sassify_plugin.stylesheets.21.filenameWrap.wrap = fileadmin/templates/scss/|
[end]

Wer von euch auf den Geschmack gekommen ist und SASS ausprobieren möchte, kann auch ganz einfach seine bisherigen css Dateien umbenennen in .scss und die neuen Sachen Stück für Stück integrieren. Man kann klein anfangen – z.B. erst einmal nur die Farben als Variablen definieren und sich dann allmählich weiter entwickeln. Ich habe mich super schnell dran gewöhnt und mag SASS absolut nicht mehr missen.

11 Reaktionen zu “SASS / SCSS & sassify Extension – Türchen 3”

Kommentare abonnieren (RSS) oder TrackBack URL

Cool, sieht nett aus 🙂 Funktionieren die Minify- und Merge-Funktionen von TYPO3 dann auch noch?

Philipp am 03. Dezember 2011 um 11:12

Ok, eine PHP Portierung vom originalen Ruby Code interpretiert auf dem Server das SCSS zu CSS. Wann und wie oft passiert das?

Ingo am 03. Dezember 2011 um 12:30

Leider macht man sich mit sassify das TYPO3 Caching kaputt. Um das SCSS zu kompilieren muss man immer den kompletten Cache löschen. Definitiv besser ist sich den Compiler lokal zu installieren. Läuft auf Ruby (auf Mac schon installiert und auf Win mit http://rubyinstaller.org/download.html) und dann mit „gem install sass“ den Compiler installieren. Auch eine Lösung wäre sich Ruby und HAML (der Compiler) auf dem Webserver zu installieren und dann die benötigten Verzeichnisse mit „sass watch“ überwachen zu lassen. Praktisch, wenn mehrere Personen an den selben Projekt arbeiten müssen.

Huaba am 03. Dezember 2011 um 17:22

Kenne die gleichen Prinzipien unter dem Namen scaffold, das Problem hierbei ist, dass im Firebug die Zeilennummern zum CSS nicht stimmen. Tritt dies bei SASS auch auf bzw. wenn ja, gibt es dafür eine Lösung?

vG

Gernot am 08. Dezember 2011 um 15:51

@Gernot
Das tritt bei SASS leider auch auf. Vermute mal, dass das durch die includes kommt.

@Huaba
Das mit dem TYPO3 Caching ist wirklich ein kleiner Nachteil. Man muss den Cache leeren, damit die SASS Änderungen zu sichten sind. Abhilfe kann ein Programm schaffen, dass mal eben alle Seiten aufruft und sie somit wieder in den Cache befördert. Ich hab mir dazu Xenu genommen (ist kostenlos erhältlich). Der checked sämtliche Verlinkungen einer Homepage, ruft somit mal eben alles auf und gleichzeitig kann man noch kontrollieren ob alles korrekt verlinkt ist. Vielleicht nicht die idealste Lösung. Aber ich sehs so – beim Entwickeln schaltet man den Cache ja eh meistens aus und danach ändert man ja nicht ständig was am CSS bzw. SCSS eines Projektes.

Sandra am 09. Dezember 2011 um 09:43

@Gernot @Sandra
Wenn man dann das CSS mit dem Parameter „debug“ kompiliert (bei Compass gehts mit „extended“) dann wird in das CSS erweiterte Kommentare geschrieben. Dann installiert man sich das Addon FireSass und Firebug gibt nicht nur die richtigen Zeilennummern, sondern sogar den richtigen Dateinamen der SCSS/SASS Datei. Klappt super!

Huaba am 17. Dezember 2011 um 14:52

Habe das Problem, dass auch bei „no_cache = 1“, die von sassify erzeugte .css-Datei nicht neu erzeugt wird.

Ich habe im TYPO3 „no_cache = 1“ gesetzt und innerhalb der Extension sassify „cache = 0“ – noch Jemand so ein Problem?

Denn während der Entwicklung jedes Mal die Datei per Hand zu löschen, ist schrott ,)

Peter am 24. Februar 2012 um 16:27

Dieser Post ist vielleicht für den ein oder anderen ganz interessant:
http://benfrain.com/how-to-get-code-folding-in-sass-files-for-bbedit-10/

Sandra Tyrchan am 09. Juni 2012 um 13:23

Hi, wie kann ich denn bei der sassify Extension den Bilder Pfad ändern? Der ist wohl standardmässig auf /images. Aber das nutzt mir nichts. Kann man den ändern? Beste Grüße

besucher80 am 29. Juli 2012 um 18:55

@besucher80: um inline-images zu nutzen, habe ich eine datei in der ext /typo3conf/ext/sassify/Resources/Private/PHP/PHamlP/sass/extensions/compass/config.php angepasst. hier die beiden variablen wie folgt ändern: ‚images_dir‘ => “,
‚images_path‘ => ‚fileadmin‘,

hirsch3000 am 18. Oktober 2012 um 11:48

Hallo zusammen!

Der Thread ist zwar schon bissi alt, aber vielleicht „hört“ ja noch wer mit.

Hatte jemand von euch schonmal das Problem, dass die Typo3-Extension „sassify“ leere .css-Files produziert hat?

Konnte das jemand lösen?

Danke und Gruss aus der Schweiz

Alex am 24. März 2014 um 10:10

Kategorien

Archiv