Blog

Sass/SCSS & Compass in Projekt einbinden und effektives CSS3 erstellen


Schöner und effektiver Frontend bauen – Sass/SCSS & Compass

Heute beschäftigen wir uns mit Sass/SCSS und Compass. Da wir uns ja alle gerne am Puls der technischen Entwicklung bewegen, wollen wir natürlich auch beim Frontendbau “state of the art” sein. Mit Sass/SCSS und Compass machen wir uns das Leben beim Frontendbau erheblich leichter.

Was ist Sass/SCSS?

Sass ist eine Metasprache zum Compilieren von CSS. SCSS (= Sassy CSS) ist die neueste Entwicklungsstufe von Sass und basiert auf CSS3. Mittels Ruby (Haml-Compiler) wird Sass/SCSS in CSS umgewandelt.

Welche Vorteile hat Sass/SCSS?

  • Übersichtliche Struckturierung von CSS.
  • Globale Änderungen durch Variablen.
  • Einfache mathematischer Rechnungen sind möglich.
  • Performanceoptimierung bei Importen.

Die Unterschiede zwischen Sass und SCSS

Sass: Minimalisierung, keine Semikolon, keine Klammern. Arbeitet mit einrücken (4 Leerzeichen).

.sidebar li
    padding: 5px 0

SCSS: Basierend auf CSS. Normales CSS kann einkopiert werden.

.sidebar li {
  padding: 5px 0;
}

Wie starte ich mit Sass/SCSS?

Windows benutzer müssen zuerst Ruby und Haml intallieren: http://rubyinstaller.org/downloads/. Auf OSX ist bereits alles vorhanden.

Als nächstes auf der Rubykonsole (Windows) oder dem Terminal(OSX) Sass-Unterstützung von Haml installieren.

  • Windows: gem install sass
  • OSX: sudo gem install sass

Wollen wir nun an einer Sass/SCSS-Datei arbeiten, müssen wir gespeicherte Sass/SCSS-Dateien in CSS compilieren. Das funktioniert automatisch. Dazu müssen wir auf der Rubykonsole/dem Terminal in das Verzeichnis der Sass/SCSS Datei wechseln und

  • sass –watch dateiname.scss:dateiname.css

eingeben. Wir können auch ganze Ordner automatisch überwachen lassen:

  • sass –watch ordner/scss:ordner/css

Bei Windows bitte \ verwenden.

Jetzt haben wir erreicht, dass immer wenn wir eine Sass/SCSS Datei speichern, diese sofort in CSS compiliert wird. Im Header unseres Projektes geben wir natürlich nur die entstandene CSS Datei als Stylesheet an.

Was kann Sass/SCSS?

Jetzt zu der wichtigste Frage: Lohnt sich der Aufwand? Ich denke, ja! Hier ein paar Vorteile von Sass/SCSS:

  • Wir können Variablen erstellen. Beispielsweise Farben, Abstände, Fonts usw. Das ermöglicht uns wesentlich leichtere globale Änderungen:
/*
colors
*/
$white : #fff;
$dark : #2c2c2c;
$grey : #bdbdbd;

/*
other things
*/
$boxshadow : 0 5px 5px #bdbdbd;
  • Wesentlich sinnvollere Strukturierung inkl. direkt eingebundene Mediaqueries und kombinierten Selektoren
header {
  margin: 0 !important;
  padding: 30px 40px;
  .class{
    padding: 20px;
  }
  > div{
    width: 100%;
  }
  &:hover{
    color: $dark;
  }
  @media (min-width: 1024px){
    width: 960px;
  }
}
  • Einfache mathematische Rechnungen. Auch Farben:
.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}
  • Vererbung von Eigenschaften:
.error {
  border: 1px #f00;
  background: #fdd;
}

.badError {
  @extend .error;
  border-width: 3px;
}
  • Variable Bausteine zum Wiederverwenden (@mixin und @include):
@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
#sidebar { @include rounded(top, left, 8px); }
  • @import “Dateiname” compiliert die gewünschte Datei in die ausgegeben CSS Datei, wodurch wir requests sparen und unsere Performance optimieren können:
@import "fontIcons"
  • @if, @else, @for und @each Anweisungen und Funtionen erstellen:
$h1: width-function(2);

@function width-function($v){
  @return $v * 0.9;
}

@each $part in home, blog{
  header{
    .#($part) &{
      @if $h1 == 2em{
        color: black; 
      }@else if $h1 == 1.8em{
        @for $n from 1 through 3{
          h#{$n}{
            font-size: 1.8em - (0.2 * $n);
            color: green;
          }
        }
      }@else{
        color: grey;
      }
    }
  }
}

Mehr Infos zu Sass und SCSS findet ihr auf http://sass-lang.com.

Was ist Compass?

Compass ist ein sehr effektives Framework für Sass/SCSS und mein Mittel der Wahl. Es bietet viele Vorteile, wie beispielsweise:

  • Cross-Browser CSS3 in einer Zeile erstellen.
  • Einfaches erstellen von Sprites.
  • Noch effizienteres CSS.

Wie starte ich mit Compass?

Zuersteinmal, muss Sass/SCSS installiert sein. Danach in der Rubskonsole/dem Terminal

  • Windows: gem install compass
  • OSX: sudo gem install compass

eingeben. Jetzt haben wir alles zur verfügung, was wir brauchen.

Compass in das Projekt einbinden

Mittels der Konsole, bzw. des Terminals in den gewünschten Ordner des Projektes gehen und dort

  • compass create <Ordnername>

eingeben. Compass erstell uns einen Orner für unsere Sass/SCSS Dateien, einen Stylsheet-Ordner und eine config.rb.

In der config.rb können wir verschiedene Parameter einstellen, wie beispielsweise, dass die compilierte CSS-Datei compressed erstellt wird.

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Analog zu Sass/SCSS wird auch bei Compass die Compilierungsüberwachung mittels der Konsole/dem Terminal gestartet. Dazu in den gerade ertsellten Ordner gehen und

  • compass watch

auf der Rubykonsole/dem Terminal eingeben. Es wird nun der gesammte Ordner überwacht und entsprechend die CSS Dateien compiliert.

Achtung: Wenn ihr etwas an der config.rb ändert müsst ihr die Compilierungsüberwachung neu starten, damit die Änderungen aktiv werden.

Um Compass nun in der Sass/SCSS Datei nutzen zu können müssen wir mit Hilfe von

  • @import “compass”

Compass aktivieren und das jeweilige Mixin im gewünschten Selektor mit

  • @include <mixin-name>

aktivieren.

a{
  @include link-colors($grey, $dark,  $dark, $grey, $grey);
}

Was kann Compass

Ein paar Beispiele, was mit Compass möglich ist:

  • Cross Browser Background-Gradient in einer Zeile erstellen.
  • Link-Colours – In einer Zeile Linkstatusfarben erstellen (hover, active, usw.)
  • !!Easy Sprites erstellen!! – Eines der wichtigsten und besten Features. Automatische Sprite-Map-Erstellung.
  • Image-Url – Pfadlose Angaben der Background-Images.
  • Image-Dimension – Bildgrößen auslesen.
  • uvm.

Weitere tolle Compass-Features findes ihr auf http://compass-style.org.

Das war es. Ab jetzt gibt es Cross-Browser CSS und andere coole Features schnell und effektiv. Ich hoffe das hilft euch ein bisschen und erleichtert euer nächstes Projekt.

Du magst den Post?
Loading...Loading...

Blog