SlideShare a Scribd company logo
Sass
        :
   CSS




                                                                             011
                                                            ign
       w           ith A




                                                              s
                        ttitu




                                                                  Berlin

                                                                                2
                                                        al De
                              de




                                                                           June
                                                      Drup
                                                             Camp

                                                                         6
                                                                     25+2
                                                   John
                                                        Albin W
                                                   @Joh             ilkins
                                                       nAlbi
http:/                                                        n
      /www
          .flickr
                .com
                    /phot
                          os/phil
                                 yfn/5
                                      5627
                                          5594
                                              3/
Why does CSS suck?
Why does CSS suck?

★ Redundancy
Why does CSS suck?

★ Redundancy
★ #block-menu-block-main-menu-level-tertiary .content a:link {}
     #block-menu-block-main-menu-level-tertiary .content a:visited {}
     #block-menu-block-main-menu-level-tertiary .content a:hover,
     #block-menu-block-main-menu-level-tertiary .content a:focus {}
Why does CSS suck?

★ Redundancy
★ #block-menu-block-main-menu-level-tertiary .content a:link {}
     #block-menu-block-main-menu-level-tertiary .content a:visited {}
     #block-menu-block-main-menu-level-tertiary .content a:hover,
     #block-menu-block-main-menu-level-tertiary .content a:focus {}



★ Redundancy
Why does CSS suck?

★ Redundancy
★ #block-menu-block-main-menu-level-tertiary .content a:link {}
     #block-menu-block-main-menu-level-tertiary .content a:visited {}
     #block-menu-block-main-menu-level-tertiary .content a:hover,
     #block-menu-block-main-menu-level-tertiary .content a:focus {}



