Sass & Compass (Barcamp Stuttgart 2012)
Upcoming SlideShare
Loading in...5
×
 

Sass & Compass (Barcamp Stuttgart 2012)

on

  • 1,581 views

Session Slides vom Barcamp Stuttgart 2012 #bcs5

Session Slides vom Barcamp Stuttgart 2012 #bcs5

Statistics

Views

Total Views
1,581
Views on SlideShare
974
Embed Views
607

Actions

Likes
1
Downloads
11
Comments
0

3 Embeds 607

http://trafex.de 605
http://www.hanrss.com 1
http://trafex.de.netzcheck.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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 (Barcamp Stuttgart 2012) Sass & Compass (Barcamp Stuttgart 2012) Presentation Transcript

  • schöneres CSSmitSass & Compass
  • Sass
  • Install & Run$ gem install sass$ sass --watch style.sass:style.css$ sass --watch assets/sass:public/css
  • Basic Syntaxcss scss sass
  • Nesting SASS article border-top: 1px dashed #eee header margin-bottom: 15px header, section color: #eee CSS article { border-top: 1px dashed #eeeeee; } article header { margin-bottom: 15px; } article header, article section { color: #eeeeee; }
  • Parent Selector SASS article color: #f00 &:hover color: #00f .special & h1 font-size: 2em CSS article { color: red; } article:hover { color: blue; } .special article h1 { font-size: 2em; }
  • @media SASS #content margin: 0 1.5em @media screen and (min-width: 1280px) margin: 0 2.5em CSS #content { margin: 0 1.5em; } @media screen and (min-width: 1280px) { #content { margin: 0 2.5em; } }
  • Variablen SASS $link-color: #e78a15 $link-hover: #138a1e $link-size: 0.8em a color: $link-color font-size: $link-size &:hover color: $link-hover CSS a { color: #e78a15; font-size: 0.8em; } a:hover { color: #138a1e; }
  • Weiterverwendung mit @extend SASS .button background-color: #00f color: #fff padding: 2em 1.5em .button-delete @extend .button background-color: #f00 CSS .button, .button-delete { background-color: blue; color: white; padding: 2em 1.5em; } .button-delete { background-color: red; }
  • Vorlagen mit @mixin SASS @mixin hover-link text-decoration: none &:hover text-decoration: underline article a @include hover-link .nav a color: blue @include hover-link CSS article a { text-decoration: none; } article a:hover { text-decoration: underline; } .nav a { color: blue; text-decoration: none; } .nav a:hover { text-decoration: underline; }
  • Funktionen mit @mixin SASS @mixin border-radius($amount) border-radius: $amount -mox-border-radius: $amount -webkit-border-radius: $amount .alert @include border-radius(5px) CSS .alert { border-radius: 5px; -mox-border-radius: 5px; -webkit-border-radius: 5px; }
  • benannte Argumente mit @mixin SASS @mixin flash-message($bgcolor:red, $hovercolor:blue) background-color: $bgcolor &:hover background-color: $hovercolor .alertbox @include flash-message($hovercolor: green) CSS .alertbox { background-color: red; } .alertbox:hover { background-color: green; }
  • Import pages/ _user.sass screen.sass _variables.sass _grid.sass _typography.sass _phone.sass SASS /* screen.sass */ @import "variables" @import "grid" @import "grid", "typography" @media screen and (min-width: 480px) @import "phone" #user @import "pages/user"
  • etwas Mathematik SASSfont-size: 18px - 5pxwidth: 200px * 3Beispiel:$layout-space: 10px$sidebar-width: 250px$page-width: 960px#main width: $page-width - $sidebar-width - (2 * $layout-space) CSS#main { width: 690px; }
  • Mathematische Funktionenabs(-43) // => 43floor(3.9) // => 3ceil(3.2) // => 4round(2.8) // => 3percentage(13/25) // => 52%
  • Mehr ...- Bedingungen (@if, @else, @elseif)- Logische Operatoren (<, >, >=, <=, ==, !=)- Verknuepfungen (and, or)- Schleifen (@for, @while, @each)- Farb-Inspektoren (hue, saturation, lightness, ..)- Farb-Funktionen (invert, mix, grayscale, darken, ..)- eigene Funktionen (@function)...
  • Compass@mixin & @function Sammlung
  • Installation$ gem install compass$ compass create my_project$ cd my_project$ vim config.rb$ compass watchoder$ sass --compass --watch assets/sass:public/css
  • Cross Browser CSS3 Mixins● Appearance ● Filter● Background Clip ● Font Face● Background Origin ● Hyphenation● Background Size ● Images (Gradients)● Border Radius ● Inline Block● Box ● Opacity● Box Shadow ● CSS Regions● Box Sizing ● Text Shadow● Columns ● Transform ● Transition
  • Beispiel CSS3 Mixins SASS@import "compass".flash-message @include background(linear-gradient(#fff, #eee)) @include border-radius(5px) CSS.flash-message { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #eeeeee)); background: -webkit-linear-gradient(#ffffff, #eeeeee); background: -moz-linear-gradient(#ffffff, #eeeeee); background: -o-linear-gradient(#ffffff, #eeeeee); background: linear-gradient(#ffffff, #eeeeee); -webkit- border-radius: 5px; -moz-border-radius: 5px; -ms- border-radius: 5px; -o-border-radius: 5px; border- radius: 5px;}
  • Layout HelperGrid Background Grid als Seitenhintergrund mithilfe CSS3 GradientsSticky Footer Footer am SeitenendeStretching Dimensionen eines Divs auf das Elternelement ausweiten
  • UtilitiesReset (global, einzelne Resets (Font, body, ..)Cross Browser ClearfixCross Browser Floatshas-layout Hacks...
  • Sprites SASS@import "compass"@import "social/*.png"@include all-social-sprites CSS.icons-sprite, .icons-facebook, .icons-flickr, .icons-twitter, .icons-xing { background: url(/images/icons-s2d05e1e0af.png) no-repeat; }.icons-facebook { background-position: 0 -48px; }.icons-flickr { background-position: 0 -16px; }.icons-twitter { background-position: 0 -32px; }.icons-xing { background-position: 0 0; }
  • Informations● Sass - sass-lang.com● Sass Ruby on Rails Implementation github.com/rails/sass-rails● Compass - compass-style.org● Noch mehr Infos ○ 35 Great Resources for Compass and Sass ○ Sass & Compass: The future of stylesheets now ○ css2sass converter
  • PersonalStefan BauckmeierAKRA GmbHhttp://twitter.com/emroxhttp://trafex.dehttps://www.xing.com/profile/Stefan_Bauckmeier