deep dive into sass
TRANSCRIPT
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; }
.item-4 { width: 8em; }
.item-2 { width: 4em; }
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