Deep dive into sass

Nikhil Kumar | Software Consultant

Knldus Software LLP

Sass

Sass Syntaxes: code example

Benefits of using Sass

Sass Vs Css : code example

Variables

Nested Syntax

Mixins [ @include ]

Inheritance : @extends

Functions

Looping

Joining Files

_Partials

Interactive Shell Interaction

Output styles: 4

Sass (syntactically awesome style-sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie.

Sass

Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). Sass-script is the scripting language itself.Sass-Script

Some Theory

The official implementation of Sass is open-source and coded in Ruby; however, other implementations exist, including PHP, and a high-performance implementation in C called libSass. There's also a Java implementation called Jsass, there are much more. here

(You can think of the WebView as a chromeless browser window thats typically configured to run fullscreen.)

This enables them to access device capabilities such as the accelerometer, camera, contacts, and more. These are capabilities that are often restricted to access from inside mobile browsers.

Syntax- types

Sass consists of two syntaxes

The original syntax, called "the indented syntax", uses a syntax similar to Haml & Jade etc, another one is like traditional .css syntax.

Types

.sass

.scss

A valid CSS is valid SCSS with the same semantics.

Scss vs Sass

HAML-style indentation

No brackets or semi-colons, based on indentation

Less characters to type

Enforced conventions/neatness

Semi-colon and bracket syntax

Superset of normal CSS

Normal CSS is also valid SCSS

Newer and recommended

SCSS

SASS

Damn!! Is it really magical ??

Syntax Example

Sass

Scss

$txt-size: 10px$txt-color: blue$link-color: red

#mainfont-size: $txt-sizecolor: $txt-coloracolor: $link-color

$txt-size: 10px;$txt-color: blue;$link-color: red;

#main{font-size: $txt-size;color: $txt-color;a{color: $link-color;}}

Piyush Mishra

Reasons to go with sass: Benefits & Features

Ability to define variables

Nested syntax

Ability to define mixins

Mathematical functions

Looping Css: @for, @each and @while,

Operational functions (such as lighten and darken)

Joining of multiple files

SassScript provides the following mechanisms: variables, nesting, mixins, and selector inheritance.

Piyush Mishra

Variables- $

Types of Variables in Sass

Numbers

String

Boolean

Color

lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)

maps from one value to another (e.g. (key1: value1, key2: value2))

Variable names can use hyphens and underscores interchangeably. $main-width, you can access it as $main_width, and vice versa.

Piyush Mishra

Variables

$primary-color: #3bbfce;$margin: 16px;

.content-navigation { border-color: $primary-color; color: darken($primary-color, 10%);}

.border { padding: $margin / 2; margin: $margin / 2; border-color: $primary-color;}

Scss

Compiled Css

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

Global Variable: $width: 5em !global;

Piyush Mishra

Nested Syntax

table.hl { margin: 2em 0; td.ln { text-align: right; }}

li { font: { family: serif; weight: bold; size: 1.3em; }}

Scss

Compiled Css

table.hl { margin: 2em 0;}table.hl td.ln { text-align: right;}

li { font-family: serif; font-weight: bold; font-size: 1.3em;}

Piyush Mishra

Nested Syntax: Referencing Parent Selectors: &

#main { color: black; a { font-weight: bold; &:hover { color: red; } }}

Scss

Compiled Css

#main { color: black; } #main a { font-weight: bold; } #main a:hover { color: red; }

You might want to have special styles for when that selector is hovered over or for when the body element has a certain class. In these cases, you can explicitly specify where the parent selector should be inserted using the & character.

Piyush Mishra

Nested Syntax: Properties

.funky { font: { family: fantasy; size: 30em; weight: bold; }}

Scss

Compiled Css

.funky { font-family: fantasy; font-size: 30em; font-weight: bold; }

In Css: If you want to set a bunch of properties in the same name-space, you have to type it out each time.

Piyush Mishra

Mixins: @mixin, @include

@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000;}

Create mixin

.page-title { @include large-text; padding: 4px; margin-top: 10px;}

Mixins allow you to define styles that can be re-used throughout the style-sheet.

They can even take arguments which allows you to produce a wide variety of styles with very few mixins.

Using created mixin

.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }

Compiled to

Piyush Mishra

Mixins: Arguments

@mixin sexy-border($color, $width) { border: { color: $color; width: $width; style: dashed; }}

p { border-color: blue; border-width: 1in; border-style: dashed; }

Mixins can take SassScript values as arguments, When defining a mixin, the arguments are written as variable names separated by commas, all in parentheses after the name.

Create

p { @include sexy-border(blue, 1in); }

Usage

Compiled to

Default values for their arguments

@mixin sexy-border($color, $width: 1px) {

Piyush Mishra

Mixins: Variable Arguments

@mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows;}

.shadows { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;}

Sometimes it makes sense for a mixin or function to take an unknown number of arguments.
For example: box-shadow

Create

.shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);}

Usage

Compiled to

Piyush Mishra

Looping Css: @while

$i: 6;@while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2;}

Sass allows for iterating over variables using @for, @each and @while, which can be used to apply different styles to elements with similar classes or ids.

Create

.item-6 { width: 12em; }



Compiled to

Piyush Mishra

Looping Css: @each

@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); }}

The @each directive usually has the form @each $var in . $var can be any variable name, like $length or $name, and is a SassScript expression that returns a list or a map.

Create

Compiled To

.puma-icon { background-image: url('/images/puma.png'); }.sea-slug-icon { background-image: url('/images/sea-slug.png'); }.egret-icon { background-image: url('/images/egret.png'); }.salamander-icon { background-image: url('/images/salamander.png'); }

Piyush Mishra

Looping Css: @if - @else

$type: monster;p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; }}

The @if directive takes a SassScript expression and uses the styles nested beneath it if the expression returns anything other than false or null:

Create

Compiled To

p { color: green; }

Piyush Mishra

Looping Css: @for

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}

The @for directive repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms: @for $var from through and @for $var from to .

Create

Compiled To

.item-1 { width: 2em; }.item-2 { width: 4em; }.item-3 { width: 6em; }

Piyush Mishra

_Partials

For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do

@import "colors";

If you have a SCSS or Sass file that you want to import but dont want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.

Piyush Mishra

_Partials

For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do

@import "colors";

//other css goes here

If you have a SCSS or Sass file that you want to import but dont want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.

Piyush Mishra

Output Style

Although the default CSS style that Sass outputs is very nice and reflects the structure of the document, tastes and needs vary and so Sass supports several other styles.

Nested

Expanded

Compact

Compressed

Nested

#main { color: #fff; background-color: #000; } #main p { width: 10em; }

Expanded

#main { color: #fff; background-color: #000;}#main p { width: 10em;}

Nested

#main { color: #fff; background-color: #000; } #main p { width: 10em; }

Compact

#main { color: #fff; background-color: #000; }#main p { width: 10em; }

#main{color:#fff;background-color:#000}#main p{width:10em}

Compressed

Piyush Mishra

References

Sass-lang : Official Site

Sass-lang : Github

Piyush Mishra

Presenter [email protected]

Organizer@Knolspeak

http://www.knoldus.comhttp://blog.knoldus.com

Thanks

Design

Deep dive into sass