Sass/SCSS und Compass –Stylesheets im Griff!Köln, 24.03.2012 / André Laugks
Sass und SCSSSass und SCSS sind Precompiler und erweiternCSS um:Variablen, Mixins, Functions, Nesting, SelectorInheritance...
Sass und SCSSSass                                             SCSS$color: #ff0000!                                 $color:...
SCSS - Variables SCSS                                   CSS $text-color: #ff0000;!                 .text-box {! $bg-color:...
SCSS - Nesting SCSS                          CSS article {!                    article {!    color: #fff;!                ...
SCSS - Selector Inheritance SCSS                            CSS div.box-standard {!             div.box-standard, div.box-...
SCSS - Mixins SCSS                                  CSS @mixin border-radius($radius: 5px)    .box-left-col {! {!         ...
SCSS - Function SCSS                                       CSS $default-size: 2em;!                       .h1 {! !        ...
CompassCompass ist ein auf SCSS basierendes Framework:CSS3-Feature in Form von Mixins mit Vendor-Prefixes und Cross Browser...
Installation - 1. SchrittRubyWindows:•  Ruby installieren (rubyinstaller.org)Mac:•  Ruby ist in der Regel vorinstalliertLi...
Installation - 2. SchrittSass/SCSS oder Compass über gem installierenunter Windows, Linux und MacSCSS/Sass> gem install sa...
Bücher (Stand 03/2012)  Print und Ebook (PDF, epub, mobi)   Early Access Edition, fertig laut                             ...
Dankehttps://github.com/denkwerk/MMT29                                    13
Upcoming SlideShare
Loading in …5
×

Sass/SCSS und Compass - Stylesheets im Griff!

4,022 views
4,085 views

Published on

Am 24.03.2012 hielt André Laugks, Technical Director der Agentur denkwerk, einen Vortrag auf dem Multimediatreff in Köln zum Thema: "Sass/SCSS und Compass - Stylesheets im Griff!" Ab jetzt steht diese Präsentation als Download zur Verfügung.

Die (Source-)Dateien zur Präsentation findet Ihr hier: https://github.com/denkwerk/MMT29

Published in: Business, Technology, Lifestyle
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,022
On SlideShare
0
From Embeds
0
Number of Embeds
1,432
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Sass/SCSS und Compass - Stylesheets im Griff!

  1. 1. Sass/SCSS und Compass –Stylesheets im Griff!Köln, 24.03.2012 / André Laugks
  2. 2. Sass und SCSSSass und SCSS sind Precompiler und erweiternCSS um:Variablen, Mixins, Functions, Nesting, SelectorInheritance, Kontroll-Strukturen (if), Schleifen(for, while, each), vordefinierte Functions(String, Number, Math, etc.) und mehr... 2
  3. 3. Sass und SCSSSass SCSS$color: #ff0000! $color: #ff0000;!! !.text-box ! .text-box {! background: #ccccc! background:#cccccc;! border: 1px solid #eeeeee! border:1px solid #eeeeee;!! }!! !.info-text! .info-text { ! @extend .text-box! @extend .text-box;! color: $color! color: $color;!! }! CSS .text-box {! background: #cccccc;! border: 1px solid #eeeeee;! }! ! .info-text {! color: red;! }! 3
  4. 4. SCSS - Variables SCSS CSS $text-color: #ff0000;! .text-box {! $bg-color:#cccccc;! background: #cccccc;! $border-color:#eeeeee;! border: 1px solid #eeeeee;! ! }! .text-box {! ! background: $bg-color; ! .info-text {! border:1px solid: $border-color;! color: red;! }! }! ! .info-text {! color: $text-color;! }! 4
  5. 5. SCSS - Nesting SCSS CSS article {! article {! color: #fff;! color: #ffffff;! h2 {! }! font-size:1.1em;! article h2 {! }! font-size: 1.1em;! p {! }! font-size:0.9em;! article p {! .highlight {! font-size: 0.9em;! color:#ccc; ! }! } ! article p .highlight {! }! color: #cccccc;! }! }! ! 5
  6. 6. SCSS - Selector Inheritance SCSS CSS div.box-standard {! div.box-standard, div.box-small, ! border:1px solid #ffffff;! div.box-small-info {! border-radius: 5px;! border: 1px solid #ffffff;! padding:5px; ! border-radius: 5px;! width:600px;! padding:5px;! }! width: 590px;! ! }! div.box-small { ! ! @extend div.box-standard;! div.box-small, div.box-small-info width: 300px;! {! }! width: 290px;! ! }! div.box-small-info {! ! @extend div.box-small;! div.box-small-info {! border:1px solid #cc0c0c;! border: 1px solid #cc0c0c;! color:#cc0c0c;! color: #cc0c0c;! }! }! ! ! 6
  7. 7. SCSS - Mixins SCSS CSS @mixin border-radius($radius: 5px) .box-left-col {! {! background: #cccccc;! border-radius: $radius;! border-radius: 5px;! -ms-border-radius: $radius;! -ms-border-radius: 5px;! -moz-border-radius: $radius;! -moz-border-radius: 5px;! -webkit-border-radius: $radius;! -webkit-border-radius: 5px;! -khtml-border-radius: $radius;! -khtml-border-radius: 5px;! }! }! ! ! .box-left-col {! ! background:#cccccc;! .box-content-col {! @include border-radius;! background: #ffffff;! }! border-radius: 10px;! ! -ms-border-radius: 10px;! .box-content-col {! -moz-border-radius: 10px;! background:#ffffff;! -webkit-border-radius: 10px;! @include border-radius(10px);! -khtml-border-radius: 10px;! }! }! ! ! ! ! 7
  8. 8. SCSS - Function SCSS CSS $default-size: 2em;! .h1 {! ! font-size: 2.4em;! @function size($size: 100) { ! padding: 0 0 2.4em 0;! @return $default-size * ($size/100);! }! }! ! ! .h2 {! .h1 {! font-size: 2em;! font-size: size(120);! }! padding: 0 0 size(120) 0;! ! }! p {! ! font-size: 1.6em;! .h2 {! }! font-size: size();! }! ! p {! font-size: size(80);! }! 8
  9. 9. CompassCompass ist ein auf SCSS basierendes Framework:CSS3-Feature in Form von Mixins mit Vendor-Prefixes und Cross Browser, Generierung vonSprite-Maps („CSS-Sprites“), Grid/CSS-Frameworks(HTML5 Boilerplate, Blueprint) und mehr ... 9
  10. 10. Installation - 1. SchrittRubyWindows:•  Ruby installieren (rubyinstaller.org)Mac:•  Ruby ist in der Regel vorinstalliertLinux:•  Ruby ist standardmäßig nicht vorinstalliert, kann über Packagemanager oder über Source installiert werden 10
  11. 11. Installation - 2. SchrittSass/SCSS oder Compass über gem installierenunter Windows, Linux und MacSCSS/Sass> gem install sass!Compass installieren (SCSS/Scss wird mit installiert)> gem install compass! 11
  12. 12. Bücher (Stand 03/2012) Print und Ebook (PDF, epub, mobi) Early Access Edition, fertig laut Verlag Mai 2012, Print- und Ebook (PDF) 12
  13. 13. Dankehttps://github.com/denkwerk/MMT29 13

×