Revamp Your Stylesheet
- 1. Revamp Your Stylesheets Gary Homidas UX Designer and Front-end Developer mail@ghomidas.com
- 2. What’s the point? The beauty of it all. You can write standard CSS and begin to use the features of the preprocessor as you work. Your code will become more complex as your knowledge grows. It is a time saver…. seriously!
- 3. • What’s wrong with your CSS? • Learn the fundamentals • Play with Code • 3rd Party Tools Online Editors: • LESS: http://lesscss.org/less-preview/ • SASS: http://www.sasseditor.xyz/ Objectives
- 4. What’s wrong with your CSS? She becomes too high maintenance (updating colors, images, fonts, etc.) Redundant selectors Lengthier document Vendor prefixes
- 5. Similarities between LESS and SASS ∎Variables ∎Mixins ∎Nesting ∎Functions ∎Import ∎Conditional / Comparison Operators ∎Loops ∎3rd Party Tools Learning the Fundamentals
- 6. Variables a + 4 = 7When a = 3 Just like you’ve learned in school!
- 7. • Makes reusing code easy • Can be treated like a variable or function. • Can include CSS selectors and their attributes (nested Classes/ID's) • Great way to print different attributes based on a situation Blending things together Mixins
- 8. • Pass arguments and include conditional statements and loops • Accept “named parameters” (LESS) or “keyword Arguments” (SASS) where you can explicitly designate which argument to satisfy • LESS allows you to declare multiple mixins with the same name and accepting different number of arguments Mixins
- 9. ∎ Allows coder to visualize the selector’s hierarchy ∎ Minimizes scrolling throughout the file and reduces the size of your CSS file Nesting
- 10. The key here is “program” with flexibility in mind
- 11. ∎Pass values to your mixin/function for a more of dynamic stylesheet ∎LESS uses mixins as functions ∎SASS can use either mixins or actual functions ∎Both can be used to return a value Functions “Program” with flexibility in mind
- 12. ∎LESS returns values by assigning the results into a variable ∎SASS has the “return” keyword ∎SASS function returns single value of any SASS data type, including: numbers, strings, colors, booleans, or lists. Functions
- 13. ∎Allows the author to include other stylesheets into project. ∎Compartmentalize your styles while reducing http requests ∎Both will merge files with their respective file extension into a single CSS file. ∎Both treat files with the CSS extension as a normal CSS import Import
- 14. LESS Exception: You can import a CSS file directly into the LESS file using the @import (inline) directive (one http request). See Examples SASS allows you to import multiple files w/ one import SASS: some circumstances where the traditional import will be used are as follows: If the @import has any media queries, url, and others Import
- 15. CONDITIONAL STATEMENTS Only add specific styles under certain situations. For example, if a statement is true, execute a code. COMPARRISON OPERATORS Compare arguments and execute code based on the items. For example, when a text color is dark, change to a light background color Logical Operators
- 16. LESS calls them “Mixin Guards” LESS tries to stick to the declarative nature of CSS Uses “when” to compare Traditional comparison operators: >, >=, =, =<, <, true (doesn’t use false) Other keywords: ‘AND’, ‘isnumber’, ‘not’ Logical Operators - LESS
- 17. Traditional programming conditional and comparative statements; @if, @else, and, or, not >, >=, =, =<, <, Note: and, or, not are written verbatim. Boolean values: True or False Logical Operators - SASS
- 18. Work smarter not harder. Effectively using loops
- 19. Repeat parts of your code. Create column grids Create new CSS selectors LESS: recursive mixins (mixins can “call” themselves) SASS: resemble traditional programming keywords @for, @each, @while, Loops Let the computer handle redundancy
- 20. 3’rd Party Tools Let someone else do the heavy lifting
- 21. 3’rd Party Tools ∎Allow automatic vender prefix update via Can I Use ∎Extensive Mixin library with documentation ∎Helper Functions ∎Generate Image Sprites ∎Asset urls (i.e.. http_path, image-url, etc.) ∎Typography (vertical rhythm) Sass Supporters: Compass
- 22. 3’rd Party Tools ∎Very Lightweight with tons of mixins ∎Simpler font-face declarations ∎Helpers aka (Add-ons) ∎Timing Functions Sass Supporters: Bourbon
- 23. 3’rd Party Tools ∎Cross-browser CSS-prefix ∎Automatic LESS updater ∎Easy Drag-n-Drop project setup ∎Inconsistent debugger LESS Supporters: SimpLESS
- 24. 3’rd Party Tools ∎Easy to use ∎Automatically watch your LESS files after the first crunch! ∎Comes standard with an IDE (only uses HTML, CSS, JS, PHP, LESS) ∎Debugger (informs you of where errors are but not too detailed on why it’s an error. □I.e.. passing too many arguments to a mixin: it will say “runtime” LESS Supporters: Crunch 2 (Free version)
- 25. 3’rd Party Tools ∎Easy Drag-n-Drop project setup ∎Use globally installed less (instead of what’s bundled with WinLESS) ∎Automatically compile LESS files on change. ∎Debugging is easier with more descriptive error messages LESS Supporters: WinLESS
- 26. 3’rd Party Tools ∎Comprehensive Mixin libraries with 86 Mixins ∎Unlimited number of shadows, gradients, animations, etc. ∎Well documented with real code examples ∎Animations uses cubic-bezier timing functions LESS Supporters: LESS Hat
- 27. 3’rd Party Tools ∎Codekit (Mac only) ∎Koala Dual Supporters
- 28. Check Them Out ∎Scott Kellum Color-Schemer: https://github.com/at-import/color-schemer ∎Sass Bites (YouTube) ∎Scott Level Up Tuts http://leveluptuts.com/
- 29. THANKS!Any questions? Linkedin:gary homidas Email: mail@ghomidas.com
Editor's Notes
- #16: Thinking back to Mixins You won’t always want to execute the same code for every situation