SlideShare ist ein Scribd-Unternehmen logo
Sass & Compass
                                  CSS für Fortgeschrittene




                                           14.03.2013


TYPO3 Usergroup Bodensee #t3see
Wer ist der Typ?
 •   Wolfgang Wagner

 •   Web Developer bei jweiland.net

 •   lebt in Friedrichshafen

 •   Gründungsmitglied der #t3see

 •   Bloggt auf http://wowa-webdesign.de über TYPO3,
     Webdesign und alles mögliche

 •   Twitter: @wowawebdesign

TYPO3 Usergroup Bodensee #t3see
Sass



TYPO3 Usergroup Bodensee #t3see
Sass

 •   Sass ist ein Precompiler für CSS

 •   Sass steht für „syntactically awesome style sheets“

 •   bietet eine einfachere und elegantere Syntax für CSS




TYPO3 Usergroup Bodensee #t3see
Sass installieren
 •   Benötigt Ruby

     •   Ruby ist bei Mac OS schon dabei

     •   unter Linux via Paket-Manager installieren

     •   für Windows: http://rubyinstaller.org

 •   dann im Terminal:

     gem	
  install	
  sass




TYPO3 Usergroup Bodensee #t3see
Sass Syntax
   #main

   	
  	
  color:	
  blue

   	
  	
  font-­‐size:	
  0.3em

   	
  	
  a

   	
  	
  	
  	
  font:

   	
  	
  	
  	
  	
  	
  weight:	
  bold

   	
  	
  	
  	
  	
  	
  family:	
  serif

   	
  	
  	
  	
  &:hover

   	
  	
  	
  	
  	
  	
  background-­‐color:	
  #eee




TYPO3 Usergroup Bodensee #t3see
SCSS Syntax
   #main	
  {

   	
  	
  color:	
  blue;
                                                                 Jede .css Datei kann zu
   	
  	
  font-­‐size:	
  0.3em;                                einer .scss Datei gemacht
   	
  	
  a	
  {                                                werden
   	
  	
  	
  	
  font:	
  {

   	
  	
  	
  	
  	
  	
  weight:	
  bold;

   	
  	
  	
  	
  	
  	
  family:	
  serif;

   	
  	
  	
  	
  }

   	
  	
  	
  	
  &:hover	
  {

   	
  	
  	
  	
  	
  	
  background-­‐color:	
  #eee;

   	
  	
  	
  	
  }

   	
  	
  }

   }




TYPO3 Usergroup Bodensee #t3see
Vorgehensweise
 •   Änderungen werden nur noch in .scss-Dateien vorgenommen

 •   Sass kompiliert aus den .scss-Dateien .css-Dateien

 •   Kompilierung manuell oder automatisch per
     sass	
  -­‐-­‐watch	
  style.scss:style.css



 •   Überwachung eines Ordners mit mehreren Dateien per
     sass	
  -­‐-­‐watch	
  stylesheets/scss:stylesheets/css


TYPO3 Usergroup Bodensee #t3see
Features
   Nesting
   /*	
  style.scss	
  */                                        /*	
  style.css	
  */


   #navbar	
  {                                                  #navbar	
  {
   	
  	
  width:	
  80%;                                        	
  	
  width:	
  80%;
   	
  	
  height:	
  23px;                                      	
  	
  height:	
  23px;	
  
                                                                 }
   	
  	
  ul	
  {	
  list-­‐style-­‐type:	
  none;	
  }
                                                                 #navbar	
  ul	
  {	
  list-­‐style-­‐type:	
  none;	
  }
   	
  	
  li	
  {
   	
  	
  	
  	
  float:	
  left;                               #navbar	
  li	
  {	
  float:	
  left;	
  }
   	
  	
  	
  	
  a	
  {	
  font-­‐weight:	
  bold;	
  }
   	
  	
  }
   }                                                             #navbar	
  li	
  a	
  {	
  font-­‐weight:	
  bold;	
  }




