• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sass/SCSS und Compass - Stylesheets im Griff!
 

Sass/SCSS und Compass - Stylesheets im Griff!

on

  • 3,030 views

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 ...

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

Statistics

Views

Total Views
3,030
Views on SlideShare
2,502
Embed Views
528

Actions

Likes
2
Downloads
18
Comments
0

11 Embeds 528

http://laugks.tumblr.com 236
http://www.elevado.de 231
http://elevado.de 47
http://broadviewtv.elevado.de 6
http://www.soso.com 2
http://www.bing.com 1
http://elevado.de. 1
http://webcache.googleusercontent.com 1
http://bradview.elevado.de 1
http://www.bradview.elevado.de 1
http://tumblr.com.netzcheck.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial 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/SCSS und Compass - Stylesheets im Griff! Sass/SCSS und Compass - Stylesheets im Griff! Presentation Transcript

    • 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, Kontroll-Strukturen (if), Schleifen(for, while, each), vordefinierte Functions(String, Number, Math, etc.) und mehr... 2
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Bücher (Stand 03/2012) Print und Ebook (PDF, epub, mobi) Early Access Edition, fertig laut Verlag Mai 2012, Print- und Ebook (PDF) 12
    • Dankehttps://github.com/denkwerk/MMT29 13