Downloaded 18 times
Uploaded byvisual28
CSS Preprocessors with an introduction to LESS/SASS
The document provides an overview of CSS preprocessors like Sass and Less, highlighting their benefits such as variables, nesting, and mixins, while also addressing the shortcomings of traditional CSS. It discusses common misconceptions about these preprocessors and compares their features, along with tools that enhance workflow like Grunt. Additionally, it covers installation instructions and explores advanced features such as custom mixins, loops, and command-line usage.
CSS Preprocessors with an introduction to LESS/SASS
- 1. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 1 CSS Preprocessors &IntrotoSassandLess
- 2. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 2 Mark Aplet @visual28 mark@visual28.com Senior UI/UX Designer at SymSoft Solution
- 3. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 3 CSSShortcomings
- 4. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 4 CSSShortcomings No Variables You can wait… But it might take a while. A looonnng while…
- 5. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 5 CSSShortcomings Not DRY • Less maintainable • Duplicate code.
- 6. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 6 CSSShortcomings Difficult for distributed teams Separate files add extra http requests • @import anyone? Frequent version control conflicts Separate build tool to concat
- 7. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 7 PreprocessorLanguages Less, Sass, Stylus • It’s not a whole new language rather new features that you can add to your css.
- 8. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 8 BenefitsofProcessedCSS Variables @imports (concatenation) Minification Nesting Extends Mixins (functions) Loops Math Color Manipulation
- 9. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 9 Misconceptions Sass is written in Ruby Less & Styles is JavaScript • You need them on your development machine only I need node or ruby on my server - FALSE
- 10. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 10 Misconceptions But only for testing But why? • Slow • Better tools available I can run Less client side – TRUE (Sort of)
- 11. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 11 Misconceptions Ruby and Node are easy to install on any platform Ruby pre-installed on macs Node installers makes it easy • (*windows might not create the npm folder) Linux is easy with apt-get install It’s hard to install - FALSE*
- 12. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 12 Lessvs Sass No short answer for that Bootstrap uses Less and Sass version Foundation uses Sass IMO Sass is more robust but less is easier to get started with Sass has Compass - it is the bomb! Less was more performant, but now Sass has caching Which is best?
- 13. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 13 DoI havetousethe cmdline? It is possible to avoid the command line Many well built GUI’s Command line tools = mo-betta! • More power & flexibility • Collaborate effectivly No, but you will probably want to.
- 14. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 14 Avoidingthe CommandLine
- 15. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 15 GUITools CodeKit, PrePros, Crunchapp, Scout, Koala, Compassapp, Lessapp, and more Prepros KoalaCodekit
- 16. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 16 Why CommandLine? Ability to extend your workflow beyond just css • JavaScript • Image Optimization & Sprites sheets • Web font creation • Linting • Live Reload • FTP • SVN & GIT
- 17. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 17 Why CommandLine? Even better with task runners like Grunt or Gulp Simplified Workflow Collaboration
- 18. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 18 Semanticsvs OOCSS OOCSS = CSS light but DOM heavy Semantic = DOM light but CSS heavy Mixins & Extends help narrow the gap • Not perfect • Future versions will get better
- 19. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 19 Installation Lots of options depending on OS and tools $npm install -g less $gem install sass $npm install
- 20. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 20 Variables
- 21. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 21 Variables Variable can hold variables • @brand-primary: @color1; Variables can be many things • @img-path: “../img”; • @font-size: 1em; • @link-hover: darken(@color1, 8%);
- 22. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 22 @Imports Partials allow you to break code up into manageable chunks @import "variables.less"; Same syntax for Sass
- 23. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 23 Concatenation& Minification Combines all the partials into a single file Can remove excess whitespace Can remove comments Grunt can make this process even simpler
- 24. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 24 Nesting Good for creating specificity Bad for creating specificity Keep it flat!
- 25. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 25 Nesting
- 26. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 26 Mixins Similar to a function Many built in mixins Create your own custom mixins
- 27. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 27 Builtin Mixins lighten (@color1, 8%) — darken(@color1, 8%) image-size("file.png"); data-uri(‘image.jpg'); screen(@color1, @color2) • multiply, hardlight, softlight, difference, overlay, mix, fade, spin, grayscale, saturate, etc
- 28. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 28 CustomMixins
- 29. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 29 Mixinsvs Extends Mixins duplicate css Extends merge selectors
- 30. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 30 Sass Extend
- 31. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 31 LessExtend
- 32. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 32 Loops
- 33. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 33 FlowControl
- 34. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 34 Any Questions? In-depth discussion at a future meeting
- 35. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 36 Mo-betta
- 36. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 37 Grunt.js Helps to automate repetitive tasks Workflow tool Not Required – Is helpful Helps you collaborate with teams What the heck is it?
- 37. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 38 InstallingGrunt.js $ npm install -g grunt-cli
- 38. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 39 GruntTasks It’s just JavaScript User created tasks Multiple tasks for different scenarios • Watch, Production, Development, Build, Optimize A task may run several sub-tasks
- 39. 3835 North FreewayBlvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com 40 LiveDemo