This discussion will focus primarily on the two most popular CSS pre-processors, LESS and SASS. I will take some time to compare the two, by highlighting both their similarities and differences. Though these two “languages” share similar features, the compiler interprets them differently. Furthermore, certain functions and features are easier to execute in one language than the other. The goal of these comparison is to give the audience a feel for the syntax and to demonstrate how some of the features can be used in a practical way.
Moreover, further into the presentation we will take a deeper dive into the advance features of LESS and SASS. In this sections we will explore the latest features of both pre-processors and see how they work with popular 3rd party vendors and libraries. The audience will have a chance to learn about the frameworks and what makes these platforms so special!
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
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
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
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/
