Anzeige
Tutorialbeschreibung

Dynamischer CSS-Workflow: Ein kleiner Exkurs in LESS

Dynamischer CSS-Workflow: Ein kleiner Exkurs in LESS

In diesem Tutorial möchte ich euch die Skriptsprache bzw. das Framework namens LESS vorstellen. LESS ist eine CSS-Erweiterung, die es ermöglicht, CSS-Code dynamisch zu erzeugen. Auf diese Art und Weise kann ein Farbwert beispielsweise in eine Variable ausgelagert und an mehreren Stellen ausgegeben werden, damit man so später schnelle Änderungen vornehmen kann.


Was ist LESS und wozu benötigt man es?

Wahrscheinlich werden die wenigsten oder wirklich nur versierte Webdesigner von diesem Begriff gehört haben. Dabei gibt es diese „Scriptsprache“ schon seit einigen Jahren und sie wird fortwährend weiterentwickelt. Bei LESS handelt es sich um eine CSS-Erweiterung, die es ermöglicht, bestimmte Werte (wie z.B. Farbcodes, Pixelwerte) in Variablen auszulagern und mithilfe von Operationen sowie Funktionen zu modifizieren, um sie am Ende an geeigneter Stelle im CSS-Code einzusetzen und später abzuändern.

Möchte man beispielsweise eine Webseite erstellen, wo der Header, die Headline oder sonstige Elemente ein und dieselbe Farbe besitzen sollen, kann man mithilfe von LESS einen einzigen Farbwert in eine Variable auslagern und jene Variable dann im normalen CSS-Code einfügen. Das hat den entscheidenden Vorteil, dass man nun diesen Farbwert nur in der Variablen verändern muss, anstatt Zeile für Zeile die CSS-Datei nach einem mehrmals vorkommenden Farbwert zu durchsuchen. An dieser Stelle soll ein kleines Beispiel angeführt werden, das Einsatz von LESS verdeutlichen soll.

Gehen wir mal davon aus, dass wir folgenden CSS-Code geschrieben haben:

header {
background:#123456;
}
h1 {
color:#123456;
}


Wir haben hier an dieser Stelle den Header und die Headline (wie im obigen Beispiel beschrieben) mit derselben Farbe ausgestattet. Wir möchten allerdings den Farbwert dynamisch ausgeben und in eine Variable auslagern. Das machen wir, indem wir eine Variable VOR der Formatierung des CSS-Codes folgendermaßen definieren:

@farbe: #123456;


Wie hier schon ersichtlich ist, definieren wir eine Variable mit einem @-Zeichen, wo im Anschluss der Name der Variable folgt. In diesem Beispiel haben wir unsere Variable mit dem Namen „farbe“ versehen. Eine Variable endet immer mit einem Semikolon. Doch wie lässt sich diese Variable nun im CSS-Code einbinden?

 
Die Lösung ist simpel, denn anstelle des Farbwerts, den wir im HEADER und unserer Headline eingetragen haben, tragen wir ganz einfach die Variable @farbe ein und können somit wieder unseren Farbwert ausgeben:

@farbe: #123456;
header {
background:@farbe;
}
h1 {
color:@farbe;
}


Wie man den oben zu sehenden Code-Zeilen entnehmen kann, behandelt man eine Variable so, als ob sie zum normalen CSS-Code dazugehören würde. LESS unterscheidet sich also nur minimal von normalem CSS, da es (wie bereits erwähnt) eine dynamische Erweiterung ist. Allerdings muss man wichtige Dinge beachten, wenn man LESS in seinen Workflow mit aufnehmen möchte. Denn im Gegensatz zu normalem CSS könnt ihr nicht ohne Weiteres Variablen in eurer CSS-Datei definieren. Ihr werdet ansonsten eine zerschossene Seite vorfinden, mit der ihr nichts anfangen könnt, womit wir beim nächsten Schritt wären.


Wie binde ich LESS ein?

