SlideShare una empresa de Scribd logo

Big Frontends Made Simple

1 de 51
Descargar para leer sin conexión
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

Recomendados

3 Steps to Make Better & Faster Frontends
3 Steps to Make Better & Faster Frontends3 Steps to Make Better & Faster Frontends
3 Steps to Make Better & Faster FrontendsNico Hagenburger
 
3 ways-to-create-sprites-in-rails
3 ways-to-create-sprites-in-rails3 ways-to-create-sprites-in-rails
3 ways-to-create-sprites-in-railsNico Hagenburger
 
Rapid Prototyping FTW!!!
Rapid Prototyping FTW!!!Rapid Prototyping FTW!!!
Rapid Prototyping FTW!!!cloudbring
 
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingCSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingJames Cryer
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.Eugene Nor
 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)Folio3 Software
 
Eye Candy Without Images: Fun With CSS3
Eye Candy Without Images: Fun With CSS3Eye Candy Without Images: Fun With CSS3
Eye Candy Without Images: Fun With CSS3Shoshi Roberts
 

Más contenido relacionado

La actualidad más candente

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 defaultYi-Ting Cheng
 
Intro to CouchDB
Intro to CouchDBIntro to CouchDB
Intro to CouchDBbenaldred
 
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 IVDirk Ginader
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersRachel 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 14thCarsten 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 gitXavier 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 gemWynn Netherland
 
Introducing grunt, npm and sass
Introducing grunt, npm and sassIntroducing grunt, npm and sass
Introducing grunt, npm and sasspriyanka1452
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & CompassRob 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-processorKannika 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 toolsDirk Ginader
 

La actualidad más candente (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 a 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-compassChris 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 SassMediacurrent
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSSteve Krueger
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersSuzette Franck
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with SassSven Wolfermann
 
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 ThemeAcquia
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozókMáté Farkas
 
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Tahmina Khatoon
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai 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 CompassClaudina Sarahe
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshopShaho Toofani
 
Jina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web InterfacesJina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web InterfacesDevConFu
 

Similar a 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
 
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
 
Jina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web InterfacesJina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web Interfaces
 

Big Frontends Made Simple