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
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
19fc8f6113c5c3d86e6176362ff29479?s=48 kanaugust
PRO
0
120
9cdd446fb259ec93e52d4388f60197f8?s=48 karamem0
1
790
D9e65f4b0af059ae9ba243c8c2265e4f?s=48 pohjus
0
3.3k
D9130a0952480278c7f44527c6989da7?s=48 syoshie
0
650
C0c0e8e4d7f83912cb1b1a0699df82a5?s=48 miyakemito
1
620
7ff130a0c1a4966472a4bdfaaf05e791?s=48 chandi
0
140
A2cac4b3dcb2bc0b87917ddc034ef708?s=48 sansandsoc
0
320
3f848c0c0b9a6603894e157da93e4655?s=48 sadayoshitada0919
0
360
56ae61a2631362f985e4c1fa4548a7ac?s=48 yuzutas0
8
3.1k
A1391fea7feb81a26c333c05f831dbf3?s=48 tosh2230
3
310
8a84268593355816432ceaf78777d585?s=48 dena_tech
1
170
Cd823abda454a7a2065fe6fe273ae84b?s=48 viva_tweet_x
1
430

Featured

See All Featured
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.5k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
311
21k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
118
7.9k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
200
20k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
10
510
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
369
42k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
288
110k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
610
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
339
16k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
71
260k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
217
16k

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