Sass & Compass - CSS für Fortgeschrittene
Upcoming SlideShare
Loading in...5
×
 

Sass & Compass - CSS für Fortgeschrittene

on

  • 1,917 views

Slides vom TYPO3 Usergroup Treffen 14.03.2013.

Slides vom TYPO3 Usergroup Treffen 14.03.2013.

Kurzer Einblick in Sass und Compass, Installation, Anwendung und Anwendungsbeispiele.

Statistics

Views

Total Views
1,917
Views on SlideShare
1,343
Embed Views
574

Actions

Likes
5
Downloads
12
Comments
0

1 Embed 574

http://t3see.de 574

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sass & Compass - CSS für Fortgeschrittene Sass & Compass - CSS für Fortgeschrittene Presentation Transcript

  • Sass & Compass CSS für Fortgeschrittene 14.03.2013TYPO3 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: @wowawebdesignTYPO3 Usergroup Bodensee #t3see
  • SassTYPO3 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 CSSTYPO3 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  sassTYPO3 Usergroup Bodensee #t3see
  • Sass Syntax #main    color:  blue    font-­‐size:  0.3em    a        font:            weight:  bold            family:  serif        &:hover            background-­‐color:  #eeeTYPO3 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/cssTYPO3 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
  • FeaturesVariablen • 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 enthaltenTYPO3 Usergroup Bodensee #t3see
  • FeaturesVariablen/*  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
  • FeaturesOperatoren +, -, /, */*  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
  • FeaturesFarb-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
  • FeaturesMixins• 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
  • FeaturesMixin 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  thats  scaled  by  2  */        /*  on  retina,  use  image  thats  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 SCSSTYPO3 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
  • FeaturesModularisierung• .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
  • FeaturesKommentare/*  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
  • CompassTYPO3 Usergroup Bodensee #t3see
  • Compass • Compass ist Framework um Sass zu erweitern • bringt viele CSS3 - Mixins und Helper Functions mit • erleichtert die Verwendung von CSS-SpritesTYPO3 Usergroup Bodensee #t3see
  • Compass installieren gem  install  compassTYPO3 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  -­‐-­‐forceTYPO3 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 SubmoduleTYPO3 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 aufgeblasenTYPO3 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 importierenimages/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.comTYPO3 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-sassTYPO3 Usergroup Bodensee #t3see
  • Fragen?TYPO3 Usergroup Bodensee #t3see
  • Danke!TYPO3 Usergroup Bodensee #t3see