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

Atlanta Sass - Front-end Workflow Development with WordPress and Sass

F5d997b144087687f14d9ba17cf64741?s=47 A.H. Web Design
April 07, 2015
Technology
2
100

Atlanta Sass - Front-end Workflow Development with WordPress and Sass

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

• @extends

• Control Directives

• Sass Maps

• Source Mapping using Chrome DevTools

F5d997b144087687f14d9ba17cf64741?s=128

A.H. Web Design

April 07, 2015
Tweet

More Decks by A.H. Web Design

See All by A.H. Web Design
F5d997b144087687f14d9ba17cf64741?s=48 ahwebdesign
3
360

Other Decks in Technology

See All in Technology
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
110
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
180
D56efd2db811cb782f1458df3888c82a?s=48 mktakuya
0
140
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
110
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
150
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
140
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
150
F400611942a8b7a695f741f9a720fcf8?s=48 koooootake
4
200
8248e84865938642ea12d175c8bd0020?s=48 rocketmaso
0
180
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
14fc669973dea92bf6fd5ede6f4e016b?s=48 seizecare
0
110
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
180

Featured

See All Featured
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
16
580
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.5k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
176
14k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
436
28k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
39
2.2k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
22
1.2k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
143
19k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
258
24k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
12
640
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
310
21k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k

Transcript

  1. SASSY  CSS  &  WORDPRESS  

  2. SASS   (Syntac*cally  Awesome  StyleSheets)  

  3. SASS?    

  4. INSTALL  SASS  

  5. INSTALL  SASS  

  6. SASS  COMPILER   Libsass   •  C++  re-­‐implementa*on   of

     the  Ruby-­‐based  Sass   compiler   •  Faster  compile  *mes,   much  faster!   Ruby  Sass   •  Ruby-­‐based  Sass   compiler   •  Typically  slower   compile  *mes,   compared  to  Libsass  

  7. SASS  SYNTAX   SCSS   •  File  extension  .scss  

      •  It  doesn’t  require  a   shiI  in  code  formaJng   •  Easily  convert  an   exis*ng  stylesheet  to   use  Sass’s  func*onality   SASS   •  File  extension  .sass     •  Indented  syntax   •  Stripped  down,  no   curly  braces  or   semicolons  

  8. 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;   }  

  9. 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;}  

  10. UNDERSCORES.ME  

  11. STYLE.SCSS  

  12. SASS  FOLDER  STRUCTURE  

  13. PARTIALS  

  14. None

  15. VARIABLES  

  16. NESTING  

  17. MIXINS  

  18. EXTEND  

  19. SASS  MAPS  

  20. SASS  FUNCTIONS  

  21. MEDIA  QUERIES  

  22. SOURCE  MAPS  FOR  SASS   If  you  look  in  your

     output  folder  aIer  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  

  23. SOURCE  MAPS  FOR  SASS  

  24. ENABLING  SOURCE  MAPS   IN  THE  BROWSER  

  25. Sources   www.abookapart.com/ products/sass-­‐for-­‐web-­‐designers   www.jasonreece.com/sites/atl-­‐ sass-­‐meetup/2015-­‐02/  

  26. Resources   •  hBp://sass-­‐lang.com   •  hBp://thesassway.com     • 

    hBp://abookapart.com/products/sass-­‐for-­‐ web-­‐designers   •  hBp://www.sassnews.com/sassnews   •  hBp://sassmeister.com   •  hBp://thesassway.com/intermediate/using-­‐ source-­‐maps-­‐with-­‐sass    

  27. QuesTons?  Comments?   Concerns?   Aisha  Henderson   @AH_WebDesign  

    AishaHenderson.com   Aisha.Henderson@gmail.com