TYPO3 Usergroup Bodensee #t3see
Features
   Nesting mit Media Queries
   /*	
  style.scss	
  */                                                    /*	
  style.css	
  */


   #h1	
  {                                                                  #h1	
  {	
  font-­‐size:200%;}
   	
  	
  font-­‐size:200%;
   	
  	
  a	
  {
   	
  	
  	
  	
  color:	
  #000;                                           #h1	
  a	
  {	
  color:	
  #000};

   	
  	
  	
  	
  @media	
  only	
  screen	
  and	
  (max-­‐width:320px){   @media	
  only	
  screen	
  and	
  (max-­‐width:320px){
   	
  	
  	
  	
  	
  	
  color:	
  #00f;                                   	
  	
  #h1	
  a	
  {	
  color:	
  #00f;	
  }
   	
  	
  	
  	
  }                                                         }
   	
  	
  }
   }




TYPO3 Usergroup Bodensee #t3see
Features
   Schlechtes Nesting                                                                             Resultiert in
   div#main	
  {                                                                                  div#main	
  #sidebar	
  #navbar	
  {...}
   	
  	
  #sidebar	
  {                                                                          div#main	
  #sidebar	
  #navbar	
  aside	
  div	
  ul	
  {...}
   	
  	
  	
  	
  #navbar	
  {                                                                   div#main	
  #sidebar	
  #navbar	
  aside	
  div	
  ul	
  li	
  {...}
   	
  	
  	
  	
  	
  	
  width:	
  80%;                                                         div#main	
  #sidebar	
  #navbar	
  aside	
  div	
  ul	
  li	
  a	
  {...}
   	
  	
  	
  	
  	
  	
  height:	
  23px;
   	
  	
  	
  	
  	
  	
  aside	
  {
   	
  	
  	
  	
  	
  	
  	
  	
  div	
  {
   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  ul	
  {
   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  list-­‐style-­‐type:	
  none;
   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  li	
  {                                        • Viel zu spezifische Selektoren
   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  float:	
  left;                        • schlechte Performance
   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  a	
  {
   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  font-­‐weight:	
  bold;
   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }
   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }
   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }
   	
  	
  	
  	
  	
  	
  	
  	
  }
   	
  	
  	
  	
  	
  	
  }
   	
  	
  	
  	
  }
   	
  	
  }
   }



TYPO3 Usergroup Bodensee #t3see
Features
   Nesting mit Pseudoklassen
   /*	
  style.scss	
  */                                /*	
  style.css	
  */


   a	
  {                                                a	
  {	
  color:	
  #333;	
  }
   	
  	
  color:	
  #333;                               a:hover	
  {	
  color:	
  #00f;	
  }
   	
  	
  &:hover	
  {	
  color:	
  #00f;	
  }          a:visited	
  {	
  color:	
  #999;	
  }
   	
  	
  &:visited	
  {	
  color:	
  #999;	
  }
   }




TYPO3 Usergroup Bodensee #t3see
Features
Variablen


 •   Variablen können im gesamten Stylesheet genutzt werden

 •   Variablennamen beginnen mit einem $ und werden wie normale
     Eigenschaften deklariert

 •   Variabeln können Farben, Zahlen (mit Einheiten) oder Text enthalten



TYPO3 Usergroup Bodensee #t3see
Features
Variablen
/*	
  style.scss	
  */                                       /*	
  style.css	
  */

$maxwidth:	
  80em;                                          body	
  {
$fontcolor:	
  #666;                                         	
  	
  color:	
  #666666;
$fontfamily:	
  Arial,helvetica,sans-­‐serif;                	
  	
  font-­‐family:	
  Arial,	
  helvetica,	
  sans-­‐serif;
$headerfontcolor:	
  #009;                                   }
$headerfontfamily:	
  Tahoma,Arial,helvetica,sans-­‐serif;
                                                             h1,	
  h2,	
  h3,	
  h4,	
  h5,	
  h6	
  {
body	
  {                                                    	
  	
  color:	
  #000099;
	
  	
  color:	
  $fontcolor;                                	
  	
  font-­‐family:	
  Tahoma,	
  Arial,	
  helvetica,	
  sans-­‐serif;
	
  	
  font-­‐family:	
  $fontfamily;                       }
}

h1,h2,h3,h4,h5,h6	
  {
	
  	
  color:	
  $headerfontcolor;
	
  	
  font-­‐family:	
  $headerfontfamily;
}



TYPO3 Usergroup Bodensee #t3see
Features
Operatoren +, -, /, *
/*	
  style.scss	
  */                                           /*	
  style.css	
  */

$navbar-­‐width:	
  800px;                                       #navbar	
  {
$items:	
  5;                                                    	
  	
  width:	
  800px;
                                                                 }
#navbar	
  {
	
  	
  width:	
  $navbar-­‐width;                               #navbar	
  li	
  {
	
  	
                                                           	
  	
  float:	
  left;
	
  	
  li	
  {                                                  	
  	
  width:	
  150px;
          float:	
  left;                                        }
          width:	
  $navbar-­‐width/$items	
  -­‐	
  10px;
	
  	
  }
}




TYPO3 Usergroup Bodensee #t3see
Features
Farb-Manipulationen
/*	
  style.scss	
  */
                                                                       lighten(color,amount)
$navbar-­‐width:	
  800px;                                                Hellt eine Farbe um einen Prozentwert auf (amount)
$items:	
  5;
$navbar-­‐color:	
  #ce4dd6;
                                                                       darken(color,amount)
#navbar	
  {                                                             Dunkelt eine Farbe ab
	
  	
  width:	
  $navbar-­‐width;
	
  	
  background:	
  $navbar-­‐color;
                                                                       Es gibt noch weitere Funktionen (hue, saturate,
	
  	
  li	
  {                                                        desaturate, grayscale, complement, invert ...)
	
  	
  	
  	
  float:	
  left;
	
  	
  	
  	
  width:	
  $navbar-­‐width/$items	
  -­‐	
  10px;
	
  	
  	
  	
  &:hover:	
  lighten($navbar-­‐color,20%);
	
  	
  }
}




TYPO3 Usergroup Bodensee #t3see
Features
@if
/*	
  style.scss	
  */

$theme:	
  dark;

body	
  {
  @if	
  $theme	
  ==	
  light	
  {
      background:	
  #c7c7c7;
      color:	
  #000;
  }	
  @else	
  if	
  $theme	
  ==	
  dark	
  {
      background:	
  #222;
      color:	
  #ddd;
  }
}




TYPO3 Usergroup Bodensee #t3see
Features
  @for
/*	
  style.scss	
  */                                                         /*	
  style.css	
  */

@for	
  $i	
  from	
  1	
  through	
  6	
  {                                   h1	
  {	
  font-­‐size:	
  2.25em;	
  }
	
  	
  	
  	
  h#{$i}	
  {	
  font-­‐size:	
  2.5em-­‐(0.25em*$i);	
  }	
  
}                                                                              h2	
  {	
  font-­‐size:	
  2em;	
  }

                                                                               h3	
  {	
  font-­‐size:	
  1.75em;	
  }

                                                                               h4	
  {	
  font-­‐size:	
  1.5em;	
  }

                                                                               h5	
  {	
  font-­‐size:	
  1.25em;	
  }

                                                                               h6	
  {	
  font-­‐size:	
  1em;	
  }




  TYPO3 Usergroup Bodensee #t3see
Features
  @for
/*	
  style.scss	
  */                                                        /*	
  style.scss	
  */
$theme:dark;                                                                  h1	
  {	
  font-­‐size:	
  2.25em;	
  color:	
  #000;	
  }

@for	
  $i	
  from	
  1	
  through	
  6	
  {                                  h2	
  {	
  font-­‐size:	
  2em;	
  color:	
  #000;	
  }
	
  	
  	
  	
  h#{$i}	
  {	
  font-­‐size:	
  2.5em-­‐(0.25em*$i);	
  
	
  	
  	
  	
  @if	
  $theme	
  ==	
  dark	
  {                              h3	
  {	
  font-­‐size:	
  1.75em;	
  color:	
  #000;	
  }
	
  	
  	
  	
  	
  	
  	
  	
  color:#000;
	
  	
  	
  	
  }                                                             h4	
  {	
  font-­‐size:	
  1.5em;	
  color:	
  #000;	
  }
	
  	
  }	
  	
  	
  	
  	
  	
  	
  
}                                                                             h5	
  {	
  font-­‐size:	
  1.25em;	
  color:	
  #000;	
  }

                                                                              h6	
  {	
  font-­‐size:	
  1em;	
  color:	
  #000;	
  }




  TYPO3 Usergroup Bodensee #t3see
Features
@each
/*	
  style.scss	
  */                                                             /*	
  style.css	
  */

@each	
  $section	
  in	
  home,	
  about,	
  archive,	
  projects	
  {            .home	
  nav	
  {	
  background-­‐image:	
  url(/images/nav/home.png);	
  }
	
  	
  nav	
  {
	
  	
  	
  	
  .#{$section}	
  &	
  {                                             .about	
  nav	
  {	
  background-­‐image:	
  url(/images/nav/about.png);	
  }
	
  	
  	
  	
  	
  	
  background-­‐image:	
  url(/images/nav/#{$section}.png);
	
  	
  	
  	
  }                                                                  .archive	
  nav	
  {	
  background-­‐image:	
  url(/images/nav/archive.png);	
  }
	
  	
  }
}                                                                                  .projects	
  nav	
  {	
  background-­‐image:	
  url(/images/nav/projects.png);	
  }




TYPO3 Usergroup Bodensee #t3see
Features
Mixins
• Mixins sind „wiederverwertbare“ Codeblöcke
• können einmal definiert global verwendet werden
/*	
  style.scss	
  */                                          /*	
  style.css	
  */

@mixin	
  box-­‐shadow($shadow){                                #box	
  {
  -­‐webkit-­‐box-­‐shadow:	
  $shadow;                         	
  	
  width:	
  50%;
  -­‐moz-­‐box-­‐shadow:	
  $shadow;                            	
  	
  padding:	
  1em;
  box-­‐shadow:	
  $shadow;                                     	
  	
  -­‐webkit-­‐box-­‐shadow:	
  0	
  0	
  10px	
  rgba(0,	
  0,	
  0,	
  0.4);
}                                                               	
  	
  -­‐moz-­‐box-­‐shadow:	
  0	
  0	
  10px	
  rgba(0,	
  0,	
  0,	
  0.4);
                                                                	
  	
  box-­‐shadow:	
  0	
  0	
  10px	
  rgba(0,	
  0,	
  0,	
  0.4);
#box	
  {                                                       }
  width:	
  50%;
  padding:	
  1em;
  @include	
  box-­‐shadow(0	
  0	
  10px	
  rgba(0,0,0,.4));
}




TYPO3 Usergroup Bodensee #t3see
Features
Mixin für Retina Images
/*	
  style.scss	
  */                                                                     /*	
  style.css	
  */

/*	
  Mixin	
  */                                                                          div.logo	
  {
@mixin	
  image-­‐2x($image,	
  $width,	
  $height)	
  {                                   	
  	
  background:	
  url("logo.png")	
  no-­‐repeat;
	
  	
  @media	
  (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:	
  1.3),                         }
	
  	
  	
  	
  	
  	
  	
  	
  	
  (-­‐o-­‐min-­‐device-­‐pixel-­‐ratio:	
  2.6/2),       @media	
  (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:	
  1.3),	
  (-­‐o-­‐min-­‐device-­‐pixel-­‐ratio:	
  2.6	
  /	
  2),	
  (-­‐webkit-­‐
	
  	
  	
  	
  	
  	
  	
  	
  	
  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:	
  1.3),    min-­‐device-­‐pixel-­‐ratio:	
  1.3),	
  (min-­‐device-­‐pixel-­‐ratio:	
  1.3),	
  (min-­‐resolution:	
  1.3dppx)	
  {
	
  	
  	
  	
  	
  	
  	
  	
  	
  (min-­‐device-­‐pixel-­‐ratio:	
  1.3),                	
  	
  div.logo	
  {
	
  	
  	
  	
  	
  	
  	
  	
  	
  (min-­‐resolution:	
  1.3dppx)	
  {                    	
  	
  	
  	
  /*	
  on	
  retina,	
  use	
  image	
  that's	
  scaled	
  by	
  2	
  */
	
  	
  	
  	
  /*	
  on	
  retina,	
  use	
  image	
  that's	
  scaled	
  by	
  2	
  */   	
  	
  	
  	
  background-­‐image:	
  url("logo2x.png");
	
  	
  	
  	
  background-­‐image:	
  url($image);                                        	
  	
  	
  	
  background-­‐size:	
  100px	
  25px;
	
  	
  	
  	
  background-­‐size:	
  $width	
  $height;                                   	
  	
  }
	
  	
  }                                                                                  }
}

/*	
  Anwendung	
  */
div.logo	
  {
	
  	
  background:	
  url("logo.png")	
  no-­‐repeat;
	
  	
  @include	
  image-­‐2x("logo2x.png",	
  100px,	
  25px);
}

Quelle: Easy retina-ready images using SCSS




TYPO3 Usergroup Bodensee #t3see
Features
@extend
• per @extend werden Eigenschaften einer Regel in eine andere übernommen
/*	
  style.scss	
  */                      /*	
  style.scss	
  */

$buttontextcolor:#000;                      .button,	
  .button-­‐confirm	
  {
$buttonbgrcolor:#ccc;                       	
  	
  color:	
  black;
$green:	
  #090;                            	
  	
  background:	
  #cccccc;
                                            	
  	
  width:	
  8em;
.button	
  {                                	
  	
  text-­‐align:	
  center;
  color:	
  $buttontextcolor;               	
  	
  padding:	
  .5em	
  1em;
  background:	
  $buttonbgrcolor;           	
  	
  font-­‐weight:	
  bold;
  width:	
  8em;                            }
  text-­‐align:center;
  padding:	
  .5em	
  1em;                  .button-­‐confirm	
  {
  font-­‐weight:	
  bold;                   	
  	
  background:	
  #009900;
}                                           	
  	
  width:	
  10em;
                                            }
.button-­‐confirm	
  {
  @extend	
  .button;
  background:	
  $green;
  width:	
  10em;
}



TYPO3 Usergroup Bodensee #t3see
Features
Modularisierung
• .scss Dateien in viele kleine Dateien aufteilen
• Underscore im Dateinamen „verhindert“ Kompilierung
    z.B. _mixins.scss, _variablen.scss
•   Einbindung in Hauptdatei per @import

/*	
  style.scss	
  */

@import	
  „global/variablen“;
@import	
  „global/mixins“;                 Beim Kompilieren werden alle Module
@import	
  „content/links“;                 in die style.css geschrieben
@import	
  „content/typography“;
@import	
  „layout/grid“;
@import	
  „navigation/mainnav“;
.
.
.


TYPO3 Usergroup Bodensee #t3see
Features
Kommentare
/*	
  style.scss	
  */                                                   /*	
  style.css	
  */

/*	
  Das	
  ist	
  ein	
  normaler                                      /*	
  Das	
  ist	
  ein	
  normaler
  mehrzeilger	
  Kommentar	
  */                                           mehrzeilger	
  Kommentar	
  */
.page	
  {                                                               .page	
  {
  width:	
  $max-­‐width;                                                  width:	
  80em;
}                                                                        }

//	
  Das	
  ist	
  ein	
  einzeiliger	
  Kommentar	
  der               header	
  {
//	
  in	
  der	
  CSS-­‐Datei	
  nicht	
  zu	
  sehen	
  sein	
  wird     background:	
  #334455;
header	
  {                                                              }
  background:	
  $headerbgrcolor;
}




TYPO3 Usergroup Bodensee #t3see
Compass



TYPO3 Usergroup Bodensee #t3see
Compass


 •   Compass ist Framework um Sass zu erweitern

 •   bringt viele CSS3 - Mixins und Helper Functions mit

 •   erleichtert die Verwendung von CSS-Sprites




TYPO3 Usergroup Bodensee #t3see
Compass installieren


                                  gem	
  install	
  compass




TYPO3 Usergroup Bodensee #t3see
Neues Compass Projekt
 •   Compass kann ein leeres Projekt mit grundlegender CSS-Ausstattung anlegen

     compass	
  create	
  <myproject>

     Erzeugt:

     config.rb
     sass/ie.scss
     sass/print.scss
     sass/screen.scss
     stylesheets/ie.css
     stylesheets/screen.css

 •   Manuell SCSS kompilieren: compass	
  compile	
  <myproject>

 •   Projekt überwachen: compass	
  watch	
  <myproject>

TYPO3 Usergroup Bodensee #t3see
Neues Compass Projekt


 •   Man kann auch eine bestehende Projektstruktur mit Compass
     verbinden
     cd	
  <myproject>
     compass	
  create	
  -­‐-­‐bare	
  -­‐-­‐sass-­‐dir	
  „sass“	
  -­‐-­‐css-­‐dir	
  „css“	
  -­‐-­‐images-­‐dir	
  „images“	
  -­‐-­‐javascript-­‐dir	
  „js“	
  




TYPO3 Usergroup Bodensee #t3see
Compass Konfiguration
 •   Die Datei config.rb enthält die Konfiguration des Projekts

     #	
  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	
  =	
  :expanded	
  or	
  :nested	
  or	
  :compact	
  or	
  :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

 •   Bei Änderungen in der config.rb muss neu kompiliert werden mit
     compass	
  compile	
  -­‐-­‐force

 •   Ausgabe für Production Environment
     compass	
  compile	
  -­‐-­‐output-­‐style	
  compressed	
  -­‐-­‐force




TYPO3 Usergroup Bodensee #t3see
Compass bietet verschiedene Module

 •   CSS3 - liefert Cross Browser kompatible CSS3 Mixins

 •   Typography - Mixins für allgemeine Typographie-Muster (Links, Listen
     etc.)

 •   Utilities - Mixins für Styling Muster (Listen, Texte, Farben, Sprites,
     Tabellen etc.)

 •   alle 3 Module untergliedern sich in weitere Submodule

TYPO3 Usergroup Bodensee #t3see
Compass in Sass-Dateien
                   verwenden
 • @import	
  „compass“
 • @import	
  „compass/css3“
 • @import	
  „compass/typography/links“
 •   Nur die wirklich verwendeten Mixins werden importiert

 •   CSS wird also nicht unnötig aufgeblasen


TYPO3 Usergroup Bodensee #t3see
Beispiel „Horizontale Liste“
/*	
  style.scss	
  */                                  /*	
  style.scss	
  */

ul.nav	
  {                                             ul.nav	
  {
	
  	
  @include	
  horizontal-­‐list-­‐container;      	
  	
  margin:	
  0;
	
  	
  >	
  li	
  {                                    	
  	
  padding:	
  0;
	
  	
  	
  	
  @include	
  horizontal-­‐list-­‐item;   	
  	
  border:	
  0;
	
  	
  }                                               	
  	
  overflow:	
  hidden;
}                                                       	
  	
  *zoom:	
  1;
                                                        }
                                                        ul.nav	
  >	
  li	
  {
                                                        	
  	
  list-­‐style-­‐image:	
  none;
                                                        	
  	
  list-­‐style-­‐type:	
  none;
                                                        	
  	
  margin-­‐left:	
  0;
                                                        	
  	
  white-­‐space:	
  nowrap;
                                                        	
  	
  float:	
  left;
                                                        	
  	
  display:	
  inline;
                                                        	
  	
  padding-­‐left:	
  4px;
                                                        	
  	
  padding-­‐right:	
  4px;
                                                        }
                                                        ul.nav	
  >	
  li:first-­‐child,	
  ul.nav	
  >	
  li.first	
  {
                                                        	
  	
  padding-­‐left:	
  0;
                                                        }
                                                        ul.nav	
  >	
  li:last-­‐child	
  {
                                                        	
  	
  padding-­‐right:	
  0;
                                                        }
                                                        ul.nav	
  >	
  li.last	
  {
                                                        	
  	
  padding-­‐right:	
  0;
                                                        }




TYPO3 Usergroup Bodensee #t3see
Beispiel „Gradients“
/*	
  style.scss	
  */

#linear-­‐gradient	
  {
	
  	
  @include	
  background(linear-­‐gradient(left	
  top,	
  white,	
  #dddddd));
}




/*	
  style.scss	
  */

#linear-­‐gradient	
  {
	
  	
  background:	
  -­‐webkit-­‐gradient(linear,	
  0%	
  0%,	
  100%	
  100%,	
  color-­‐stop(0%,	
  #ffffff),	
  color-­‐stop(100%,	
  #dddddd));
	
  	
  background:	
  -­‐webkit-­‐linear-­‐gradient(left	
  top,	
  #ffffff,	
  #dddddd);
	
  	
  background:	
  -­‐moz-­‐linear-­‐gradient(left	
  top,	
  #ffffff,	
  #dddddd);
	
  	
  background:	
  -­‐o-­‐linear-­‐gradient(left	
  top,	
  #ffffff,	
  #dddddd);
	
  	
  background:	
  linear-­‐gradient(left	
  top,	
  #ffffff,	
  #dddddd);
}




TYPO3 Usergroup Bodensee #t3see
Beispiel „Transitions“
/*	
  style.scss	
  */                               /*	
  style.scss	
  */

#width-­‐duration	
  {                               #width-­‐duration	
  {
	
  	
  @include	
  transition-­‐property(width);    	
  	
  -­‐webkit-­‐transition-­‐property:	
  width;
	
  	
  @include	
  transition-­‐duration(2s);	
     	
  	
  -­‐moz-­‐transition-­‐property:	
  width;
}                                                    	
  	
  -­‐o-­‐transition-­‐property:	
  width;
                                                     	
  	
  transition-­‐property:	
  width;
                                                     	
  	
  -­‐webkit-­‐transition-­‐duration:	
  2s;
                                                     	
  	
  -­‐moz-­‐transition-­‐duration:	
  2s;
                                                     	
  	
  -­‐o-­‐transition-­‐duration:	
  2s;
                                                     	
  	
  transition-­‐duration:	
  2s;
                                                     }




TYPO3 Usergroup Bodensee #t3see
Helper Functions image-width() & image-height()
/*	
  style.scss	
  */

$logofile:	
  "logo.png";

#logo	
  {
	
  	
  	
  	
  background:	
  url($logofile)	
  0	
  0	
  no-­‐repeat;
	
  	
  	
  	
  width:	
  image-­‐width($logofile);
	
  	
  	
  	
  height:	
  image-­‐height($logofile);
}



Pfad zur Datei ist immer relativ zum Bilder-Verzeichnis des Projekts
(definiert in der config.rb)


TYPO3 Usergroup Bodensee #t3see
Helper Function inline-image()
/*	
  style.scss	
  */                                                    /*	
  style.css	
  */

$logofile:	
  "logo.png";                                                 #logo	
  {
#logo	
  {                                                                	
  	
  background:	
  url('data:image/
	
   background:	
  inline-­‐image($logofile)	
  0	
  0	
  no-­‐repeat;   png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABUCAMAAADwIoiUAAAAY1BMVE
	
   width:	
  image-­‐width($logofile);                                  X///+/v7/v7+//dwhkToR/.....kSuQmCC')	
  0	
  0	
  no-­‐repeat;
	
   height:	
  image-­‐height($logofile);                                	
  	
  width:	
  200px;
}                                                                         	
  	
  height:	
  84px;
                                                                          }




• Bilddateien können base64-enkodiert direkt in der CSS-Datei platziert werden.
• ein HTTP-Request weniger
• Geeignet bei kleineren Bildern (Icons)



TYPO3 Usergroup Bodensee #t3see
Helper Function headings()
/*	
  style.scss	
  */                                                     /*	
  style.css	
  */

#content	
  .col1	
  {                                                     #content	
  .col1	
  h1,	
  #content	
  .col1	
  h2,	
  #content	
  .col1	
  h3,	
  
	
  	
  	
  	
  #{headings()}{                                             #content	
  .col1	
  h4,	
  #content	
  .col1	
  h5,	
  #content	
  .col1	
  h6	
  {
	
  	
  	
  	
  	
  	
  	
  	
  color:	
  #009;                            	
  	
  color:	
  #009;
	
  	
  	
  	
  }                                                          }
}
                                                                           #sidebar	
  h2,	
  #sidebar	
  h3,	
  #sidebar	
  h4	
  {
#sidebar	
  {                                                              	
  	
  color:	
  #c90;
	
  	
  	
  	
  #{headings(2,4)}{                                          }
	
  	
  	
  	
  	
  	
  	
  	
  color:#c90;	
  	
  	
  	
  
	
  	
  	
  	
  }
}




TYPO3 Usergroup Bodensee #t3see
Sprites
   •      Compass kann Sprites aus Einzelbildern erzeugen

   •      Dazu die Bilder in einen Ordner legen und in das Stylesheet
          importieren
images/my-­‐icons/new.png           @import	
  „my-­‐icons/*.png“;            .my-­‐icons-­‐sprite,
images/my-­‐icons/edit.png          @include	
  all-­‐my-­‐icons-­‐sprites;   .my-­‐icons-­‐delete,
images/my-­‐icons/save.png                                                    .my-­‐icons-­‐edit,
images/my-­‐icons/delete.png                                                  .my-­‐icons-­‐new,
                                                                              .my-­‐icons-­‐save	
  	
  	
  {	
  background:	
  url('/images/my-­‐icons-­‐s34fe0604ab.png')	
  no-­‐repeat;	
  }
(Die	
  Bilder	
  seien	
  in	
  
diesem	
  Beispiel	
  32x32px	
                                               .my-­‐icons-­‐delete	
  {	
  background-­‐position:	
  0	
  0;	
  }
groß)                                                                         .my-­‐icons-­‐edit	
  	
  	
  {	
  background-­‐position:	
  0	
  -­‐32px;	
  }
                                                                              .my-­‐icons-­‐new	
  	
  	
  	
  {	
  background-­‐position:	
  0	
  -­‐64px;	
  }
                                                                              .my-­‐icons-­‐save	
  	
  	
  {	
  background-­‐position:	
  0	
  -­‐96px;	
  }




TYPO3 Usergroup Bodensee #t3see
Links
 •   sass-lang.com

 •   compass-style.org

 •   sassmeister.com




TYPO3 Usergroup Bodensee #t3see
Bücher
                                  Sass and Compass in Action           Pragmatic Guide to Sass

                                  E-Book $35.99                        E-Book $13.00
                                  Print $44.99                         Print $25.00

                                  http://www.manning.com/netherland/   http://pragprog.com/book/pg_sass/
                                                                       pragmatic-guide-to-sass




TYPO3 Usergroup Bodensee #t3see
Fragen?



TYPO3 Usergroup Bodensee #t3see
Danke!



TYPO3 Usergroup Bodensee #t3see

Weitere ähnliche Inhalte

Andere mochten auch

TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014
die.agilen GmbH
 
Responsive Webdesign verkaufen
Responsive Webdesign verkaufenResponsive Webdesign verkaufen
Responsive Webdesign verkaufendie.agilen GmbH
 
A/B Testing your TYPO3 website - T3CON14EU
A/B Testing your TYPO3 website - T3CON14EUA/B Testing your TYPO3 website - T3CON14EU
A/B Testing your TYPO3 website - T3CON14EU
WEBFORMAT srl
 
Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?
die.agilen GmbH
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
die.agilen GmbH
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
die.agilen GmbH
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKR
die.agilen GmbH
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
die.agilen GmbH
 
Fas drs power_point_2003
Fas drs power_point_2003Fas drs power_point_2003
Fas drs power_point_2003
shallongammon
 
Container equipments
Container equipmentsContainer equipments
Container equipments
Harsh7646
 
Spac tombstones
Spac tombstonesSpac tombstones
Spac tombstones
egsllp
 
Разработка под iPhone для начинающих
Разработка под iPhone для начинающихРазработка под iPhone для начинающих
Разработка под iPhone для начинающихtabtabus
 
Combining archetypes with FHIR in future-proof health information systems
Combining archetypes with FHIR in future-proof health information systemsCombining archetypes with FHIR in future-proof health information systems
Combining archetypes with FHIR in future-proof health information systems
yampeku
 
Address 範例
Address 範例Address 範例
Address 範例5045033
 
The RuNet generation
The RuNet generationThe RuNet generation
The RuNet generation
UNICEF Europe & Central Asia
 
Curating Cultures: Digital Technologies and Their Ramifications for Museums a...
Curating Cultures: Digital Technologies and Their Ramifications for Museums a...Curating Cultures: Digital Technologies and Their Ramifications for Museums a...
Curating Cultures: Digital Technologies and Their Ramifications for Museums a...
agnes.stauber
 
Quasar - Credentials
Quasar - CredentialsQuasar - Credentials
Quasar - Credentials
sumitgandhiquasar
 

Andere mochten auch (18)

TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014
 
Responsive Webdesign verkaufen
Responsive Webdesign verkaufenResponsive Webdesign verkaufen
Responsive Webdesign verkaufen
 
Barrierefreiheit
BarrierefreiheitBarrierefreiheit
Barrierefreiheit
 
A/B Testing your TYPO3 website - T3CON14EU
A/B Testing your TYPO3 website - T3CON14EUA/B Testing your TYPO3 website - T3CON14EU
A/B Testing your TYPO3 website - T3CON14EU
 
Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?Hot or not - who are TYPO3's competitors?
Hot or not - who are TYPO3's competitors?
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKR
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
Fas drs power_point_2003
Fas drs power_point_2003Fas drs power_point_2003
Fas drs power_point_2003
 
Container equipments
Container equipmentsContainer equipments
Container equipments
 
Spac tombstones
Spac tombstonesSpac tombstones
Spac tombstones
 
Разработка под iPhone для начинающих
Разработка под iPhone для начинающихРазработка под iPhone для начинающих
Разработка под iPhone для начинающих
 
Combining archetypes with FHIR in future-proof health information systems
Combining archetypes with FHIR in future-proof health information systemsCombining archetypes with FHIR in future-proof health information systems
Combining archetypes with FHIR in future-proof health information systems
 
Address 範例
Address 範例Address 範例
Address 範例
 
The RuNet generation
The RuNet generationThe RuNet generation
The RuNet generation
 
Curating Cultures: Digital Technologies and Their Ramifications for Museums a...
Curating Cultures: Digital Technologies and Their Ramifications for Museums a...Curating Cultures: Digital Technologies and Their Ramifications for Museums a...
Curating Cultures: Digital Technologies and Their Ramifications for Museums a...
 
Quasar - Credentials
Quasar - CredentialsQuasar - Credentials
Quasar - Credentials
 

Ähnlich wie Sass & Compass - CSS für Fortgeschrittene

Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
Hans Mittendorfer
 
Spass mit Sass
Spass mit SassSpass mit Sass
Spass mit Sass
Heiko Mamerow
 
XHTML
XHTMLXHTML
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz
 
Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Sass/SCSS und Compass - CSS effektiver schreiben 2.0Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Martin Huber
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
Acquia
 
Einführung in SASS und Compass
Einführung in SASS und CompassEinführung in SASS und Compass
Einführung in SASS und Compass
eigentor
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
Stefan Fröhlich
 

Ähnlich wie Sass & Compass - CSS für Fortgeschrittene (10)

Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
 
Spass mit Sass
Spass mit SassSpass mit Sass
Spass mit Sass
 
XHTML
XHTMLXHTML
XHTML
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
 
Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Sass/SCSS und Compass - CSS effektiver schreiben 2.0Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Sass/SCSS und Compass - CSS effektiver schreiben 2.0
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
Einführung in SASS und Compass
Einführung in SASS und CompassEinführung in SASS und Compass
Einführung in SASS und Compass
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 

Mehr von Wolfgang Wagner

Screencasts & Videotutorials #bcbs19
Screencasts & Videotutorials #bcbs19Screencasts & Videotutorials #bcbs19
Screencasts & Videotutorials #bcbs19
Wolfgang Wagner
 
Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019
Wolfgang Wagner
 
Video & Screencasts: Tools & Tipps #bcbs18
Video & Screencasts: Tools & Tipps #bcbs18Video & Screencasts: Tools & Tipps #bcbs18
Video & Screencasts: Tools & Tipps #bcbs18
Wolfgang Wagner
 
Upgrade von TYPO3 4.5 auf 6.2 - CertiFUNcation Phantasialand 2015
Upgrade von TYPO3 4.5 auf 6.2 - CertiFUNcation Phantasialand 2015Upgrade von TYPO3 4.5 auf 6.2 - CertiFUNcation Phantasialand 2015
Upgrade von TYPO3 4.5 auf 6.2 - CertiFUNcation Phantasialand 2015
Wolfgang Wagner
 
Neuerungen in TYPO3 6.0
Neuerungen in TYPO3 6.0Neuerungen in TYPO3 6.0
Neuerungen in TYPO3 6.0
Wolfgang Wagner
 
Upgrade auf TYPO3 6.2
Upgrade auf TYPO3 6.2Upgrade auf TYPO3 6.2
Upgrade auf TYPO3 6.2
Wolfgang Wagner
 
Warum gerade TYPO3?
Warum gerade TYPO3?Warum gerade TYPO3?
Warum gerade TYPO3?
Wolfgang Wagner
 
Screencasts erstellen - Wie, Warum und Wozu?
Screencasts erstellen - Wie, Warum und Wozu?Screencasts erstellen - Wie, Warum und Wozu?
Screencasts erstellen - Wie, Warum und Wozu?
Wolfgang Wagner
 
Webinar TYPO3 Performance Optimierung
Webinar TYPO3 Performance OptimierungWebinar TYPO3 Performance Optimierung
Webinar TYPO3 Performance Optimierung
Wolfgang Wagner
 

Mehr von Wolfgang Wagner (9)

Screencasts & Videotutorials #bcbs19
Screencasts & Videotutorials #bcbs19Screencasts & Videotutorials #bcbs19
Screencasts & Videotutorials #bcbs19
 
Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019
 
Video & Screencasts: Tools & Tipps #bcbs18
Video & Screencasts: Tools & Tipps #bcbs18Video & Screencasts: Tools & Tipps #bcbs18
Video & Screencasts: Tools & Tipps #bcbs18
 
Upgrade von TYPO3 4.5 auf 6.2 - CertiFUNcation Phantasialand 2015
Upgrade von TYPO3 4.5 auf 6.2 - CertiFUNcation Phantasialand 2015Upgrade von TYPO3 4.5 auf 6.2 - CertiFUNcation Phantasialand 2015
Upgrade von TYPO3 4.5 auf 6.2 - CertiFUNcation Phantasialand 2015
 
Neuerungen in TYPO3 6.0
Neuerungen in TYPO3 6.0Neuerungen in TYPO3 6.0
Neuerungen in TYPO3 6.0
 
Upgrade auf TYPO3 6.2
Upgrade auf TYPO3 6.2Upgrade auf TYPO3 6.2
Upgrade auf TYPO3 6.2
 
Warum gerade TYPO3?
Warum gerade TYPO3?Warum gerade TYPO3?
Warum gerade TYPO3?
 
Screencasts erstellen - Wie, Warum und Wozu?
Screencasts erstellen - Wie, Warum und Wozu?Screencasts erstellen - Wie, Warum und Wozu?
Screencasts erstellen - Wie, Warum und Wozu?
 
Webinar TYPO3 Performance Optimierung
Webinar TYPO3 Performance OptimierungWebinar TYPO3 Performance Optimierung
Webinar TYPO3 Performance Optimierung
 

Sass & Compass - CSS für Fortgeschrittene

  • 1. Sass & Compass CSS für Fortgeschrittene 14.03.2013 TYPO3 Usergroup Bodensee #t3see
  • 2. Wer ist der Typ? • Wolfgang Wagner • Web Developer bei jweiland.net • lebt in Friedrichshafen • Gründungsmitglied der #t3see • Bloggt auf http://wowa-webdesign.de über TYPO3, Webdesign und alles mögliche • Twitter: @wowawebdesign TYPO3 Usergroup Bodensee #t3see
  • 4. Sass • Sass ist ein Precompiler für CSS • Sass steht für „syntactically awesome style sheets“ • bietet eine einfachere und elegantere Syntax für CSS TYPO3 Usergroup Bodensee #t3see
  • 5. Sass installieren • Benötigt Ruby • Ruby ist bei Mac OS schon dabei • unter Linux via Paket-Manager installieren • für Windows: http://rubyinstaller.org • dann im Terminal: gem  install  sass TYPO3 Usergroup Bodensee #t3see
  • 6. Sass Syntax #main    color:  blue    font-­‐size:  0.3em    a        font:            weight:  bold            family:  serif        &:hover            background-­‐color:  #eee TYPO3 Usergroup Bodensee #t3see
  • 7. SCSS Syntax #main  {    color:  blue; Jede .css Datei kann zu    font-­‐size:  0.3em; einer .scss Datei gemacht    a  { werden        font:  {            weight:  bold;            family:  serif;        }        &:hover  {            background-­‐color:  #eee;        }    } } TYPO3 Usergroup Bodensee #t3see
  • 8. Vorgehensweise • Änderungen werden nur noch in .scss-Dateien vorgenommen • Sass kompiliert aus den .scss-Dateien .css-Dateien • Kompilierung manuell oder automatisch per sass  -­‐-­‐watch  style.scss:style.css • Überwachung eines Ordners mit mehreren Dateien per sass  -­‐-­‐watch  stylesheets/scss:stylesheets/css TYPO3 Usergroup Bodensee #t3see
  • 9. Features Nesting /*  style.scss  */ /*  style.css  */ #navbar  { #navbar  {    width:  80%;    width:  80%;    height:  23px;    height:  23px;   }    ul  {  list-­‐style-­‐type:  none;  } #navbar  ul  {  list-­‐style-­‐type:  none;  }    li  {        float:  left; #navbar  li  {  float:  left;  }        a  {  font-­‐weight:  bold;  }    } } #navbar  li  a  {  font-­‐weight:  bold;  } TYPO3 Usergroup Bodensee #t3see
  • 10. Features Nesting mit Media Queries /*  style.scss  */ /*  style.css  */ #h1  { #h1  {  font-­‐size:200%;}    font-­‐size:200%;    a  {        color:  #000; #h1  a  {  color:  #000};        @media  only  screen  and  (max-­‐width:320px){ @media  only  screen  and  (max-­‐width:320px){            color:  #00f;    #h1  a  {  color:  #00f;  }        } }    } } TYPO3 Usergroup Bodensee #t3see
  • 11. Features Schlechtes Nesting Resultiert in div#main  { div#main  #sidebar  #navbar  {...}    #sidebar  { div#main  #sidebar  #navbar  aside  div  ul  {...}        #navbar  { div#main  #sidebar  #navbar  aside  div  ul  li  {...}            width:  80%; div#main  #sidebar  #navbar  aside  div  ul  li  a  {...}            height:  23px;            aside  {                div  {                    ul  {                        list-­‐style-­‐type:  none;                        li  { • Viel zu spezifische Selektoren                            float:  left; • schlechte Performance                            a  {                                font-­‐weight:  bold;                            }                        }                    }                }            }        }    } } TYPO3 Usergroup Bodensee #t3see
  • 12. Features Nesting mit Pseudoklassen /*  style.scss  */ /*  style.css  */ a  { a  {  color:  #333;  }    color:  #333; a:hover  {  color:  #00f;  }    &:hover  {  color:  #00f;  } a:visited  {  color:  #999;  }    &:visited  {  color:  #999;  } } TYPO3 Usergroup Bodensee #t3see
  • 13. Features Variablen • Variablen können im gesamten Stylesheet genutzt werden • Variablennamen beginnen mit einem $ und werden wie normale Eigenschaften deklariert • Variabeln können Farben, Zahlen (mit Einheiten) oder Text enthalten TYPO3 Usergroup Bodensee #t3see
  • 14. Features Variablen /*  style.scss  */ /*  style.css  */ $maxwidth:  80em; body  { $fontcolor:  #666;    color:  #666666; $fontfamily:  Arial,helvetica,sans-­‐serif;    font-­‐family:  Arial,  helvetica,  sans-­‐serif; $headerfontcolor:  #009; } $headerfontfamily:  Tahoma,Arial,helvetica,sans-­‐serif; h1,  h2,  h3,  h4,  h5,  h6  { body  {    color:  #000099;    color:  $fontcolor;    font-­‐family:  Tahoma,  Arial,  helvetica,  sans-­‐serif;    font-­‐family:  $fontfamily; } } h1,h2,h3,h4,h5,h6  {    color:  $headerfontcolor;    font-­‐family:  $headerfontfamily; } TYPO3 Usergroup Bodensee #t3see
  • 15. Features Operatoren +, -, /, * /*  style.scss  */ /*  style.css  */ $navbar-­‐width:  800px; #navbar  { $items:  5;    width:  800px; } #navbar  {    width:  $navbar-­‐width; #navbar  li  {        float:  left;    li  {    width:  150px; float:  left; } width:  $navbar-­‐width/$items  -­‐  10px;    } } TYPO3 Usergroup Bodensee #t3see
  • 16. Features Farb-Manipulationen /*  style.scss  */ lighten(color,amount) $navbar-­‐width:  800px; Hellt eine Farbe um einen Prozentwert auf (amount) $items:  5; $navbar-­‐color:  #ce4dd6; darken(color,amount) #navbar  { Dunkelt eine Farbe ab    width:  $navbar-­‐width;    background:  $navbar-­‐color; Es gibt noch weitere Funktionen (hue, saturate,    li  { desaturate, grayscale, complement, invert ...)        float:  left;        width:  $navbar-­‐width/$items  -­‐  10px;        &:hover:  lighten($navbar-­‐color,20%);    } } TYPO3 Usergroup Bodensee #t3see
  • 17. Features @if /*  style.scss  */ $theme:  dark; body  { @if  $theme  ==  light  { background:  #c7c7c7; color:  #000; }  @else  if  $theme  ==  dark  { background:  #222; color:  #ddd; } } TYPO3 Usergroup Bodensee #t3see
  • 18. Features @for /*  style.scss  */ /*  style.css  */ @for  $i  from  1  through  6  { h1  {  font-­‐size:  2.25em;  }        h#{$i}  {  font-­‐size:  2.5em-­‐(0.25em*$i);  }   } h2  {  font-­‐size:  2em;  } h3  {  font-­‐size:  1.75em;  } h4  {  font-­‐size:  1.5em;  } h5  {  font-­‐size:  1.25em;  } h6  {  font-­‐size:  1em;  } TYPO3 Usergroup Bodensee #t3see
  • 19. Features @for /*  style.scss  */ /*  style.scss  */ $theme:dark; h1  {  font-­‐size:  2.25em;  color:  #000;  } @for  $i  from  1  through  6  { h2  {  font-­‐size:  2em;  color:  #000;  }        h#{$i}  {  font-­‐size:  2.5em-­‐(0.25em*$i);          @if  $theme  ==  dark  { h3  {  font-­‐size:  1.75em;  color:  #000;  }                color:#000;        } h4  {  font-­‐size:  1.5em;  color:  #000;  }    }               } h5  {  font-­‐size:  1.25em;  color:  #000;  } h6  {  font-­‐size:  1em;  color:  #000;  } TYPO3 Usergroup Bodensee #t3see
  • 20. Features @each /*  style.scss  */ /*  style.css  */ @each  $section  in  home,  about,  archive,  projects  { .home  nav  {  background-­‐image:  url(/images/nav/home.png);  }    nav  {        .#{$section}  &  { .about  nav  {  background-­‐image:  url(/images/nav/about.png);  }            background-­‐image:  url(/images/nav/#{$section}.png);        } .archive  nav  {  background-­‐image:  url(/images/nav/archive.png);  }    } } .projects  nav  {  background-­‐image:  url(/images/nav/projects.png);  } TYPO3 Usergroup Bodensee #t3see
  • 21. Features Mixins • Mixins sind „wiederverwertbare“ Codeblöcke • können einmal definiert global verwendet werden /*  style.scss  */ /*  style.css  */ @mixin  box-­‐shadow($shadow){ #box  { -­‐webkit-­‐box-­‐shadow:  $shadow;    width:  50%; -­‐moz-­‐box-­‐shadow:  $shadow;    padding:  1em; box-­‐shadow:  $shadow;    -­‐webkit-­‐box-­‐shadow:  0  0  10px  rgba(0,  0,  0,  0.4); }    -­‐moz-­‐box-­‐shadow:  0  0  10px  rgba(0,  0,  0,  0.4);    box-­‐shadow:  0  0  10px  rgba(0,  0,  0,  0.4); #box  { } width:  50%; padding:  1em; @include  box-­‐shadow(0  0  10px  rgba(0,0,0,.4)); } TYPO3 Usergroup Bodensee #t3see
  • 22. Features Mixin für Retina Images /*  style.scss  */ /*  style.css  */ /*  Mixin  */ div.logo  { @mixin  image-­‐2x($image,  $width,  $height)  {    background:  url("logo.png")  no-­‐repeat;    @media  (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:  1.3), }                  (-­‐o-­‐min-­‐device-­‐pixel-­‐ratio:  2.6/2), @media  (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:  1.3),  (-­‐o-­‐min-­‐device-­‐pixel-­‐ratio:  2.6  /  2),  (-­‐webkit-­‐                  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.3), min-­‐device-­‐pixel-­‐ratio:  1.3),  (min-­‐device-­‐pixel-­‐ratio:  1.3),  (min-­‐resolution:  1.3dppx)  {                  (min-­‐device-­‐pixel-­‐ratio:  1.3),    div.logo  {                  (min-­‐resolution:  1.3dppx)  {        /*  on  retina,  use  image  that's  scaled  by  2  */        /*  on  retina,  use  image  that's  scaled  by  2  */        background-­‐image:  url("logo2x.png");        background-­‐image:  url($image);        background-­‐size:  100px  25px;        background-­‐size:  $width  $height;    }    } } } /*  Anwendung  */ div.logo  {    background:  url("logo.png")  no-­‐repeat;    @include  image-­‐2x("logo2x.png",  100px,  25px); } Quelle: Easy retina-ready images using SCSS TYPO3 Usergroup Bodensee #t3see
  • 23. Features @extend • per @extend werden Eigenschaften einer Regel in eine andere übernommen /*  style.scss  */ /*  style.scss  */ $buttontextcolor:#000; .button,  .button-­‐confirm  { $buttonbgrcolor:#ccc;    color:  black; $green:  #090;    background:  #cccccc;    width:  8em; .button  {    text-­‐align:  center; color:  $buttontextcolor;    padding:  .5em  1em; background:  $buttonbgrcolor;    font-­‐weight:  bold; width:  8em; } text-­‐align:center; padding:  .5em  1em; .button-­‐confirm  { font-­‐weight:  bold;    background:  #009900; }    width:  10em; } .button-­‐confirm  { @extend  .button; background:  $green; width:  10em; } TYPO3 Usergroup Bodensee #t3see
  • 24. Features Modularisierung • .scss Dateien in viele kleine Dateien aufteilen • Underscore im Dateinamen „verhindert“ Kompilierung z.B. _mixins.scss, _variablen.scss • Einbindung in Hauptdatei per @import /*  style.scss  */ @import  „global/variablen“; @import  „global/mixins“; Beim Kompilieren werden alle Module @import  „content/links“; in die style.css geschrieben @import  „content/typography“; @import  „layout/grid“; @import  „navigation/mainnav“; . . . TYPO3 Usergroup Bodensee #t3see
  • 25. Features Kommentare /*  style.scss  */ /*  style.css  */ /*  Das  ist  ein  normaler /*  Das  ist  ein  normaler mehrzeilger  Kommentar  */ mehrzeilger  Kommentar  */ .page  { .page  { width:  $max-­‐width; width:  80em; } } //  Das  ist  ein  einzeiliger  Kommentar  der header  { //  in  der  CSS-­‐Datei  nicht  zu  sehen  sein  wird background:  #334455; header  { } background:  $headerbgrcolor; } TYPO3 Usergroup Bodensee #t3see
  • 27. Compass • Compass ist Framework um Sass zu erweitern • bringt viele CSS3 - Mixins und Helper Functions mit • erleichtert die Verwendung von CSS-Sprites TYPO3 Usergroup Bodensee #t3see
  • 28. Compass installieren gem  install  compass TYPO3 Usergroup Bodensee #t3see
  • 29. Neues Compass Projekt • Compass kann ein leeres Projekt mit grundlegender CSS-Ausstattung anlegen compass  create  <myproject> Erzeugt: config.rb sass/ie.scss sass/print.scss sass/screen.scss stylesheets/ie.css stylesheets/screen.css • Manuell SCSS kompilieren: compass  compile  <myproject> • Projekt überwachen: compass  watch  <myproject> TYPO3 Usergroup Bodensee #t3see
  • 30. Neues Compass Projekt • Man kann auch eine bestehende Projektstruktur mit Compass verbinden cd  <myproject> compass  create  -­‐-­‐bare  -­‐-­‐sass-­‐dir  „sass“  -­‐-­‐css-­‐dir  „css“  -­‐-­‐images-­‐dir  „images“  -­‐-­‐javascript-­‐dir  „js“   TYPO3 Usergroup Bodensee #t3see
  • 31. Compass Konfiguration • Die Datei config.rb enthält die Konfiguration des Projekts #  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  =  :expanded  or  :nested  or  :compact  or  :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 • Bei Änderungen in der config.rb muss neu kompiliert werden mit compass  compile  -­‐-­‐force • Ausgabe für Production Environment compass  compile  -­‐-­‐output-­‐style  compressed  -­‐-­‐force TYPO3 Usergroup Bodensee #t3see
  • 32. Compass bietet verschiedene Module • CSS3 - liefert Cross Browser kompatible CSS3 Mixins • Typography - Mixins für allgemeine Typographie-Muster (Links, Listen etc.) • Utilities - Mixins für Styling Muster (Listen, Texte, Farben, Sprites, Tabellen etc.) • alle 3 Module untergliedern sich in weitere Submodule TYPO3 Usergroup Bodensee #t3see
  • 33. Compass in Sass-Dateien verwenden • @import  „compass“ • @import  „compass/css3“ • @import  „compass/typography/links“ • Nur die wirklich verwendeten Mixins werden importiert • CSS wird also nicht unnötig aufgeblasen TYPO3 Usergroup Bodensee #t3see
  • 34. Beispiel „Horizontale Liste“ /*  style.scss  */ /*  style.scss  */ ul.nav  { ul.nav  {    @include  horizontal-­‐list-­‐container;    margin:  0;    >  li  {    padding:  0;        @include  horizontal-­‐list-­‐item;    border:  0;    }    overflow:  hidden; }    *zoom:  1; } ul.nav  >  li  {    list-­‐style-­‐image:  none;    list-­‐style-­‐type:  none;    margin-­‐left:  0;    white-­‐space:  nowrap;    float:  left;    display:  inline;    padding-­‐left:  4px;    padding-­‐right:  4px; } ul.nav  >  li:first-­‐child,  ul.nav  >  li.first  {    padding-­‐left:  0; } ul.nav  >  li:last-­‐child  {    padding-­‐right:  0; } ul.nav  >  li.last  {    padding-­‐right:  0; } TYPO3 Usergroup Bodensee #t3see
  • 35. Beispiel „Gradients“ /*  style.scss  */ #linear-­‐gradient  {    @include  background(linear-­‐gradient(left  top,  white,  #dddddd)); } /*  style.scss  */ #linear-­‐gradient  {    background:  -­‐webkit-­‐gradient(linear,  0%  0%,  100%  100%,  color-­‐stop(0%,  #ffffff),  color-­‐stop(100%,  #dddddd));    background:  -­‐webkit-­‐linear-­‐gradient(left  top,  #ffffff,  #dddddd);    background:  -­‐moz-­‐linear-­‐gradient(left  top,  #ffffff,  #dddddd);    background:  -­‐o-­‐linear-­‐gradient(left  top,  #ffffff,  #dddddd);    background:  linear-­‐gradient(left  top,  #ffffff,  #dddddd); } TYPO3 Usergroup Bodensee #t3see
  • 36. Beispiel „Transitions“ /*  style.scss  */ /*  style.scss  */ #width-­‐duration  { #width-­‐duration  {    @include  transition-­‐property(width);    -­‐webkit-­‐transition-­‐property:  width;    @include  transition-­‐duration(2s);      -­‐moz-­‐transition-­‐property:  width; }    -­‐o-­‐transition-­‐property:  width;    transition-­‐property:  width;    -­‐webkit-­‐transition-­‐duration:  2s;    -­‐moz-­‐transition-­‐duration:  2s;    -­‐o-­‐transition-­‐duration:  2s;    transition-­‐duration:  2s; } TYPO3 Usergroup Bodensee #t3see
  • 37. Helper Functions image-width() & image-height() /*  style.scss  */ $logofile:  "logo.png"; #logo  {        background:  url($logofile)  0  0  no-­‐repeat;        width:  image-­‐width($logofile);        height:  image-­‐height($logofile); } Pfad zur Datei ist immer relativ zum Bilder-Verzeichnis des Projekts (definiert in der config.rb) TYPO3 Usergroup Bodensee #t3see
  • 38. Helper Function inline-image() /*  style.scss  */ /*  style.css  */ $logofile:  "logo.png"; #logo  { #logo  {    background:  url('data:image/   background:  inline-­‐image($logofile)  0  0  no-­‐repeat; png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABUCAMAAADwIoiUAAAAY1BMVE   width:  image-­‐width($logofile); X///+/v7/v7+//dwhkToR/.....kSuQmCC')  0  0  no-­‐repeat;   height:  image-­‐height($logofile);    width:  200px; }    height:  84px; } • Bilddateien können base64-enkodiert direkt in der CSS-Datei platziert werden. • ein HTTP-Request weniger • Geeignet bei kleineren Bildern (Icons) TYPO3 Usergroup Bodensee #t3see
  • 39. Helper Function headings() /*  style.scss  */ /*  style.css  */ #content  .col1  { #content  .col1  h1,  #content  .col1  h2,  #content  .col1  h3,          #{headings()}{ #content  .col1  h4,  #content  .col1  h5,  #content  .col1  h6  {                color:  #009;    color:  #009;        } } } #sidebar  h2,  #sidebar  h3,  #sidebar  h4  { #sidebar  {    color:  #c90;        #{headings(2,4)}{ }                color:#c90;                } } TYPO3 Usergroup Bodensee #t3see
  • 40. Sprites • Compass kann Sprites aus Einzelbildern erzeugen • Dazu die Bilder in einen Ordner legen und in das Stylesheet importieren images/my-­‐icons/new.png @import  „my-­‐icons/*.png“; .my-­‐icons-­‐sprite, images/my-­‐icons/edit.png @include  all-­‐my-­‐icons-­‐sprites; .my-­‐icons-­‐delete, images/my-­‐icons/save.png .my-­‐icons-­‐edit, images/my-­‐icons/delete.png .my-­‐icons-­‐new, .my-­‐icons-­‐save      {  background:  url('/images/my-­‐icons-­‐s34fe0604ab.png')  no-­‐repeat;  } (Die  Bilder  seien  in   diesem  Beispiel  32x32px   .my-­‐icons-­‐delete  {  background-­‐position:  0  0;  } groß) .my-­‐icons-­‐edit      {  background-­‐position:  0  -­‐32px;  } .my-­‐icons-­‐new        {  background-­‐position:  0  -­‐64px;  } .my-­‐icons-­‐save      {  background-­‐position:  0  -­‐96px;  } TYPO3 Usergroup Bodensee #t3see
  • 41. Links • sass-lang.com • compass-style.org • sassmeister.com TYPO3 Usergroup Bodensee #t3see
  • 42. Bücher Sass and Compass in Action Pragmatic Guide to Sass E-Book $35.99 E-Book $13.00 Print $44.99 Print $25.00 http://www.manning.com/netherland/ http://pragprog.com/book/pg_sass/ pragmatic-guide-to-sass TYPO3 Usergroup Bodensee #t3see