THEAMING WITH SASS Bringing sassy to CSS SITRA

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

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

Continued… .SCSS follows conventions of css

Continued… .SASS focuses on indentation and short hand.

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

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

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

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!

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; }

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

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

CONTINUED…

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

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 using @import.

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

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

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.

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

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

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)

THEAMING WITH LESS LIDET

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

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

MECHANISMS PROVIDED BY LESS Variables Nesting Mixins Functions and Operations Extends

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

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.

CONTINUED…

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.

CONTINUED…

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

CONTINUED…

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.

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.

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

STYLING WITH Stylus KAMLAKNESH

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.

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.

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.

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

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

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

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

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!

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

CONTINUED… STYLUS CSS

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.

CONTINUED…

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.

CONTINUED…

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.

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…

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$