Atlanta Sass - Front-end Workflow Development with WordPress and Sass

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

• @extends

• Control Directives

• Sass Maps

• Source Mapping using Chrome DevTools

Transcript

1. SASSY  CSS  &  WORDPRESS  
2. SASS   (Syntac*cally  Awesome  StyleSheets)  
3. SASS?    
4. INSTALL  SASS  
5. INSTALL  SASS  
6. SASS  COMPILER   Libsass   •  C++  re-­‐implementa*on   of  the  Ruby-­‐based  Sass   compiler   •  Faster  compile  *mes,   much  faster!   Ruby  Sass   •  Ruby-­‐based  Sass   compiler   •  Typically  slower   compile  *mes,   compared  to  Libsass  
7. SASS  SYNTAX   SCSS   •  File  extension  .scss     •  It  doesn’t  require  a   shiI  in  code  formaJng   •  Easily  convert  an   exis*ng  stylesheet  to   use  Sass’s  func*onality   SASS   •  File  extension  .sass     •  Indented  syntax   •  Stripped  down,  no   curly  braces  or   semicolons  
8. 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;   }  
9. 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;}  
10. UNDERSCORES.ME  
11. STYLE.SCSS  
12. SASS  FOLDER  STRUCTURE  
13. PARTIALS  
15. VARIABLES  
16. NESTING  
17. MIXINS  
18. EXTEND  
19. SASS  MAPS  
20. SASS  FUNCTIONS  
21. MEDIA  QUERIES  
22. SOURCE  MAPS  FOR  SASS   If  you  look  in  your  output  folder  aIer  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  
23. SOURCE  MAPS  FOR  SASS  
24. ENABLING  SOURCE  MAPS   IN  THE  BROWSER  
25. Sources   www.abookapart.com/ products/sass-­‐for-­‐web-­‐designers   www.jasonreece.com/sites/atl-­‐ sass-­‐meetup/2015-­‐02/  
26. Resources   •  hBp://sass-­‐lang.com   •  hBp://thesassway.com     •  hBp://abookapart.com/products/sass-­‐for-­‐ web-­‐designers   •  hBp://www.sassnews.com/sassnews   •  hBp://sassmeister.com   •  hBp://thesassway.com/intermediate/using-­‐ source-­‐maps-­‐with-­‐sass    
27. QuesTons?  Comments?   Concerns?   Aisha  Henderson   @AH_WebDesign   AishaHenderson.com   Aisha.Henderson@gmail.com