LESS in HTML bzw. CSS einzubinden, ist an sich keine große Herkules-Aufgabe. Alles, was wir dazu wissen müssen, liefert uns die offizielle deutschsprachige LESS-Seite www.lesscss.de.

Bilder


Die Seite verrät uns, dass wir LESS mithilfe von JavaScript oder PHP einbinden können. Hier stellt sich die Frage, welche Methode sich besser eignet. JavaScript hat den Vorteil, dass kein Apache-Server vonnöten ist und es besser für die Performance ist. Allerdings kann es auch durchaus mal vorkommen, dass einige User JavaScript deaktivieren. Somit wäre alles für die Katz. Hier wäre wiederum PHP zu empfehlen, da diese Scriptsprache serverseitig ist und der User somit auch bei deaktiviertem Javascript in den Genuss von LESS kommen kann. Wer sich für die Javascript-Methode entscheidet, sollte sich die dazugehörige less.js-Datei herunterladen. Hier solltet ihr beachten, dass ihr eure Stylesheet-Datei VOR der less.js-Datei einbindet, da die Javascript-Datei ansonsten euren LESS-Code nicht kompilieren kann.

Eure LESS-Stylesheet-Datei bindet ihr standardmäßig wie folgt ein:

<link rel=“stylesheet/less“ type=“text/css“ href=“styles.less“>


Die rot markierten Attribute sind hier nun besonders von Bedeutung, welche bei LESS wiederum den großen Unterschied machen. Denn im Gegensatz zu CSS muss bei LESS für „rel“ „stylesheet/less“ und für „href“ wiederum „styles.less“ eingetragen werden. Ihr müsst also eure CSS-Datei in eine LESS-Datei umwandeln. Doch keine Panik. Eure CSS öffnet ihr einfach im herkömmlichen Text-Editor, klickt auf Datei>Speichern unter..., speichert die Datei mit dem Datei-Typ Alle Dateien und tragt als Endung „.less“ in euren Datei-Namen ein.

Im Anschluss muss nur noch die JavaScript-Datei NACH der LESS-Datei eingebunden werden:

<script src=“less.js“ type=“text/javascript“></script>


Und schon habt ihr mittels Javascript LESS integriert. Wenn ihr eure LESS-Datei lieber mit PHP einbinden wollt, solltet ihr euch die lessphp-Datei von www.leafo.net/lessphp herunterladen.

Bilder


Extrahiert die Datei (z.B. mit 7z) und packt die Datei „less.inc.php“ in das Verzeichnis eures Servers, wo sich auch eure PHP- und LESS-Dateien befinden. Wichtig ist, dass ihr keine „index.html“, sondern eine „index.php“ habt, da ansonsten die Kompilierung nicht funktionieren wird. In der PHP-Datei müsst ihr nämlich folgende Zeilen in euer Dokument eintippen:
<?php
require "lessc.inc.php";
$less = new lessc;
$less->checkedCompile(„styles.less“, „output.css“);
?>

Hierbei sollen die einzelnen Anweisungen erklärt werden:
require "lessc.inc.php";

Sorgt dafür, dass die lessc.inc-Datei eingebunden wird.
$less = new lessc;

Initialisiert LESS.
$less->checkedCompile(„styles.less“, „output.css“);

Prüft, ob die Datei „styles.less“ vorhanden ist, und kompiliert sie zur Datei „output.css“, welche wiederum eine normale CSS-Datei ist.

Natürlich kann man im letzten Code auch entscheiden, wie man seine LESS-Datei benennen möchte. Sie muss also nicht zwangsweise „styles.less“ heißen. Sie kann auch beispielsweise „css.less“ heißen. Dementsprechend müsst ihr auch im Code „css.less“ als eure LESS-Datei angeben, da diese ansonsten nicht ausfindig gemacht werden kann und nach einer Datei gesucht wird, die im Prinzip gar nicht existiert. Wichtig ist, dass ihr die Datei „output.css“ einbindet, da diese anschließend aus der „styles.less“ generiert wird und den wesentlichen CSS-Code beinhaltet.

 

