Sass & Compass (Barcamp Stuttgart 2012)
-
Upload
emrox -
Category
Technology
-
view
126 -
download
6
description
Transcript of Sass & Compass (Barcamp Stuttgart 2012)
![Page 1: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/1.jpg)
![Page 2: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/2.jpg)
schöneresCSS
mitSass & Compass
![Page 3: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/3.jpg)
Sass
![Page 4: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/4.jpg)
Install & Run
$ gem install sass
$ sass --watch style.sass:style.css$ sass --watch assets/sass:public/css
![Page 5: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/5.jpg)
Basic Syntaxcss scss sass
![Page 6: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/6.jpg)
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
![Page 7: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/7.jpg)
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
![Page 8: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/8.jpg)
@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
![Page 9: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/9.jpg)
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
![Page 10: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/10.jpg)
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
![Page 11: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/11.jpg)
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
![Page 12: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/12.jpg)
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
![Page 13: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/13.jpg)
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
![Page 14: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/14.jpg)
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
![Page 15: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/15.jpg)
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
![Page 16: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/16.jpg)
Mathematische Funktionen
abs(-43) // => 43floor(3.9) // => 3ceil(3.2) // => 4round(2.8) // => 3percentage(13/25) // => 52%
![Page 17: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/17.jpg)
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)...
![Page 18: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/18.jpg)
Compass
@mixin & @function Sammlung
![Page 19: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/19.jpg)
Installation
$ gem install compass
$ compass create my_project$ cd my_project$ vim config.rb$ compass watch
oder
$ sass --compass --watch assets/sass:public/css
![Page 20: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/20.jpg)
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
![Page 21: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/21.jpg)
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
![Page 22: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/22.jpg)
Layout Helper
Grid BackgroundGrid als Seitenhintergrund mithilfe CSS3 Gradients
Sticky FooterFooter am Seitenende
StretchingDimensionen eines Divs auf das Elternelement ausweiten
![Page 23: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/23.jpg)
Utilities
Reset (global, einzelne Resets (Font, body, ..)Cross Browser ClearfixCross Browser Floatshas-layout Hacks...
![Page 24: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/24.jpg)
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
![Page 25: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/25.jpg)
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
![Page 26: Sass & Compass (Barcamp Stuttgart 2012)](https://reader030.fdocuments.us/reader030/viewer/2022020717/54c79ef04a7959b5408b4571/html5/thumbnails/26.jpg)
Personal
Stefan BauckmeierAKRA GmbHhttp://twitter.com/emroxhttp://trafex.dehttps://www.xing.com/profile/Stefan_Bauckmeier