CSS Extenders by tuanh11

VIEWS: 59 PAGES: 52

More Info
									Intro to CSS Extenders:

SASS

LESS

Bonus: Compass Framework


PyWeb-IL #22 / 27 Dec 2010   http://flic.kr/p/768ooD
This frontend dude maintains…

a production site with lots of CSS

a heavy drinking habit

a growing hatred for humanity




                                     http://flic.kr/p/5cCATU
   CSS can be annoying.
Here are some workarounds
   that might make you


    SMILE
CSS ANNOYANCES
     variables

    class mixins

    rule nesting

       math
   CSS Extenders
CSS Preprocessors is a crappy name.
srsly? at pyweb?
  (please don’t shoot me)
  SASS          LESS
sass-lang.com   lesscss.org
                CleverCSS
very similar • not as mature • not actively developed
 variables      variables
class mixins   class mixins
rule nesting   rule nesting
   math           math
                      DSL is for
                       losers.




CleverCSS     SASS                 LESS




        DSL          CSS Superset
               Yeah, um,
              what he said…




CleverCSS                      SASS     LESS
                              (.scss)



        DSL                   CSS Superset
INSTALLING
gem install haml   gem install less

     .scss              .less

    DSL: .sass
VARIABLES & OPERATIONS
$mycolor: #ddeeff;                  @mycolor: #ddeeff;
$myborder: 3px;                    @myborder: 3px;

#mynav {                           #mynav {
  background-color: $mycolor;        background-color: @mycolor;
  color: $mycolor + #111;            color: @mycolor + #111;
}                                  }

.hasborder {                       .hasborder {
  border: $myborder solid black;     border: @myborder solid black;
  padding: $myborder * 4;            padding: @myborder * 4;
}                                  }
  Basic Color Math       Basic Color Math
  $mycolor + #111        @mycolor + #111

 Fancy color functions
lighten($mycolor, 20%)

  Advantage: SASS
MIXINS
@mixin sidebar {            .sidebar {
  font-size: 14px;             font-size: 14px;
  background-color: #ddd;      background-color: #ddd;
  width: 100px;                width: 100px
}                           }

.sidebar_right {            .sidebar_right {
   @include sidebar;           .sidebar;
   float: right;                float: right;
}                           }

.sidebar_left {             .sidebar_left {
   @include sidebar;           .sidebar;
   float: left;                 float: left;
}                           }
@mixin sidebar($width: 100px) {   .sidebar(@width: 100px) {
  font-size: 14px;                   font-size: 14px;
  background-color: #ddd;            background-color: #ddd;
  width: $width;                     width: @width;
}                                 }

.sidebar_right {                  .sidebar_right {
   @include sidebar;                 .sidebar;
   float: right;                      float: right;
}                                 }

.sidebar_right_wide {             .sidebar_right_wide {
   @include sidebar(150px);          .sidebar(150px);
   float: right;                      float: right;
}                                 }
NESTED RULES
#header {
  color: green;
}

#header a {
  text-decoration: none;
  color: red;
}
#header
#header a
#header ul
#header ul li
#header ul li strong
#content a
#content ul
…
#FML
#header {                    #header {
  color: green;                color: green;
  a{                           a{
    text-decoration: none;       text-decoration: none;
    color: red;                  color: red;
  }                            }
  a.special {                  a.special {
    font-weight: bold;           font-weight: bold;
    color: blue;                 color: blue;
  }                            }
}                            }
#header {
  color: green;
  border: {
    width: 1px;
    color: black;
    style: solid;
  }
}




                    ?
INHERITANCE
.error {
   color: red;
}

.error.severe {
   @extend .error;
   font-weight: bold;
}




                   ?
INCLUDES
/* _mysnippet.scss */   /* mysnippet.less */
…                       …

/* style.scss */        /* style.less */
@import “mysnippet”     @import “mysnippet”
            Rope!
enough for you to hang yourself with.
USAGE & DEPLOYMENT
sass style.scss:style.css     lessc style.less

sass srcdir/sass:srcdir/css
sass style.scss:style.css             lessc style.less

sass srcdir/sass:srcdir/css


sass --watch style.scss:style.css     lessc style.less --watch

sass --watch srcdir/sass:srcdir/css
 More functionality      Less functionality

More documentation     Less documentation

Took ideas from LESS   Took ideas from SASS

  Core is the same       Core is the same
 More functionality      Less functionality

More documentation     Less documentation

Took ideas from LESS   Took ideas from SASS

  Core is the same       Core is the same
A CSS Authoring Framework
      based on SASS
       http://compass-style.org
       but really, you should see
     http://beta.compass-style.org
 Like Django for CSS
extensible, best-practice implementations
     that you don’t need to reinvent
      Installing
     gem install compass
compass create /path/to/project
         _BASE.SCSS
$brand_color: #acd29f;
$base_font_size: 16px;

@import “compass/reset”;
@import “compass/utilities”;

…
          MYAPP.CSS
@import “base”;

/* your sassy styles go here. */
            DEJA VU?
{% extends “base.html” %}

<!-- your markup goes here. -->
END PRESENTATIONAL MARKUP

<body id=“blog-detail”>
   <article class=“wrap”>
      <header class=“grid-12”>…</header>
      <div class=“grid-8” id=“content”>…</div>
      <aside class=“grid-4” id>…</aside>
      <footer class=“grid-12”>…</footer>
   </article>
</body>
END PRESENTATIONAL MARKUP

@import “blueprint”

@mixin two-column {
  /* two-col layout on a 12-col grid */
  article {
      @include container;
      header, footer { @include column(12); }
      aside { @include column(4); }
      .content { @include column(8); }
  }
}

body#blog-detail,
body#blog-list { @include two-column; }
END PRESENTATIONAL MARKUP
 <body id=“blog-detail”>
    <article class=“wrap”>
       <header class=“grid-12”>…</header>
       <div class=“grid-8” id=“content”>…</div>
       <aside class=“grid-4” id>…</aside>
       <footer class=“grid-12”>…</footer>
    </article>
 </body>

 <body id=“blog-detail”>
    <article>
       <header>…</header>
       <div id=“content”>…</div>
       <aside>…</aside>
       <footer>…</footer>
    </article>
 </body>
      COST: LARGER CSS
Generated CSS

body#blog-detail article { /* wrap styles copied here */ }

body#blog-detail article header,
body#blog-detail article footer { /* grid-12 styles copied here */}

body #blog-detail article aside { /* grid-4 styles copied here */ }
VENDOR PREFIX HELL
@import “compass/css3”
.alert {
    background-color: red;
    @include border-radius(4px)
}
VENDOR PREFIX HELL
.alert {
    background-color: red;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}
  SAME POWERFUL TECHNIQUES,
        NEW LOW PRICE

  cross-browser hacks and fixes

  shortcuts around verbose CSS

pre-baked layout (ex: sticky footer)

              spriting

           extensions!
        DEPLOYMENT
I still haven’t completely figured this out.

    Trigger compilation from Fabric.

                 Bonus:

  sass --style compressed infile:outfile
          Power
            complexity
can’t use fancy GUI editors (SASS)
        toolchain addition

      Still pretty awesome.
Questions?
Thank you!
  @idangazit

								
To top