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

Sass and WordPress: Enhancing Your Front-End Workflow

F5d997b144087687f14d9ba17cf64741?s=47 A.H. Web Design
March 29, 2015
Technology
3
370

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

F5d997b144087687f14d9ba17cf64741?s=128

A.H. Web Design

March 29, 2015
Tweet

More Decks by A.H. Web Design

See All by A.H. Web Design
F5d997b144087687f14d9ba17cf64741?s=48 ahwebdesign
2
110

Other Decks in Technology

See All in Technology
Cb88f765dd38cd942c39aacb5abbea06?s=48 ufoo68
0
160
Dacd98e0fcfc478b24f9cd7ec9208904?s=48 manabusakai
0
550
36c940c1761f55495077121a88570a65?s=48 torutakahashi
0
110
665aa20c57717b4f34d0635308d272f7?s=48 kwada
0
110
8cc27471bcdeb2858fca212586a208b4?s=48 takahia1988
0
1.9k
0886c70b5ecf3b0b0ee6500c5e47884d?s=48 ecoopnet
0
170
9cd2d753636f4849c881ccf2381228ee?s=48 marnie0301
1
1.8k
33d6320b53f63f6627508095633cf5ce?s=48 yosuke_matsuura
PRO
0
1.9k
D2d151b1f646128e4875038282acd953?s=48 humanresociarpa
0
1.8k
A2cac4b3dcb2bc0b87917ddc034ef708?s=48 sansandsoc
0
650
93dcbac1a838bbec898747bb92aa47cc?s=48 sadonosake
0
1.4k
835671ae91e49b2637313b91dacda1db?s=48 tdys13
0
1.3k

Featured

See All Featured
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
295
110k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
84
3.7k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
196
16k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
634
50k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
267
11k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
800
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.3k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
225
15k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
56
3.5k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
990k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k

Transcript

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

     

  2. SASSY  CSS  &  WORDPRESS  

  3. SASS   (Syntac*cally  Awesome  StyleSheets)  

  4. SASS?    

  5. INSTALL  SASS  

  6. INSTALL  SASS  

  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  

  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  

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

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

  11. UNDERSCORES.ME  

  12. STYLE.SCSS  

  13. SASS  FOLDER  STRUCTURE  

  14. PARTIALS  

  15. None

  16. VARIABLES  

  17. NESTING  

  18. MIXINS  

  19. EXTEND  

  20. SASS  MAPS  

  21. SASS  FUNCTIONS  

  22. MEDIA  QUERIES  

  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  

  24. SOURCE  MAPS  FOR  SASS  

  25. ENABLING  SOURCE  MAPS   IN  THE  BROWSER  

  26. None

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

  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    

  29. QuesFons?  Comments?   Concerns?   Aisha  Henderson   @AH_WebDesign  

    AishaHenderson.com   Aisha.Henderson@gmail.com