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
64fdeeb10dba981472bf5a90dae23f2a?s=48 ryoheig0405
0
420
7a54d6143169419fc6d4d9a0ff3056ea?s=48 maekawa123
0
600
3e43337419f62a7e3eefc1b81145a987?s=48 yutakasugiura
0
1.2k
Fecdd3417cd7375cc0bd0352d72db27e?s=48 1ftseabass
PRO
0
110
49844569246a6d183a5551bb74895e2a?s=48 kolinz
0
120
93aef1d166a8a3536538eff713f80307?s=48 flant
0
4.4k
17d762ae166e66cab39e9b2e3df7d198?s=48 ysakashita
7
3.7k
97a7f7899e0df28c3636b8d44bbe6578?s=48 korodroid
0
130
4dca78303031ea5acf25b0183cd900f8?s=48 kanasann1106
0
250
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
1
240
Ad22fcf5773b906c08330f4d57242212?s=48 inductor
2
520
6500a96a5f0786d7ff0c53429d691ae6?s=48 kazuhiro4949
1
180

Featured

See All Featured
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
13
940
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
332
16k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
129
20k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
25
2.4k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
4k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
18
980
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
202
9.8k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
12
1.8k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
2k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
146
12k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
193
8.8k

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