big frontends made simple
TRANSCRIPT
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
Installationgem install less
gem install?
try
http://www.ruby-lang.org/en/downloads/
first
sass style.sass style.css
css2sass style.css \style.sass
Runninglessc style.less
haml --rails your/app
Ruby on Railshttp://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.0till 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 Railsrails 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
Foldersapp 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 Namesscreen.sassbasics/_grid.sassbasics/_typography.sassbasics/_borders.sass
partials/_header.sasspartials/_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 Browsersul.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?
