$30 off During Our Annual Pro Sale. View Details »

Sass and WordPress: Enhancing Your Front-End Workflow

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

A.H. Web Design

March 29, 2015
Tweet

More Decks by A.H. Web Design

Other Decks in Technology

Transcript

  1. Front-­‐end  Workflow  with  Sass  &  
    WordPress  
    Aisha  Henderson  

    View Slide

  2. SASSY  CSS  &  WORDPRESS  

    View Slide

  3. SASS  
    (Syntac*cally  Awesome  StyleSheets)  

    View Slide

  4. SASS?  
     

    View Slide

  5. INSTALL  SASS  

    View Slide

  6. INSTALL  SASS  

    View Slide

  7. 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  

    View Slide

  8. 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  

    View Slide

  9. 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;  
    }  

    View Slide

  10. 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;}  

    View Slide

  11. UNDERSCORES.ME  

    View Slide

  12. STYLE.SCSS  

    View Slide

  13. SASS  FOLDER  STRUCTURE  

    View Slide

  14. PARTIALS  

    View Slide

  15. View Slide

  16. VARIABLES  

    View Slide

  17. NESTING  

    View Slide

  18. MIXINS  

    View Slide

  19. EXTEND  

    View Slide

  20. SASS  MAPS  

    View Slide

  21. SASS  FUNCTIONS  

    View Slide

  22. MEDIA  QUERIES  

    View Slide

  23. 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  

    View Slide

  24. SOURCE  MAPS  FOR  SASS  

    View Slide

  25. ENABLING  SOURCE  MAPS  
    IN  THE  BROWSER  

    View Slide

  26. View Slide

  27. Sources  
    www.abookapart.com/
    products/sass-­‐for-­‐web-­‐designers  
    www.jasonreece.com/sites/atl-­‐
    sass-­‐meetup/2015-­‐02/  

    View Slide

  28. 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    

    View Slide

  29. QuesFons?  Comments?  
    Concerns?  
    Aisha  Henderson  
    @AH_WebDesign  
    AishaHenderson.com  
    [email protected]  
     

    View Slide