SlideShare a Scribd company logo
Big Frontends
Made Simple
With Sass & Compass
{less} vs. Sass
Compass
Structuring Projects
Handling Browsers
http://sass-lang.org
http://github.com/nex3/haml
Combined with Haml
Overview
http://lesscss.org
https://github.com/cloudhead/less
Inspired by Sass
gem install haml
Installation
gem install less
gem install?
try
http://www.ruby-lang.org/en/downloads/
first
sass style.sass style.css
css2sass style.css 
style.sass
Running
lessc style.less
haml --rails your/app
Ruby on Rails
http://github.com/
cloudhead/more
.class div
:color blue
or:
.class div
color: blue
Syntax
.class div {
color: blue;
}
Result
.class div {
color: blue;
}
.class
:color blue
div
:color red
Cascading
.class {
color: blue;
div {
color: red;
}
}
Result
.class {
color: blue;
}
.class div {
color: red;
}
!pink = #c322bd
#pink
:color = !pink
:background red
Variables
@pink: #c322bd;
#pink {
color: @pink;
background: red;
}
Result
#pink {
color: #c322bd;
background: red;
}
=red-text
:color red
#important
:font-weight bold
+red-text
Mix-Ins (1)
.red-text {
color: red;
}
#important {
font-weight: bold;
.red-text;
}
Result
#important {
font-weight: bold;
color: red;
}
Mix-Ins (2)
.red-text(@color: red) {
color: @color;
}
#important {
font-weight: bold;
.red-text(green);
}
=red-text(!color = "red")
:color = !color
#important
:font-weight bold
+red-text("green")
Mix-Ins (3)
.red-text {
color: red;
a {
color: blue;
}
}
#important {
.red-text;
}
=red-text
:color red
a
:color blue
#important
+red-text
Mix-Ins (4)
.red-text(@color: red) {
color: @color;
a {
color: blue;
}
}
#important {
.red-text(green);
}
=red-text(!color = "red")
:color = !color
a
:color blue
#important
+red-text("green")
won’t work
with variables
Mix-Ins (5)
.hover-link {
text-decoration: none;
:hover {
text-d…: underline;
}
}
#important a {
.hover-link;
}
= hover-link
:text-decoration none
&:hover
:text-d… underline
#important a
+hover-link
height: 22px / 2;
color: #fff * 3;
background-position:
10px 30px / 2;
:height = 22px / 2
:color = #fff * 3
:background-position
= 10px 30px / 2
Math
won’t work as expected
=color(!x = 0)
@if !x < 0
:color red
@else
:color black
#colorful
+color(-1)
If Blocks
?
@for !i from 1 through 3
.number-#{!i}
:background =
"url(number-#{!i}.png)"
Loops
?
:width = percentage(100px / 50px)
:color = hsl(120, 100%, 50%)
:height = floor(21px / 2)
Functions (1)
?
!c1 = #a3b400
!c2 = #2300ae
!c3 = mix(!c1, !c2)
!c4 = mix(!c1, !c2, 30%)
!c5 = darken(!c1, 10%)
!c6 = desaturate(!c1, 5%)
!c7 = complement(!c1)
Functions (2)
? Sass 3.0
till then:
gem install compass-colors
· Good for developers
· Mix-ins just work
· Good for people who hate {, } and ;
— p. e. German keyboard users
· New features come out frequently
· Syntax changes frequently
· More complex syntax
· Annoying “=”
Overview
· Easy to learn
· Better syntax for variables
· Classes used as a mix-in won’t be
rendered (maybe confusing)
· Still complicated CSS syntax with
{, } and ;
· Problems with variables in mix-ins
· No consistent use of cascading
+
–
+
–
One more thing.
{less} vs. Sass
Compass
Structuring Projects
Handling Browsers
Compass
· Like Gems for Sass
· http://github.com/chriseppstein/
compass/
· gem install compass
Setup for Rails
rails app -m http://compass-style.org/rails/installer
rake rails:template LOCATION=http://compass-style.org/
rails/installer
===================================================
Welcome to the Compass Installer for Ruby on Rails!
===================================================
What CSS Framework do you want to use with Compass? (default: 'blueprint')
blueprint
Where would you like to keep your sass files within your project?
(default: 'app/stylesheets')
Where would you like Compass to store your compiled css files?
(default: 'public/stylesheets/compiled')
public/stylesheets
Project
Blueprint
Using Blueprint
!blueprint_grid_columns = 24
!blueprint_container_size = 950px
!blueprint_grid_margin = 10px
@import blueprint/modules/grid.sass
#teaser
+column(4)
How Does It Work?
Open the Gem
Extend It Yourself.
Own Gems
Overview
· Modular structure
· Mix different frameworks
· Uses only code needed (small CSS files)
· Easy to extend as Gem
· No silly formatting classes needed
(e. g. “.two-colums”)
{less} vs. Sass
Compass
Structuring Projects
Handling Browsers
Folders
app
stylesheets
basics
Grid, typography, colors, borders, common mix-ins
partials
Elements used on the side
plugins
External converted (css2sass) stylesheets (e. g. jQuery plugins)
File Names
screen.sass
basics/_grid.sass
basics/_typography.sass
basics/_borders.sass
partials/_header.sass
partials/_boxes.sass
plugins/_lightbox.sass
Files prefixed with underscore won’t be rendered
as CSS, but will be available for including.
Ex. moviepilot.de
Naming Conventions
· sample-class, sample_class or
sampleClass
· Dash case is preferred in CSS
· More important: be consistent
{less} vs. Sass
Compass
Structuring Projects
Handling Browsers
ie.css?
· You’ll just forget what you’ve done.
Browser Hacks?
ul.bad-styling
li
:padding 5px
:*padding-left 7px
Or Valid CSS?
ul.bad-styling
li
:padding 5px
.trident &
:padding-left 7px
Other Browsers
ul.bad-styling
li
:padding 5px
.trident &
:padding-left 7px
.webkit &
:color red
.gecko &
:display none
Set Browser Class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nico Hagenburger</title>
<link href="/stylesheets/screen.css?1264808640"
media="screen" rel="stylesheet" type="text/css">
</head>
<body class="webkit">
</body>
</html>
Overview
· Every browser fix is close to the normal
definition
· Works with Safari, Firefox and Opera
· Valid CSS
· Only one HTTP request
· No conditional comments needed
Any questions?
nico@hagenburger.nete-mail
twitter
blog
first name
last name