Ein einfaches Praxisbeispiel mit JavaScript

Natürlich sind die vorherigen Zeilen sehr viel graue Theorie und ohne Praxisbezug schwer verständlich. Daher soll an dieser Stelle ein kleines Beispiel angeführt werden. Wir möchten uns ein kleines Gerüst in HTML5 aufbauen.

Dieses Gerüst soll zeigen, wie einfach es sein kann, eine Seite, die mit HTML5 und CSS3 erstellt worden ist, zu einer Seite umzuwandeln, die LESS unterstützt. Ihr benötigt lediglich einen Editor, der HTML5 und CSS3-Syntax-Highlightning unterstützt. Ich persönlich würde euch Adobe Dreamweaver, Sublime Text oder Blue Griffon ans Herz legen. Diese Editoren haben sich als sehr nützlich bei der Webseitenerstellung erwiesen und erleichtern euch den Workflow um einiges.

Wenn ihr euch für einen Editor entschieden und diesen installiert habt, erstellt ihr ein neues HTML-Dokument. Löscht alle Angaben aus diesem Dokument und ersetzt diese durch die folgenden Angaben:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mein HTML-Dokument</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,600,600italic' rel='stylesheet' type='text/css'>
</head>

<body>
  <header>
  	<div class="container clearfix">
    	<h1 id="logo"><a href="#">Meine Webseite</a></h1>
      <nav id="hauptnavi">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Über uns</a></li>
          <li><a href="#">Leistungen</a></li>
          <li><a href="#">Referenzen</a></li>
          <li><a href="#">Impressum</a></li>
        </ul>
      </nav>
    </div>
  </header>
  
  <div class="container clearfix">
  	<div id="hauptinhalt" role="main">
      <h2>Willkommen auf unserer Webseite</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
    
    <aside id="sidebar">
    	<h2>Meine Sidebar</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </aside>
    
  </div>
  
  <footer>Copyright 2014 meine-webseite.de</footer>
</body>
</html>

Wenn ihr soweit den Inhalt eingefügt habt, könnt ihr diese Datei als „index.html“ speichern. Soweit ist das Ganze noch nichts Besonderes, da es sich bei diesem Dokument um ein reines HTML-Dokument handelt, das noch gar keine Style-Informationen enthält. Das liegt natürlich hauptsächlich daran, dass die Datei „style.css“ noch nicht existiert und die Seite im Browser natürlich relativ unschön aussieht. Um die Datei „style.css“ werden wir uns entsprechend im nächsten Schritt kümmern.


 

Die CSS-Datei aufbereiten

Wir erstellen in unserem Editor eine CSS-Datei, kopieren die folgenden CSS-Angaben und fügen sie in den Editor ein:

* {margin:0; padding:0;}

