1. THEAMING WITH SASS
Bringing sassy to CSS
SITRA

2. WHAT IS SASS? SASS is short for Syntactically Awesome Style Sheet.
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS).
First developed in 2007.
Serves as:
Scripting language
Preprocessor for CSS

3. Function Sass compiles into CSS files. Two formatting conventions.
.SCSS

4. Continued…
.SCSS follows conventions of css

5. Continued…
.SASS focuses on indentation and short hand.

6. HARD TO CHOOSE?
Sass can convert between SASS and SCSS with relative ease.

7. SASSY COMPONENTS A Sass project only needs two key components:
config.rb
Sass/{*sass files go here*}

8. SASSY FEATURES Sass has 5 primary features. Variables Nesting Mixins
Partials
Inheritance

9. CONTINUED…
Variables
Variables allow you to assign a value to an easy-to- remember placeholder name.
Works with hex values, strings of text, colors, numbers, Boolean values or even value lists.
No more memorizing hex values!

10. CONTINUED… Variables have scope based on where they are defined.
The most straightforward way to use SassScript is to use variables.
Variables begin with dollar signs and are set like CSS properties:
$width: 5em;
You can then refer to them in properties:
#main{
width: $width; }

11. CONTINUED…
NESTING
Nested rules allow you to break up endlessly long selectors of CSS.

12. CONTINUED…
MIXINS
Mixins allow you to chunk up CSS declarations to be reusable with one reference.
Mixins can reference mixins as well.

13. CONTINUED…

14. CONTINUED… PARTIALS CSS files can sometimes get too long.
Sass allows you to create partial files to modularize and organize your code.

15. CONTINUED… CREATING PARTIALS
Creating partials can be done in two steps.
Create a _filename.scss in your SASS folder.
Reference the partial Sass file in your non-partial Sass file by

16. CONTINUED… INHERITANCE
Inheritance imports syntax and style from another section of your SASS project.

17. CONTINUED… MORE FEATURES
While Sass has lots of important features, it is missing one key component:
CSS3 vendor-specific prefixes
However, there is a mixin collection that fixes this.
Compass

18. CONTINUED…
COMPASS
Compass is a Sass framework extension focused on CSS3 and layouts.
It is a large set of mixins.
Installing Compass is similar to installing Sass.

19. USING SASS Install Ruby Install Sass using the Command Prompt
Because Sass is a Ruby gem, you need to install Ruby.
Install Sass using the Command Prompt
Type in the following prompt:
gem install sass
then wait for it to be installed.
If you want to include Compass as well, instead use
gem install compass

20. CONTINUED… Set up a Sass file Tell Sass to “watch” the file
Create a new CSS file with the extension “.scss”
Tell Sass to “watch” the file
To make Sass watch your file for changes, in the command prompt inside the folder where your .scss file exists, type the following:
Sass –-watch
Styles.scss:styles.css
Write some Sass and let it compile
You can use any text editor and Sass will keep updating it

21. APPLICATIONS FOR USING SASS
CodeKit (paid, for Apple)
Compass.app (paid, for all OS)
Ghost lab(paid, for Apple and Windows)
Hammer (paid, for Apple)
Koala (open source, for all OS)
LiveReload (paid, for Apple and Windows)
Prepros (paid, for all OS)
Scout (open source, for Apple and Windows)

22. THEAMING WITH
LESS
LIDET

23. WHAT IS LESS?
Less is a dynamic style sheet language that can be compiled into cascading style sheets and run on the client and server side.
Developed by Alexis Sellier
It is an open source
Implementation language is JavaScript

24. CONTINUED…
Since less is a CSS preprocessor it allows you to make CSS more maintainable, theme able and extendable.
Less is designed to as close to Css as possible so the syntax is identical to your current code
File extension is .less

25. MECHANISMS PROVIDED BY LESS
Variables
Nesting
Mixins
Functions and Operations
Extends

26. CONTINUED… Variables Less allows variables to be defined.
Variables in less are defined with an at
Variable assignment is done with a colon

27. CONTINUED…
NESTING
Basically CSS lacks visual hierarchy while working with child selectors. You have to write selectors and their combinations in separate lines
Less allows us to nest rule sets inside other rule sets as a way to show hierarchy
Also you could give you could give pseudo-classes a nesting structure using the & symbol.