★ Redundancy
★ a { color: #cff; }
     .box { border-color: #cff; }
Why does CSS suck?

★ Redundancy
★ #block-menu-block-main-menu-level-tertiary .content a:link {}
     #block-menu-block-main-menu-level-tertiary .content a:visited {}
     #block-menu-block-main-menu-level-tertiary .content a:hover,
     #block-menu-block-main-menu-level-tertiary .content a:focus {}



★ Redundancy
★ a { color: #cff; }
     .box { border-color: #cff; }



★ Redundancy
Why does CSS suck?

★ Redundancy
★ #block-menu-block-main-menu-level-tertiary .content a:link {}
     #block-menu-block-main-menu-level-tertiary .content a:visited {}
     #block-menu-block-main-menu-level-tertiary .content a:hover,
     #block-menu-block-main-menu-level-tertiary .content a:focus {}



★ Redundancy
★ a { color: #cff; }
     .box { border-color: #cff; }



★ Redundancy
     .box {
       -webkit-box-shadow: 1px 1px 10px 3px #ccc;
Why does CSS suck?

★ Redundancy
★ #block-menu-block-main-menu-level-tertiary .content a:link {}
     #block-menu-block-main-menu-level-tertiary .content a:visited {}
     #block-menu-block-main-menu-level-tertiary .content a:hover,
     #block-menu-block-main-menu-level-tertiary .content a:focus {}



★ Redundancy
★ a { color: #cff; }
     .box { border-color: #cff; }



★ Redundancy
     .box {
       -webkit-box-shadow: 1px 1px 10px 3px #ccc;
       -moz-box-shadow: 1px 1px 10px 3px #ccc;
Why does CSS suck?

★ Redundancy
★ #block-menu-block-main-menu-level-tertiary .content a:link {}
     #block-menu-block-main-menu-level-tertiary .content a:visited {}
     #block-menu-block-main-menu-level-tertiary .content a:hover,
     #block-menu-block-main-menu-level-tertiary .content a:focus {}



★ Redundancy
★ a { color: #cff; }
     .box { border-color: #cff; }



★ Redundancy
     .box {
       -webkit-box-shadow: 1px 1px 10px 3px #ccc;
       -moz-box-shadow: 1px 1px 10px 3px #ccc;
       box-shadow: 1px 1px 10px 3px #ccc;
     }
Sass sucks less
Sass sucks less

★ Sass is easy to learn:
  It is CSS + goodies
Sass sucks less

★ Sass is easy to learn:
  It is CSS + goodies


★ Browsers don’t understand sass
Sass sucks less

★ Sass is easy to learn:
  It is CSS + goodies


★ Browsers don’t understand sass



★ Sass is compiled
.empty-rules {}
// and comments
.empty-rules {}
  // and comments

★ // Comments are not in rendered CSS
.empty-rules {}
  // and comments

★ // Comments are not in rendered CSS



★ /* Comments _are_ in rendered CSS */
.empty-rules {}
  // and comments

★ // Comments are not in rendered CSS



★ /* Comments _are_ in rendered CSS */



★ .empty-rulesets {} // Not included.
nested { rules }
nested { rules }
★ .block {
      font-size: 12px;

      h2 {
        font-size: 18px; // Hell, yeah!
      }
  }
nested { rules }
★ .block {
      font-size: 12px;

      h2 {
        font-size: 18px; // Hell, yeah!
      }
  }


★ .block { font-size: 12px; }
  .block h2 { font-size: 20px; }
nested { rules }
nested { rules }

★   #block-menu-block-main-menu-level-tertiary   .content   a:link {}
    #block-menu-block-main-menu-level-tertiary   .content   a:visited {}
    #block-menu-block-main-menu-level-tertiary   .content   a:hover,
    #block-menu-block-main-menu-level-tertiary   .content   a:focus {}
nested { rules }

★   #block-menu-block-main-menu-level-tertiary   .content   a:link {}
    #block-menu-block-main-menu-level-tertiary   .content   a:visited {}
    #block-menu-block-main-menu-level-tertiary   .content   a:hover,
    #block-menu-block-main-menu-level-tertiary   .content   a:focus {}




★   #block-menu-block-main-menu-level-tertiary .content {
      a:link {}
      a:visited {}
      a:hover,
      a:focus {}
    }
nested { rules }

★   #block-menu-block-main-menu-level-tertiary   .content   a:link {}
    #block-menu-block-main-menu-level-tertiary   .content   a:visited {}
    #block-menu-block-main-menu-level-tertiary   .content   a:hover,
    #block-menu-block-main-menu-level-tertiary   .content   a:focus {}




★   #block-menu-block-main-menu-level-tertiary .content {
      a:link {}
      a:visited {}
      a:hover,
      a:focus {}
    }
nested { rules }
nested { rules }
★   .block {
      margin-bottom: 1.5em;

        &.last { // Last block in region
          margin-bottom: 0;
        }
        .body-class & {
          margin-bottom: 2em;
        }
    }
nested { rules }
★   .block {
      margin-bottom: 1.5em;

        &.last { // Last block in region
          margin-bottom: 0;
        }
        .body-class & {
          margin-bottom: 2em;
        }
    }


★   .block { margin-bottom: 1.5em; }
    .block.last { margin-bottom: 0; }
    .body-class .block { margin-bottom: 2em; }
nested-properties
nested-properties

★ border: 2px solid #333;
  border-left: 1px dotted #ccc;
nested-properties

★ border: 2px solid #333;
  border-left: 1px dotted #ccc;


★ border: 2px solid #333 {
      left: 1px dotted #ccc; // border-left
      top {
        width: 1px; // border-top-width
      }
  }
$variables
$variables



★ $blue: #3bbfce;
  $default-font: Georgia, "Times New Roman",
  "DejaVu Serif", serif;
Math * 2
Math * 2



★ $grid-width: 960px / 8;
Math * 2



★ $grid-width: 960px / 8;



★ Any of these: + - * / %
functions()
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
functions()
  http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html




★ RGB functions
  rgb(), rgba(), mix()
functions()
  http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html




★ RGB functions
  rgb(), rgba(), mix()

★ HSL functions
  hsla(), lighten(), darken(), desaturate()
functions()
  http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html




★ RGB functions
  rgb(), rgba(), mix()

★ HSL functions
  hsla(), lighten(), darken(), desaturate()

★ Opacity functions
  opacify(), transparentize()
functions()
  http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html




★ RGB functions
  rgb(), rgba(), mix()

★ HSL functions
  hsla(), lighten(), darken(), desaturate()

★ Opacity functions
  opacify(), transparentize()

★ Make your own!                  ponycorn()
_Partials
_Partials

★ Shared resources for your project.
_Partials

★ Shared resources for your project.



★ Name them with an underscore.
  Include them without an underscore.
_Partials

★ Shared resources for your project.



★ Name them with an underscore.
  Include them without an underscore.


★ @include “partial”;
@ mixins
@ mixins



★ #main {
      @include element-invisible;
  }
compile / watch
compile / watch



★ sass sass/style.scss css/style.css
compile / watch



★ sass sass/style.scss css/style.css



★ sass --watch sass:css
FireSass
FireSass




★ sass --debug-info --watch sass:css
Compass
Compass



★ package manager
Compass



★ package manager



★ frameworks/groups of pre-built functionality
compass watch
compass watch



★ The magic is in config.rb
compass watch



★ The magic is in config.rb



★ compass watch .
More Awesome
More Awesome


★ Sass: http://sass-lang.com
More Awesome


★ Sass: http://sass-lang.com



★ Compass: http://compass-style.org
More Awesome


★ Sass: http://sass-lang.com



★ Compass: http://compass-style.org



★ Zen 7.x-5.x

More Related Content

Viewers also liked

Word List 5
Word List 5Word List 5
Word List 5room8kk
 
Teamwork Rat
Teamwork RatTeamwork Rat
Teamwork Ratlegedug
 
Mobile drupal: building a mobile theme
Mobile drupal: building a mobile themeMobile drupal: building a mobile theme
Mobile drupal: building a mobile theme
John Albin Wilkins
 
Word List 2
Word List 2Word List 2
Word List 2room8kk
 
Word List 1
Word List 1Word List 1
Word List 1room8kk
 
Word List 4
Word List 4Word List 4
Word List 4room8kk
 
Voicethread Presentation
Voicethread PresentationVoicethread Presentation
Voicethread Presentationroom8kk
 
U learn 2010
U learn 2010U learn 2010
U learn 2010room8kk
 
Promo for ulearn 2011
Promo for ulearn 2011Promo for ulearn 2011
Promo for ulearn 2011room8kk
 
Our Iceberg Is Melting
Our Iceberg Is MeltingOur Iceberg Is Melting
Our Iceberg Is Melting
legedug
 
FiloDB - Breakthrough OLAP Performance with Cassandra and Spark
FiloDB - Breakthrough OLAP Performance with Cassandra and SparkFiloDB - Breakthrough OLAP Performance with Cassandra and Spark
FiloDB - Breakthrough OLAP Performance with Cassandra and Spark
Evan Chan
 

Viewers also liked (11)

Word List 5
Word List 5Word List 5
Word List 5
 
Teamwork Rat
Teamwork RatTeamwork Rat
Teamwork Rat
 
Mobile drupal: building a mobile theme
Mobile drupal: building a mobile themeMobile drupal: building a mobile theme
Mobile drupal: building a mobile theme
 
Word List 2
Word List 2Word List 2
Word List 2
 
Word List 1
Word List 1Word List 1
Word List 1
 
Word List 4
Word List 4Word List 4
Word List 4
 
Voicethread Presentation
Voicethread PresentationVoicethread Presentation
Voicethread Presentation
 
U learn 2010
U learn 2010U learn 2010
U learn 2010
 
Promo for ulearn 2011
Promo for ulearn 2011Promo for ulearn 2011
Promo for ulearn 2011
 
Our Iceberg Is Melting
Our Iceberg Is MeltingOur Iceberg Is Melting
Our Iceberg Is Melting
 
FiloDB - Breakthrough OLAP Performance with Cassandra and Spark
FiloDB - Breakthrough OLAP Performance with Cassandra and SparkFiloDB - Breakthrough OLAP Performance with Cassandra and Spark
FiloDB - Breakthrough OLAP Performance with Cassandra and Spark
 

Similar to Sass: CSS with Attitude

LESS
LESSLESS
LESS
Joe Seifi
 
The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)
Peter Gasston
 
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
Koji Ishimoto
 
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
Peter Gasston
 
The Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsThe Home of the Future: CSS Layouts
The Home of the Future: CSS Layouts
Peter Gasston
 
[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpuNAVER D2
 
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
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
Zoe Gillenwater
 
Sass&compass
Sass&compassSass&compass
Sass&compass
Min Jun Kim
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
Nicole Sullivan
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsKaelig Deloumeau-Prigent
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
Rob Davarnia
 
From CSS to Sass in WordPress
From CSS to Sass in WordPressFrom CSS to Sass in WordPress
From CSS to Sass in WordPress
James Steinbach
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Marco Pinheiro
 
Composer, putting dependencies on the score
Composer, putting dependencies on the scoreComposer, putting dependencies on the score
Composer, putting dependencies on the score
Rafael Dohms
 
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.comA brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
applicake
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP Conference
Rachel Andrew
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)Christopher Schmitt
 

Similar to Sass: CSS with Attitude (20)

LESS
LESSLESS
LESS
 
The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)
 
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
 
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
 
The Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsThe Home of the Future: CSS Layouts
The Home of the Future: CSS Layouts
 
[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu
 
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
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
 
Sass&compass
Sass&compassSass&compass
Sass&compass
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
 
Css3
Css3Css3
Css3
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
 
From CSS to Sass in WordPress
From CSS to Sass in WordPressFrom CSS to Sass in WordPress
From CSS to Sass in WordPress
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Composer, putting dependencies on the score
Composer, putting dependencies on the scoreComposer, putting dependencies on the score
Composer, putting dependencies on the score
 
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.comA brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP Conference
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)
 

More from John Albin Wilkins

Using the CSS Nesting Spec Today
Using the CSS Nesting Spec TodayUsing the CSS Nesting Spec Today
Using the CSS Nesting Spec Today
John Albin Wilkins
 
The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9
John Albin Wilkins
 
Mastering Drupal 8’s Twig
Mastering Drupal 8’s TwigMastering Drupal 8’s Twig
Mastering Drupal 8’s Twig
John Albin Wilkins
 
CSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component designCSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component design
John Albin Wilkins
 
Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!
John Albin Wilkins
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web Development
John Albin Wilkins
 
Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014
John Albin Wilkins
 
DrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design ComponentsDrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design Components
John Albin Wilkins
 
SassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design ComponentsSassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design Components
John Albin Wilkins
 
Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)
John Albin Wilkins
 
Mastering zen
Mastering zenMastering zen
Mastering zen
John Albin Wilkins
 
Drupal and the Future of the Web
Drupal and the Future of the WebDrupal and the Future of the Web
Drupal and the Future of the Web
John Albin Wilkins
 
What's new in D7 Theming?
What's new in D7 Theming?What's new in D7 Theming?
What's new in D7 Theming?
John Albin Wilkins
 
Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...
John Albin Wilkins
 
Rocking the Theme Layer
Rocking the Theme LayerRocking the Theme Layer
Rocking the Theme Layer
John Albin Wilkins
 
Drupal Design Tips
Drupal Design TipsDrupal Design Tips
Drupal Design Tips
John Albin Wilkins
 
New Adventures in Drupal Theming
New Adventures in Drupal ThemingNew Adventures in Drupal Theming
New Adventures in Drupal Theming
John Albin Wilkins
 
Nanocon Taiwan
Nanocon TaiwanNanocon Taiwan
Nanocon Taiwan
John Albin Wilkins
 
Making Drupal Dance: Techniques for Non-obvious Theme Manipulations
Making Drupal Dance: Techniques for Non-obvious Theme ManipulationsMaking Drupal Dance: Techniques for Non-obvious Theme Manipulations
Making Drupal Dance: Techniques for Non-obvious Theme Manipulations
John Albin Wilkins
 

More from John Albin Wilkins (20)

Using the CSS Nesting Spec Today
Using the CSS Nesting Spec TodayUsing the CSS Nesting Spec Today
Using the CSS Nesting Spec Today
 
The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9
 
Mastering Drupal 8’s Twig
Mastering Drupal 8’s TwigMastering Drupal 8’s Twig
Mastering Drupal 8’s Twig
 
CSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component designCSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component design
 
Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web Development
 
Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014
 
DrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design ComponentsDrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design Components
 
SassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design ComponentsSassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design Components
 
Drupal Camp Taipei Keynote
Drupal Camp Taipei KeynoteDrupal Camp Taipei Keynote
Drupal Camp Taipei Keynote
 
Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)
 
Mastering zen
Mastering zenMastering zen
Mastering zen
 
Drupal and the Future of the Web
Drupal and the Future of the WebDrupal and the Future of the Web
Drupal and the Future of the Web
 
What's new in D7 Theming?
What's new in D7 Theming?What's new in D7 Theming?
What's new in D7 Theming?
 
Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...
 
Rocking the Theme Layer
Rocking the Theme LayerRocking the Theme Layer
Rocking the Theme Layer
 
Drupal Design Tips
Drupal Design TipsDrupal Design Tips
Drupal Design Tips
 
New Adventures in Drupal Theming
New Adventures in Drupal ThemingNew Adventures in Drupal Theming
New Adventures in Drupal Theming
 
Nanocon Taiwan
Nanocon TaiwanNanocon Taiwan
Nanocon Taiwan
 
Making Drupal Dance: Techniques for Non-obvious Theme Manipulations
Making Drupal Dance: Techniques for Non-obvious Theme ManipulationsMaking Drupal Dance: Techniques for Non-obvious Theme Manipulations
Making Drupal Dance: Techniques for Non-obvious Theme Manipulations
 

Recently uploaded

Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
Globus
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
UiPathCommunity
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIs
Vlad Stirbu
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
UiPathCommunity
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
Alex Pruden
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
Peter Spielvogel
 
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
Jen Stirrup
 

Recently uploaded (20)

Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIs
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
 
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...The Metaverse and AI: how can decision-makers harness the Metaverse for their...
The Metaverse and AI: how can decision-makers harness the Metaverse for their...
 

Sass: CSS with Attitude

  • 1. Sass : CSS 011 ign w ith A s ttitu Berlin 2 al De de June Drup Camp 6 25+2 John Albin W @Joh ilkins nAlbi http:/ n /www .flickr .com /phot os/phil yfn/5 5627 5594 3/
  • 2. Why does CSS suck?
  • 3. Why does CSS suck? ★ Redundancy
  • 4. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}
  • 5. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy
  • 6. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy ★ a { color: #cff; } .box { border-color: #cff; }
  • 7. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy ★ a { color: #cff; } .box { border-color: #cff; } ★ Redundancy
  • 8. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy ★ a { color: #cff; } .box { border-color: #cff; } ★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc;
  • 9. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy ★ a { color: #cff; } .box { border-color: #cff; } ★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc; -moz-box-shadow: 1px 1px 10px 3px #ccc;
  • 10. Why does CSS suck? ★ Redundancy ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ Redundancy ★ a { color: #cff; } .box { border-color: #cff; } ★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc; -moz-box-shadow: 1px 1px 10px 3px #ccc; box-shadow: 1px 1px 10px 3px #ccc; }
  • 12. Sass sucks less ★ Sass is easy to learn: It is CSS + goodies
  • 13. Sass sucks less ★ Sass is easy to learn: It is CSS + goodies ★ Browsers don’t understand sass
  • 14. Sass sucks less ★ Sass is easy to learn: It is CSS + goodies ★ Browsers don’t understand sass ★ Sass is compiled
  • 16. .empty-rules {} // and comments ★ // Comments are not in rendered CSS
  • 17. .empty-rules {} // and comments ★ // Comments are not in rendered CSS ★ /* Comments _are_ in rendered CSS */
  • 18. .empty-rules {} // and comments ★ // Comments are not in rendered CSS ★ /* Comments _are_ in rendered CSS */ ★ .empty-rulesets {} // Not included.
  • 20. nested { rules } ★ .block { font-size: 12px; h2 { font-size: 18px; // Hell, yeah! } }
  • 21. nested { rules } ★ .block { font-size: 12px; h2 { font-size: 18px; // Hell, yeah! } } ★ .block { font-size: 12px; } .block h2 { font-size: 20px; }
  • 23. nested { rules } ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}
  • 24. nested { rules } ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ #block-menu-block-main-menu-level-tertiary .content { a:link {} a:visited {} a:hover, a:focus {} }
  • 25. nested { rules } ★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {} ★ #block-menu-block-main-menu-level-tertiary .content { a:link {} a:visited {} a:hover, a:focus {} }
  • 27. nested { rules } ★ .block { margin-bottom: 1.5em; &.last { // Last block in region margin-bottom: 0; } .body-class & { margin-bottom: 2em; } }
  • 28. nested { rules } ★ .block { margin-bottom: 1.5em; &.last { // Last block in region margin-bottom: 0; } .body-class & { margin-bottom: 2em; } } ★ .block { margin-bottom: 1.5em; } .block.last { margin-bottom: 0; } .body-class .block { margin-bottom: 2em; }
  • 30. nested-properties ★ border: 2px solid #333; border-left: 1px dotted #ccc;
  • 31. nested-properties ★ border: 2px solid #333; border-left: 1px dotted #ccc; ★ border: 2px solid #333 { left: 1px dotted #ccc; // border-left top { width: 1px; // border-top-width } }
  • 33. $variables ★ $blue: #3bbfce; $default-font: Georgia, "Times New Roman", "DejaVu Serif", serif;
  • 35. Math * 2 ★ $grid-width: 960px / 8;
  • 36. Math * 2 ★ $grid-width: 960px / 8; ★ Any of these: + - * / %
  • 39. functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html ★ RGB functions rgb(), rgba(), mix() ★ HSL functions hsla(), lighten(), darken(), desaturate()
  • 40. functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html ★ RGB functions rgb(), rgba(), mix() ★ HSL functions hsla(), lighten(), darken(), desaturate() ★ Opacity functions opacify(), transparentize()
  • 41. functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html ★ RGB functions rgb(), rgba(), mix() ★ HSL functions hsla(), lighten(), darken(), desaturate() ★ Opacity functions opacify(), transparentize() ★ Make your own! ponycorn()
  • 43. _Partials ★ Shared resources for your project.
  • 44. _Partials ★ Shared resources for your project. ★ Name them with an underscore. Include them without an underscore.
  • 45. _Partials ★ Shared resources for your project. ★ Name them with an underscore. Include them without an underscore. ★ @include “partial”;
  • 47. @ mixins ★ #main { @include element-invisible; }
  • 49. compile / watch ★ sass sass/style.scss css/style.css
  • 50. compile / watch ★ sass sass/style.scss css/style.css ★ sass --watch sass:css
  • 52. FireSass ★ sass --debug-info --watch sass:css
  • 55. Compass ★ package manager ★ frameworks/groups of pre-built functionality
  • 57. compass watch ★ The magic is in config.rb
  • 58. compass watch ★ The magic is in config.rb ★ compass watch .
  • 60. More Awesome ★ Sass: http://sass-lang.com
  • 61. More Awesome ★ Sass: http://sass-lang.com ★ Compass: http://compass-style.org
  • 62. More Awesome ★ Sass: http://sass-lang.com ★ Compass: http://compass-style.org ★ Zen 7.x-5.x

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n