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
46839cf590a549efe13547c17a6b2fde?s=48 isaoshimizu
2
210
63bf22db8ab8da3851da34d2e0cb0c69?s=48 imairi
6
610
A35557d139d8d53246763a01ec847a3f?s=48 kichiemon
2
120
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
2.1k
658c29959d8a9fd352afa440a5813137?s=48 ritou
3
3k
195f71c8183f8d27da66aa0618f293b6?s=48 task4233
17
12k
011714704c4a925e542d426d4cdaa4e3?s=48 giginet
3
190
00851927294532e0742c2c174730dff0?s=48 ido_kara_deru
1
110
Ee4f2266abb0268305431dbbcade59d2?s=48 akifumifukaya
4
370
C78c829ff61f9cfd6fe0b7ac45437672?s=48 amir
1
160
2037978e199b5947c8304d0435de9944?s=48 irisuinwl
0
390
7a0bc9670ff654b04d4361a9afd1bba8?s=48 hcrane
3
330

Featured

See All Featured
245cee81a9c424266e5e401d844ea881?s=48 lara
595
62k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
28
2.8k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
633
49k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
24k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
342
16k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
3.9k
245cee81a9c424266e5e401d844ea881?s=48 lara
175
10k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
180
14k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.1k
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
PRO
2
7.3k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
119
7.4k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.7k

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