revamp your stylesheet
TRANSCRIPT
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!
• 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
What’s wrong with your CSS? She becomes too high maintenance (updating colors,
images, fonts, etc.) Redundant selectors Lengthier document Vendor prefixes
Similarities between LESS and SASS∎ Variables∎ Mixins∎ Nesting∎ Functions∎ Import∎ Conditional / Comparison
Operators∎ Loops∎ 3rd Party Tools
Learning the Fundamentals
Variablesa + 4 = 7When a = 3
Just like you’ve learned in school!
• 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 togetherMixins
• 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
∎ Allows coder to visualize the selector’s hierarchy
∎ Minimizes scrolling throughout the file and reduces the size of your CSS file
Nesting
The key here is “program” with flexibility in mind
∎ 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
∎ 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
∎ 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
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 othersSee Examples
Import
CONDITIONAL STATEMENTSOnly add specific styles under
certain situations. For example, if a statement is true, execute a
code.
COMPARRISON OPERATORSCompare arguments and execute
code based on the items. For example, when a text color is
dark, change to a light background color
Logical Operators
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
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
Work smarter not harder.Effectively using loops
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,
LoopsLet the computer handle redundancy
3’rd Party ToolsLet someone else do the heavy lifting
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
3’rd Party Tools
∎ Very Lightweight with tons of mixins∎ Simpler font-face declarations∎ Helpers aka (Add-ons)∎ Timing Functions
Sass Supporters: Bourbon
3’rd Party Tools
∎ Cross-browser CSS-prefix∎ Automatic LESS updater∎ Easy Drag-n-Drop project setup∎ Inconsistent debugger
LESS Supporters: SimpLESS
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” error
LESS Supporters: Crunch 2 (Free version)
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
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
3’rd Party Tools
∎ Codekit (Mac only)∎ Koala
Dual Supporters
Check Them Out
∎ Scott Kellum Color-Schemer: https://github.com/at-import/color-schemer
∎ Sass Bites (YouTube)∎ Scott Level Up Tuts
http://leveluptuts.com/