body {font-family: 'Source Sans Pro', sans-serif; font-size: 0.875em; font-weight:300; color:#333; background:#fff;}

.container {max-width:960px; margin:auto;}

header {width:auto; height:170px; background:#2980b9; clear:both;}
header #logo {font-family: 'Alex Brush', cursive; font-size: 5em; font-weight:300; padding:26px 0 0 0;}
header #logo a {text-decoration:none; color:#fff;}

header #hauptnavi {text-transform:uppercase; margin:0; margin-top:20px;}
header #hauptnavi li {display:inline; padding: 0 15px;}
header #hauptnavi li:first-child {padding-left:0;}
header #hauptnavi li:last-child {padding-right:0;}
header #hauptnavi li a {font-size:1.2em; color:#fff; text-decoration:none;}

#hauptinhalt {float:left; max-width:600px; padding: 20px 0 47px 0;}
#hauptinhalt h2 {font-weight:300; font-size: 3em; color:#2980b9;}
#hauptinhalt p {margin-top:10px; line-height:1.6;}

#sidebar {float:right; max-width:300px; margin-top:20px; margin-bottom:20px; padding: 10px 20px 10px 20px; background:#339de3; height:300px; color:#fff;}
#sidebar h2 {font-weight:300; font-size:2.1em;}
#sidebar p {margin-top:10px; line-height:1.6;}

footer {background:#2980b9; color:#fff; text-align:center; padding:20px 0;}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


 
Somit hätten wir auch der Datei „index.html“ die nötigen Formatierungen gegeben und können uns das Ergebnis im Browser kurz anschauen:

Bilder


Wir stellen fest: Header, Headline und Footer haben dieselbe Farbe und auch der Hintergrund des Content-Bereiches, die Navigation sowie die Schrift an der Sidebar haben eine einheitliche Farbe. Wir haben also den vorhin erwähnten Fall, wo bestimmte Angaben mehrfach vorkommen. Nehmen wir an, wir entscheiden uns für eine andere, einheitliche Farbe, dann wäre es doch ärgerlich, wenn wir das Zeile für Zeile tun müssten. Deshalb kommt an dieser Stelle LESS zum Tragen, weil jetzt unsere Farben in eine Variable auslagern können.


Aus CSS wird nun LESS!

Schauen wir uns doch mal an, welche Farbangaben wir überhaupt haben. Für diesen Fall wurden die mehrfach vorkommenden Farben rot hervorgehoben (siehe vorherigen Schritt). Es handelt sich hierbei um einen Blauton mit dem Hexadezimalwert #2980b9 und natürlich Weiß mit dem Wert #fff. Diese Farbwerte speichern wir jetzt in eine Variable. Dazu öffnen wir unsere CSS-Datei in unserem HTML-Editor und speichern diese als Dateitypen Alle Dateien oder All Documents mit der Endung „.less“. In diesem Beispiel können wir die Datei einfach „style.less“ nennen. Nun haben wir schon unsere LESS-Datei erstellt. Wir öffnen diese - falls nicht schon geschehen - in unserem Editor und definieren in unseren ersten Zeilen die Variablen „@blau“ und „@weiss“, wodurch der übrige CSS-Code natürlich etwas weiter nach unten rutscht.

 
Diese definieren wir (wie am Anfang des Tutorials beschrieben) folgendermaßen:

@blau: #2980b9;
@weiss: #fff;


Wie am Anfang schon erwähnt, werden Variablen mit einem @-Zeichen vor dem Namen gekennzeichnet und enden dann mit einem Semikolon.

Doch mit diesen Variablen soll es nicht getan sein. Wenn wir unsere CSS-Datei nämlich genauer anschauen, sehen wir, dass unsere Seite eine Weite von 960 Pixeln hat. Soweit ist das jetzt nichts Weltbewegendes, aber wenn man bedenkt, dass man auch im Laufe der Zeit seine Weite von 960 Pixeln auf 1140 Pixeln ändern möchte, dann wäre es auch im Falle der Seitenbreite ratsam, eine Variable zu definieren, damit man in der LESSDatei nicht ständig nach der Weitenangabe suchen muss. Wenn jedoch die Weite verändert wird, hat das natürlich auch auf einen Einfluss auf den Content- und Sidebar-Bereich. Bedeutet: Es müssen auch Variablen für diese beiden Bereiche definiert werden. Wir möchten daher die Variablen „@container“ für die Seitenbreite, „@hauptinhalt“ für den Content-Bereich und „@sidebar“ für den Sidebar-Bereich definieren. „@container“ soll hier eine Weite von 960 Pixeln haben, während bei „@hauptinhalt“ 360 Pixel von „@container“ abgezogen wird. „@sidebar“ hat wiederum die halbe Weite von „@hauptinhalt“.

Klingt alles sehr verwirrend, doch im Code sieht es sehr einfach aus:

@container: 960px;
@hauptinhalt: @container - 360px;
@sidebar: @hauptinhalt / 2;


Was fällt auf? Wir können Variablen in andere Variablen integrieren und Berechnungen durchführen. Für Plus verwenden wir das + Zeichen, für Minus das - Zeichen, für Multiplikationen das * Zeichen und für Divisionen das / Zeichen.

Wir wollen natürlich, dass unsere Variablen funktionieren, und ergänzen unsere CSS-Angaben, wie es im unten stehenden Code rot gekennzeichnet ist:

@blau: #2980b9;
@weiss: #fff;
@container: 960px;
@hauptinhalt: @container - 360px;
@sidebar: @hauptinhalt / 2;


* {margin:0; padding:0;}

body {font-family: 'Source Sans Pro', sans-serif; font-size: 0.875em; font-weight:300; color:#333; background: @weiss;}

.container {max-width:@container; margin:auto;}

header {width:auto; height:170px; background: @blau; clear:both;}
header #logo {font-family: 'Alex Brush', cursive; font-size: 5em; font-weight:300; padding:26px 0 0 0;}
header #logo a {text-decoration:none; color: @weiss;}

header #hauptnavi {text-transform:uppercase; margin:0; margin-top:20px;}
header #hauptnavi li {display:inline; padding: 0 15px;}
header #hauptnavi li:first-child {padding-left:0;}
header #hauptnavi li:last-child {padding-right:0;}
header #hauptnavi li a {font-size:1.2em; color: @weiss; text-decoration:none;}

#hauptinhalt {float:left; max-width:@hauptinhalt; padding: 20px 0 47px 0;}
#hauptinhalt h2 {font-weight:300; font-size: 3em; color: @blau;}
#hauptinhalt p {margin-top:10px; line-height:1.6;}

#sidebar {float:right; max-width:@sidebar; margin-top:20px; margin-bottom:20px; padding: 10px 20px 10px 20px; background: lighten(@blau, 12%); height:300px; color:
;}
#sidebar h2 {font-weight:300; font-size:2.1em;}
#sidebar p {margin-top:10px; line-height:1.6;}

footer {background:@blau; color: @weiss; text-align:center; padding:20px 0;}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


Euch wird sicherlich aufgefallen sein, dass ihr beim Abändern des CSS-Codes auch eine „merkwürdige“ Funktion eingefügt habt:
lighten(@blau, 12%);

Die Funktion mit dem Namen „lighten“ ermöglicht es, eine Farbe um einen gewissen Prozentsatz aufzuhellen. Das hat den Vorteil, dass man keine weiteren, helleren Farbtöne derselben Farbe festlegen muss. Das tut nämlich die Funktion „lighten“ für uns. In diesem Fall wurde die Variable bzw. Farbe „@blau“ um 12% aufgehellt.

LESS besitzt eine Vielzahl von Funktionen, die es ermöglichen, Farben aufzuhellen / abzudunkeln, Zahlen auf- und abzurunden, Objekte mit Farb-, Sättigungs- und Helligkeitswerten zu versehen, Funktionen miteinander zu vermischen und noch vieles mehr. Auch die Photoshop-typischen Effekte wie Weiches Licht lassen sich in LESS problemlos umsetzen und verwenden. Alle Funktionen hier aufzuzählen, würde natürlich den Rahmen sprengen, deswegen solltet ihr euch unbedingt die LESS-Dokumentation anschauen, um euch ein umfassendes Bild von dieser mächtigen und umfangreichen Sprache zu machen.

Kommen nun wieder zurück zu unserem Praxisbeispiel. Wir haben in diesem Schritt unsere LESS-Datei komplettiert. Wir wollen natürlich auch, dass sie funktioniert. Deswegen laden wir uns die less.js-Datei aus der offiziellen LESS-Seite herunter und verschieben sie in das entsprechende Verzeichnis. Nun müssen wir entsprechende Änderungen an unserer „index.html“-Datei vornehmen, damit LESS endlich zum Tragen kommt. Dazu öffnen wir unsere HTML-Datei und gehen zur Zeile, wo wir unsere ursprüngliche „style.css“-Datei eingebunden haben. Diese löschen wir nun und fügen stattdessen folgenden Code ein:
<link rel=“stylesheet“ href=“style.less“ type=“text/less“>
<script src=“less-1.3.3.min.js“ type=“text/javascript“></script>

Wichtig ist natürlich, dass die LESS-Datei VOR der Javascript-Datei geladen wird, da ansonsten die Javascript-Datei keinen CSS-Code aus der LESS-Datei kompilieren kann. Folge: Die Seite ist total zerschossen und wird nicht richtig dargestellt. Solltet ihr alles, wie es hier beschrieben worden ist, gemacht haben, müsste euer Ergebnis wie in der Abbildung oben, wo ihr die CSS-Datei erstellt habt, aussehen.

Ihr könnt nun an dieser Stelle natürlich ein paar Experimente machen, indem ihr der Variablen „@blau“ einen anderen Farbwert zuordnet. Schon hättet ihr das gesamte Erscheinungsbild der Webseite verändert, ohne dabei Zeile für Zeile nach den entsprechenden Farbangaben suchen zu müssen.


 

LESS wie HTML verschachteln

Natürlich muss man LESS nicht unbedingt zwecks der Verwendung von Variablen verwenden. Es kann natürlich auch vorkommen, dass die normale Schreibweise von CSS ein wenig mühselig ist und man das Ganze doch lieber wie in HTML handhaben möchte. Sprich: Eine untergeordnete Anweisung wird von einer übergeordneten Anweisung umschlossen und so gesehen in einer Baumstruktur dargestellt. Um das Ganze etwas verständlicher zu machen, soll an dieser Stelle der Header unserer erstellten Seite als Beispiel fungieren:
<header>
<div class=“container clearfix“>
<h1 id=“logo“><a href=“#“>Meine Webseite</a></h1>
</div>
</header>

Schauen wir uns das Ganze nun im Detail an: Der Header ist in diesem Fall das übergeordnete Element. Er umschließt ein DIV-Element mit der Klasse „container“ und „clearfix“. Dieser wiederum umschließt ein H1- Element, welches als Logo der Seite fungieren soll. Innerhalb des H1-Elements befindet sich wiederum ein A-Element. Genau diese Schreibweise ist nun auch in CSS mithilfe von LESS möglich. Damit könnten die umständlichen Schreibweisen wie „header #logo a“ der Vergangenheit angehören. Bleiben wir bei unserem Beispiel. Wir möchten das Ganze nun auch in LESS genauso handhaben.

So können wir die folgende Schreibweise verwenden:

header {
width:auto;
height:170px;
background:#2980b9;
clear:both;
#logo {
  font-family: ‚Alex Brush‘, cursive;
  font-size: 5em;
  font-weight:300;
  padding:26px 0 0 0;

  a {
   text-decoration:none;
   color:#fff;
  }

}
}


 
Nun passiert etwas, das es bisher in CSS noch nie in dieser Form gab: Innerhalb des Headers wird die ID namens „logo“ formatiert, während der A-Tag innerhalb der ID „logo“ formatiert wird. In CSS werden diese Elemente normalerweise getrennt voneinander und vor allem untereinander statt ineinander definiert. Doch dank LESS ist diese Schreibweise nun möglich und regelkonform. Auf diese Weise hat man eine bessere Übersicht über seinen CSS-Code und kann so entsprechende Änderungen vornehmen, ohne dabei den Überblick zu verlieren.


Fazit und abschließende Worte

Als dynamische Skriptsprache ist LESS ein mächtiges Werkzeug, das schnelle Änderungen und verschiedene Operationen ermöglicht. Dank der vielen Funktionen können Farbwerte verändert oder miteinander kombiniert werden. Das macht den Workflow einfacher, interessanter und spannender. Allerdings lohnt sich die Verwendung der Variablen nur bei Flat-Design-Projekten oder auch bei Webseiten, bei denen es keinen direkten Relaunch gibt und das Äußere geringfügig verändert werden sollte. Wer allerdings mit der gängigen CSS-Schreibe nicht so gut klarkommt, dem sei LESS ans Herz gelegt, da Formatierungen nun wie in HTML in der Baumstruktur geschrieben werden können.

DVD-Werbung

Passend zum Inhalt empfehlen wir: Das ultimative Training für JavaScript und jQuery

Deine App, dein Spiel, deine Website! Lege den Grundstein zur programmiertechnischen Umsetzung deiner Ideen, gehe sogleich darüber hinaus und wende direkt und praktisch an, was du gelernt hast. Dieses Training mit 52 Lektionen lässt dich in kurzer Zeit professionell und versiert Programmzeilen schreiben. Über 10,5 Stunden Video-Tutorials, in denen du alles Wissenswerte zu Variablen, Schleifen, Funktionen oder Operatoren in JavaScript erfährst. Dazu: jQuery – die Bibliothek, die auf über 75 Prozent der weltweit erfolgreichsten Webseiten zum Einsatz kommt und dich noch coolere Internetauftritte programmieren lässt. Einmal miteinander kombiniert, ist das, was du aus JavaScript und jQuery formen kannst, mit einem Wort: mächtig! Leicht zu erlernen für Einsteiger, vertiefend für Kenner und mit den Do-it-yourself-Praxisbeispielen relevant für alle, die von noch leeren Seiten Zeile für Zeile direkt zum fertigen Programm aufsteigen möchten.

  • 52 Lektionen in über 10,5 Stunden Video-Training zu JavaScript und jQuery
  • Erlerne die Grundlagen, gehe darüber hinaus und schreibe sodann eigene Programme
  • Inklusive Praxis-Herausforderungen: Programmiere ein Quiz, ein Spiel, eine FAQ-Seite und App
  • Von Programmier-Künstler und Profi-Trainer Denis Panjuta

Setze um, was dir vorschwebt! Mit Mitteln, die sich mehr als eignen, und mit fachlich glänzender Kompetenz!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare
Portrait von Cherifa
  • 26.05.2014- 06:57

Vielen Dank für dieses TUT - viele liebe Grüße

C.

Portrait von Steve007
  • 18.05.2014- 13:51

Vielen Dank für Dein interessantes Tutorial.

Portrait von MicroSmurf
  • 16.05.2014- 21:34

Vielen Dank. Nützliches Tutorial.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 16.05.2014- 17:03

Kommt gerade richtig!
Vielen Dank!

Portrait von BOPsWelt
  • 16.05.2014- 16:56

Less ist für mich komplett was neues, klasse Einstieg.
Vielen Dank für das Tutorial!

Portrait von MainAngler
  • 16.05.2014- 16:27

Less, Sass, Coffee... alles schon mal gehört.
Wer's braucht!

Portrait von Heinz9
  • 16.05.2014- 15:59

Danke, sehr interessant

Portrait von Dineria
  • 16.05.2014- 15:10

Danke, etwas hatte ich schon im Commag darüber gelesen! :-)

Portrait von Domingo
  • 16.05.2014- 13:18

Less hat mich auch begeistert.

Portrait von eule88
  • 16.05.2014- 12:59

Vielen Dank! Das war mir völlig neu, hört sich aber spannend an und ist sicher nähere "Begutachtung" wert!

Portrait von lalelu44
  • 16.05.2014- 12:56

Danke für das interessante Tutorial!

Portrait von MaoMao
  • 16.05.2014- 12:34

Ich kannte Less bis Heute überhaupt nicht. Jetzt werde ich es mir mal genauer anschauen. Vielen dank für das Tutorial.

Portrait von lachender_engel
  • 16.05.2014- 12:28

Gut erklärt, sinnvolle und verständliche Beispiel. Hat mir so gut gefallen, dass ich mir heute noch less genauer anschaue! Klasse! Danke!

Portrait von Caesarion2004
  • 16.05.2014- 12:26

Vielen Dank für das gute Text-Tutorial und die Datei. Gerne mehr mehr zum Webdesign.


Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
x
×
×