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
93

Other Decks in Technology

See All in Technology
D9130a0952480278c7f44527c6989da7?s=48 syoshie
7
560
5af8e5bd2f24e4ea0cee732c6cc259b3?s=48 haruharuharuby
0
290
1cf2de2da02f94ad87a7a31038721e6c?s=48 capsmalt
1
140
D833ebe946fb6c3ca990758737855f79?s=48 typewriter
1
950
0b238801605070def81a98cfe8061aee?s=48 shonansurvivors
1
180
Ae03eb47606f4e0125268d39f8aebfad?s=48 ymmt2005
3
1.7k
Cd931bc05e7cee46b9a950a63e47ba4c?s=48 you
0
120
Ad22fcf5773b906c08330f4d57242212?s=48 inductor
4
740
8a84268593355816432ceaf78777d585?s=48 dena_tech
0
140
D1b28ca276bee52e56ba11785f70d2d6?s=48 makocchi
2
320
9bf153d8c0ce36ba6d9d20c2914b70f4?s=48 shimastripe
7
160
81603b1fb3b31483780be0700ed183e8?s=48 gabidavila
0
230

Featured

See All Featured
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
9.9k
78b475797a14c84799063c7cd073962f?s=48 holman
459
270k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
648
110k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
399
20k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
293
39k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
20k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
14k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
100
5.7k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
228
17k
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
10
1.2k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
165
6.8k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
51
3.9k

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