Pro Yearly is on sale from $80 to $50! »

Sass and WordPress: Enhancing Your Front-End Workflow

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

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
100

Other Decks in Technology

See All in Technology
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
450
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
160
D0f5daa7cc3a26140c06ea29e5e235cc?s=48 noriyukitakei
0
150
5d74d743eabd2bf7d4d2f68b9d3c727d?s=48 cubicdaiya
2
200
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
1.8k
842515eaf8fbb2dfcc75197e7797dc15?s=48 sat
0
190
F01c8fdfa64bdfc00a94896e0b1359e0?s=48 tmdoi
0
120
8248e84865938642ea12d175c8bd0020?s=48 rocketmaso
0
150
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
390
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
440
40301c0affdf359eaca771713e22b71a?s=48 harshbothra
0
370
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
830

Featured

See All Featured
79acae287842acf29084005533a7fb3b?s=48 hursman
105
9.2k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
92
2.9k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
310
21k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
7
440
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
15k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
15k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
258
16k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
4k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
56
5.3k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
256
36k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k

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