More Related Content

What's hot

CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
Rachel Andrew
 
Revolver
RevolverRevolver
Revolver
Michelle Lim
 
LESS(CSS preprocessor)
LESS(CSS preprocessor)LESS(CSS preprocessor)
LESS(CSS preprocessor)
VIPIN KUMAR
 
Scaling Rails Sites by default
Scaling Rails Sites by defaultScaling Rails Sites by default
Scaling Rails Sites by default
Yi-Ting Cheng
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
Wynn Netherland
 
Intro to CouchDB
Intro to CouchDBIntro to CouchDB
Intro to CouchDB
benaldred
 
LESS
LESSLESS
LESS
Joe Seifi
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!
Rachel Andrew
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
Wynn Netherland
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
Rachel Andrew
 
Traceur - Javascript.next - Now! RheinmainJS April 14th
Traceur - Javascript.next - Now! RheinmainJS April 14thTraceur - Javascript.next - Now! RheinmainJS April 14th
Traceur - Javascript.next - Now! RheinmainJS April 14th
Carsten Sandtner
 
Build your website with awestruct and publish it on the cloud with git
Build your website with awestruct and publish it on the cloud with gitBuild your website with awestruct and publish it on the cloud with git
Build your website with awestruct and publish it on the cloud with git
Xavier Coulon
 
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gemAccelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
Wynn Netherland
 
Introducing grunt, npm and sass
Introducing grunt, npm and sassIntroducing grunt, npm and sass
Introducing grunt, npm and sass
priyanka1452
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
Rob Davarnia
 
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
bentleyhoke
 
LESS CSS Pre-processor
LESS CSS Pre-processorLESS CSS Pre-processor
LESS CSS Pre-processor
Kannika Kong
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
Dirk Ginader
 

What's hot (20)

CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
Revolver
RevolverRevolver
Revolver
 
LESS(CSS preprocessor)
LESS(CSS preprocessor)LESS(CSS preprocessor)
LESS(CSS preprocessor)
 
Scaling Rails Sites by default
Scaling Rails Sites by defaultScaling Rails Sites by default
Scaling Rails Sites by default
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Intro to CouchDB
Intro to CouchDBIntro to CouchDB
Intro to CouchDB
 
LESS
LESSLESS
LESS
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
 
Traceur - Javascript.next - Now! RheinmainJS April 14th
Traceur - Javascript.next - Now! RheinmainJS April 14thTraceur - Javascript.next - Now! RheinmainJS April 14th
Traceur - Javascript.next - Now! RheinmainJS April 14th
 
Build your website with awestruct and publish it on the cloud with git
Build your website with awestruct and publish it on the cloud with gitBuild your website with awestruct and publish it on the cloud with git
Build your website with awestruct and publish it on the cloud with git
 
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gemAccelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
 
Introducing grunt, npm and sass
Introducing grunt, npm and sassIntroducing grunt, npm and sass
Introducing grunt, npm and sass
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
 
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
 
LESS CSS Pre-processor
LESS CSS Pre-processorLESS CSS Pre-processor
LESS CSS Pre-processor
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
 

Similar to Big Frontends Made Simple

Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compass
Chris Lee
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
Mediacurrent
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
chriseppstein
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
Steve Krueger
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
kavi806657
 
SASS Preprocessor
SASS PreprocessorSASS Preprocessor
SASS Preprocessor
Webkul Software Pvt. Ltd.
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
Suzette Franck
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
Sven Wolfermann
 
LESS CSS
LESS CSSLESS CSS
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Acquia
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozók
Máté Farkas
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
Amey Parab
 
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
 
Magento RWD is Awesome
Magento RWD is AwesomeMagento RWD is Awesome
Magento RWD is Awesome
Pradhap Loganathan
 
Magento RWD is Awesome
Magento RWD is AwesomeMagento RWD is Awesome
Magento RWD is Awesome
Pradhap Loganathan
 
Sass: Introduction
Sass: IntroductionSass: Introduction
Sass: Introduction
BalaKrishna Kolliboina
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Marco Pinheiro
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
Itai Koren
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Claudina Sarahe
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshop
Shaho Toofani
 

Similar to Big Frontends Made Simple (20)

Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compass
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
SASS Preprocessor
SASS PreprocessorSASS Preprocessor
SASS Preprocessor
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
 
LESS CSS
LESS CSSLESS CSS
LESS CSS
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozók
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
 
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)
 
Magento RWD is Awesome
Magento RWD is AwesomeMagento RWD is Awesome
Magento RWD is Awesome
 
Magento RWD is Awesome
Magento RWD is AwesomeMagento RWD is Awesome
Magento RWD is Awesome
 
Sass: Introduction
Sass: IntroductionSass: Introduction
Sass: Introduction
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshop
 

Big Frontends Made Simple