Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass and WordPress: Enhancing Your Front-End Wo...

Sass and WordPress: Enhancing Your Front-End Workflow

An awesome workflow can save you many hours, which in turn provides more freedom to spend time doing things to relax your mind :-)
I will cover how to start your theme development with Sass and WordPress, using Underscores as the starter theme. While this session is geared towards beginning WordPress theme designers I recommend this for anyone inquiring about Sass and it’s awesome features. Let’s Get Sassy!

The goal is to walk away with a basic understanding of:

Using GUIs with Sass
Sass Folder structure
Some of Sass Features:
Variables
Nesting
Partials
@mixins
functions
@extend
Sass Maps
Source Mapping using Chrome DevTools

Avatar for A.H. Web Design

A.H. Web Design

March 29, 2015
Tweet

More Decks by A.H. Web Design

Other Decks in Technology

Transcript

  1. SASS  COMPILER   Libsass   •  C++  re-­‐implementaFon   of

     the  Ruby-­‐based  Sass   compiler   •  Faster  compile  Fmes,   much  faster!   Ruby  Sass   •  Ruby-­‐based  Sass   compiler   •  Typically  slower  compile   Fmes,  compared  to   Libsass  
  2. SASS  SYNTAX   SCSS   •  File  extension  .scss  

      •  It  doesn’t  require  a  shiS   in  code  formaTng   •  Easily  convert  an   exisFng  stylesheet  to   use  Sass’s  funcFonality   SASS   •  File  extension  .sass     •  Indented  syntax   •  Stripped  down,  no  curly   braces  or  semicolons  
  3. CHOOSE  AN  OUTPUT  STYLE   •  Nested  (the  default)  

    ol  {      margin:  10px  0;      padding:  10px  0;  }      ol  li  {          font-­‐size:  2em;          line-­‐height:  1.4;  }          ol  li  p  {              color:  #333;  }   •  Expanded   ol  {      margin:  10px  0;      padding:  10px  0;   }       ol  li  {      font-­‐size:  2em;      line-­‐height:  1.4;   }       ol  li  p  {      color:  #333;   }  
  4. CHOOSE  AN  OUTPUT  STYLE   •  Compact     ol

     {  margin:  10px  0;   padding:  10px  0;  }   ol  li  {  font-­‐size:  2em;  line-­‐ height:  1.4;  }   ol  li  p  {  color:  #333;  }   •  Compressed   ol{margin:10px  0;padding: 10px  0;}ol  li{font-­‐size: 2em;line-­‐height:1.4;}ol  li   p{color:#333;}  
  5. SOURCE  MAPS  FOR  SASS   If  you  look  in  your

     output  folder  aFer  running  that  command,  you'll  no*ce   that  a  comment  has  been  added  to  the  end  of  the  generated  CSS  file:   At  The  Command  Line  
  6. Resources   •  hip://sass-­‐lang.com   •  hip://thesassway.com     • 

    hip://abookapart.com/products/sass-­‐for-­‐ web-­‐designers   •  hip://www.sassnews.com/sassnews   •  hip://sassmeister.com   •  hip://thesassway.com/intermediate/using-­‐ source-­‐maps-­‐with-­‐sass