Upload
emrox
View
125
Download
6
Tags:
Embed Size (px)
DESCRIPTION
Session Slides vom Barcamp Stuttgart 2012 #bcs5
Citation preview
schöneresCSS
mitSass & Compass
Sass
Install & Run
$ gem install sass
$ sass --watch style.sass:style.css$ sass --watch assets/sass:public/css
Basic Syntaxcss scss sass
Nesting
articleborder-top: 1px dashed #eeeheader
margin-bottom: 15pxheader, section
color: #eee
article { border-top: 1px dashed #eeeeee; }article header { margin-bottom: 15px; }article header, article section { color: #eeeeee; }
SASS
CSS
Parent Selector
articlecolor: #f00&:hover
color: #00f.special &
h1font-size: 2em
article { color: red; }article:hover { color: blue; }.special article h1 { font-size: 2em; }
SASS
CSS
@media
#contentmargin: 0 1.5em@media screen and (min-width: 1280px)
margin: 0 2.5em
#content { margin: 0 1.5em; }@media screen and (min-width: 1280px) {
#content { margin: 0 2.5em; }}
SASS
CSS
Variablen
$link-color: #e78a15$link-hover: #138a1e$link-size: 0.8em
acolor: $link-colorfont-size: $link-size&:hover
color: $link-hover
a { color: #e78a15; font-size: 0.8em; }a:hover { color: #138a1e; }
SASS
CSS
Weiterverwendung mit @extend
.buttonbackground-color: #00fcolor: #fffpadding: 2em 1.5em
.button-delete@extend .buttonbackground-color: #f00
.button, .button-delete { background-color: blue; color: white; padding: 2em 1.5em; }.button-delete { background-color: red; }
SASS
CSS
Vorlagen mit @mixin
@mixin hover-link text-decoration: none &:hover text-decoration: underline
article a @include hover-link
.nav a color: blue @include hover-link
article a { text-decoration: none; }article a:hover { text-decoration: underline; }
.nav a { color: blue; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
SASS
CSS
Funktionen mit @mixin
@mixin border-radius($amount)border-radius: $amount-mox-border-radius: $amount-webkit-border-radius: $amount
.alert@include border-radius(5px)
.alert { border-radius: 5px; -mox-border-radius: 5px; -webkit-border-radius: 5px;
}
SASS
CSS
benannte Argumente mit @mixin
@mixin flash-message($bgcolor:red, $hovercolor:blue)background-color: $bgcolor&:hover
background-color: $hovercolor
.alertbox@include flash-message($hovercolor: green)
.alertbox { background-color: red; }
.alertbox:hover { background-color: green; }
SASS
CSS
Import
/* screen.sass */@import "variables"@import "grid"@import "grid", "typography"
@media screen and (min-width: 480px)@import "phone"
#user@import "pages/user"
SASS
pages/_user.sass
screen.sass_variables.sass_grid.sass_typography.sass_phone.sass
etwas Mathematik
font-size: 18px - 5pxwidth: 200px * 3
Beispiel:
$layout-space: 10px$sidebar-width: 250px$page-width: 960px
#mainwidth: $page-width - $sidebar-width - (2 * $layout-space)
SASS
#main { width: 690px; }
CSS
Mathematische Funktionen
abs(-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 watch
oder
$ sass --compass --watch assets/sass:public/css
Cross Browser CSS3 Mixins
● Appearance● Background Clip● Background Origin● Background Size● Border Radius● Box● Box Shadow● Box Sizing● Columns
● Filter● Font Face● Hyphenation● Images (Gradients)● Inline Block● Opacity● CSS Regions● Text Shadow● Transform● Transition
Beispiel CSS3 Mixins
@import "compass".flash-message @include background(linear-gradient(#fff, #eee)) @include border-radius(5px)
.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;
}
SASS
CSS
Layout Helper
Grid BackgroundGrid als Seitenhintergrund mithilfe CSS3 Gradients
Sticky FooterFooter am Seitenende
StretchingDimensionen eines Divs auf das Elternelement ausweiten
Utilities
Reset (global, einzelne Resets (Font, body, ..)Cross Browser ClearfixCross Browser Floatshas-layout Hacks...
Sprites
@import "compass"
@import "social/*.png"
@include all-social-sprites
.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; }
SASS
CSS
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
Personal
Stefan BauckmeierAKRA GmbHhttp://twitter.com/emroxhttp://trafex.dehttps://www.xing.com/profile/Stefan_Bauckmeier