Florenz Heldermann / Interface Engineer
@track02...wirklich nicht!
CSS ist dass, was zwischen den Klammern steht — Harry Roberts
Im Wesentlichen: CSS wie es sein sollte!
sudo gem install sass
style.scss
erstellen ODER vorhandende style.css
in style.scss
umbenennensass --watch style.scss:style.css
// SASS
.klassenname
display: block
float: left
// SCSS
.klassenname{
display: block;
float: left;
}
sudo gem install sass
sass --watch style.scss:style.css
ul{
padding: 0;
li{
color: blue;
a.link{
text-decoration: none;
color: black;
}
}
a{
color: #C0FFEE;
}
}
ul{
padding: 0; }
ul li {
color: blue; }
ul li a.link{
text-decoration: none;
color: black; }
ul a {
color: #C0FFEE; }
SCSS:
a.mein-link {
&:hover{ text-decoration: underline; }
&:before, &:after{
content: "—";
}
&.active{
color: #f00;
&:hover{
color: black;
}
}
}
CSS:
a.mein-link:hover{ text-decoration: underline; }
a.mein-link:before, a:hover{ content: ""; }
a.mein-link.active{ color: #f00; }
a.mein-link.active:hover{ color: black; }
.module div.inner ul li ul li > a:hover span{ color: red; }
.module div.inner ul li ul li > a:active span{ color: green; }
// etc...
$font-main: "Fira Sans", Helvetica, "Comic Sans MS";
$font-head: "Droid Serif", Prestige, sans-serif;
$font-mono: Courier, mono;
$font-size-body: 67,5%;
$font-size-large: 32px;
$font-size-main: 1em;
$prim1: #C0FFEE;
$prim2: #F00BAA;
$prim3: #B00B1E;
body{
font: $font-size-body $font-main;
background-color: $prim3;
}
h1,h2,h3{
font-family: $font-size-large $font-head;
color: $prim1; }
Aufgabe: Bisherige Aufgabe um Variablen erweitern.
@mixin mein-mixin{
.... zeugs ....
};
@include mein-mixin;
mixins.scss
@mixin inline-block{
display: inline;
*zoom: 1;
display: inline-block;
}
.mein-element{
width: 300px;
@include inline-block;
}
.mein-anderes-element{
width: 200px;
@include inline-block;
}
style.css
.mein-element{
width: 300px;
display: inline;
*zoom: 1;
display: inline-block;
}
.mein-anderes-element{
width: 200px;
display: inline;
*zoom: 1;
display: inline-block;
}
mixins.scss
@mixin border-radius($wert: 5px;){
-webkit-border-radius: $wert;
-moz-border-radius: $wert;
-ms-border-radius: $wert;
-o-border-radius: $wert;
border-radius: $wert;
}
.element-1{ @include border-radius; }
.element-2{ @include border-radius(10px); }
style.scss
.element-1{
-webkit-border-radius: 5px;;
-moz-border-radius: 5px;;
-ms-border-radius: 5px;;
-o-border-radius: 5px;;
border-radius: 5px;; }
.element-2{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px; }
Mixin: Mixin zum Projekt hinzufügen. Und einbauen
// Farbvariable
$myColor: red;
// Aufhellen
$bright: lighten($myColor, 20%);
// Abdunkeln
$dark: darken($myColor, 20%);
// Graustufen
$grey: greyscale($color)
// Sättigen & Entsättigen
$effingYeah: saturate($color, 100%);
$effingBoring: desaturate($color);
// Funktionen können auch kombiniert werden
$wtf: transparentize(darken($color, 20%), 0.5);
// Kann auch direkt verwendet werden
background-color: complement($textfarbe);
Dokumentation | Live Demo | Visual Guide
Aufgabe: Variablen einbauen.
+, -, *, /, %
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complimentary"] {
float: right;
width: 31.25%;
}
.message { // Die Basisklasse
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success { // Bei Erfolg, ...
@extend .message;
border-color: green;
}
.error { // ...bei Misserfolg.
@extend .message;
border-color: red;
}
.warning { // ...Immerhin wurden wir gewarnt
@extend .message;
border-color: yellow;
}
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
Aufabe: Könnt ihr Vererbung auf euer Projekt anwenden?
$variablen
gespeichert werden@mixin
's einfügen@mixin
kann auch mit Parametern aufgerufen werdenEine CSS Datei wächst - dieses verhindert Übersicht. Hier kann auch SCSS nicht wirklich helfen
Jedenfalls nicht wenn man in einer Datei arbeitet
Sass bietet eine @import
Möglichkeit. Mit dieser können Unterdateien in eine Hauptdatei importiert werden. Diese dient dann "Inhaltsverzeichnis"
Diese Unterdateien werden mit einen Unterstrich gekennzeichnet. Beispiel: _caroussel.scss
Der Aufruf in der Hauptdatei z.B. style.scss
erfolgt dann mit
@import "caroussel";
Beachten: Kein Unterstrich und Dateiendung mehr vorhanden
// Basis CSS - im Unterordner "base"
@import "base/reset";
@import "base/variablen";
@import "base/mixins";
@import "base/webfonts";
@import "base/typography";
// Module CSS - im Unterordner "module"
@import "module/grid";
@import "module/header";
@import "module/footer";
@import "module/navigation";
@import "module/caroussel";
// usw.
Sass beobachtet jede Änderung in einem Unterordner und kompiliert automatische eine neue style.css
@extend
erweitert werden
%message { // Die Basisklasse
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success { // Bei Erfolg, ...
@extend %message;
border-color: green;
}
.error { // ...bei Misserfolg.
@extend %message;
border-color: red;
}
.warning { // ...Immerhin wurden wir gewarnt
@extend %message;
border-color: yellow;
}
.success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
.message
existiert nicht mehr.error
erfolgen
.modul{
width: 100%;
padding: 1em;
@media screen and (min-width: 480px){
width: 50%;
padding: 0;
float: left;
}
@media screen and (min-width: 480px){
width: 30%;
padding: 2em;
}
}
.modul {
width: 100%;
padding: 1em;
}
@media screen and (min-width: 480px) {
.modul {
width: 50%;
padding: 0;
float: left;
}
}
@media screen and (min-width: 480px) {
.modul {
width: 30%;
padding: 2em;
}
}
$ie7-support
@mixin inline-block{
@if $ie7-support{
display: inline;
*zoom: 1;
display: inline-block;
} @else {
display: inline-block;
}
}
@mein-block{
@include inline-block();
}
// true, wir supporten IE7
.mein-block{
display: inline;
*zoom: 1;
display: inline-block;
}
// false, kein Support
.mein-block{
display: inline-block;
}
Weitere Sass Anweisungen
.person{}
.person__hand{}
.person--female{}
.person--female__hand{}
.person__hand--left{}
Ein Konzept um Modulares SASS zu schreiben. Hier gehts zum Artikel.