28. CONTINUED…

29. CONTINUED…
Mixins
Mixins are set of definitions that compiles according to some parameters or static rules .
Mixins allow embedding all the properties of a class into anther class by including the class name as one of its properties.
CSS does not support mixins.

30. CONTINUED…

31. CONTINUED… Functions and Operations
Less allows operations and functions
Operations allow addition, subtraction, division and multiplication of property values and colors.
Functions map one-to-one with javascript ,allowing manipulation of values

32. CONTINUED…

33. CONTINUED…
Extends
Extends are useful for sharing a generic definition with selectors rather than copying it in. all extended selectors are grouped in compiled CSS.
In less you can select every instance of the extended selector by adding “all” attribute to extend the method or select the main instance.

34. INSTALLATION Two parts –The language and the compiler
The language- the actual less code
The compiler – is what turns that less code into standard CSS
Rub Gem, .NET version, os x app
Use the JavaScript compiler
Simply include the script in your html, and then it will process less live as the page loads.

35. LESS SOFTWARE WinLess - windows Crunch - windows , Mac os x
Codekit – Mac os x
Mod_less - Linux
Web-essentials - Windows

36. STYLING WITH
Stylus
KAMLAKNESH

37. WHAT IS STYLUS?
Stylus is a dynamic style sheet language that is compiled into Cascading Style Sheet (CSS).
Stylus comes equipped with many of the features provided by SASS and LESS.
It is regarded as the third most used CSS preprocessor syntax.

38. CONTINUED…
It has not received quite as much attention as SASS or LESS.
It was created by TJ Holowaychuk a former programmer for Node.js and the creator of the Luna language.
Stylus is written in JavaScript particularly by Node.js.

39. CONTINUED…
Stylus supports both an indented syntax and a regular CSS style.
It is saved using the .styl extension.
It can be used with Nib, an extension library that provides cross-browser CSS3 mixins.

40. CONTINUED… The syntax of Stylus is very minimal and flexible.
For example, curly brackets, colons, semicolons, and parentheses are not required.

41. CONTINUED… Example:- link-color = #999 link-hover = #229ed3 ul
margin 0 li
float left a
color link-color
&:hover
color link-hover

42. Features ? Optional colons Optional semi-colons Optional commas
Optional braces
Variables
Interpolation
Mixins
Arithmetic
Type coercion

43. CONTINUED… Dynamic importing Conditionals Iteration Nested selectors
Parent referencing
Variable function calls
Lexical scoping
Built-in functions (over 60)
In-language functions

44. CONTINUED… Optional compression Optional image in lining
Stylus executable
Robust error reporting
Single-line and multi-line comments
CSS literal for those tricky times
Character escaping
Text Mate bundle
and more!

45. CONTINUED… Indentation
Stylus is “pythonic” (i.e. indentation-based). Whitespace is significant, so we substitute { and } with an indent, and an out dent

46. CONTINUED…
STYLUS CSS

47. CONTINUED…
Variables
We may assign expressions to variables and use them throughout our stylesheet.
Stylus variables don't require anything to be prepended to them, although it allows the $ symbol.

48. CONTINUED…

49. CONTINUED…
Mixins
Both mixins and functions are defined in the same manner, but they are applied in different ways.
For example, we have a border-radius(n) function defined below, which is invoked as a mixin (i.e., invoked as a statement, rather than part of an expression).
When border-radius() is invoked within a selector, the properties are expanded and copied into the selector.

50. CONTINUED…

51. FLAWS
It's problem lies in the fact that because it's syntax is so forgiving, and there are so many different ways to write a block of Stylus code; it can be confusing to learn - it supplies the developer with no definitive direction. This, is the main reason that it has not received as much attention as it should have.

52. CONTINUED… This is why we should use some common conventions
Try keep things hyphenated
Try using some punctuations
Try using $ sign to declare variables-it will be easier to spot in the code, it will never run into transparent Mixin keyword argument conflicts.
Never name your mixins after HTML elements!
And so on…

53. APPLICATIONS
CodeKit- supports: STYLUS, LESS, SASS and lot of other things
Platform: Mac OS
Price: 29$ with a free trial
Perpros App- supports: STYLUS, LESS, SASS and others
Platform: Mac OS& Windows
Price:27$