Sass_Cubet seminar

“Syntactically Awesome StyleSheets”
Cubet Seminar
Presented by “Ajith”
“We help build and architect IT solutions”

About Cubet
Founded in 2007, Cubet Techno Labs
is an end-to-end SMAC (social,
mobile, analytics and cloud) consulting
company with offices at Kochi, India
and London, UK. With expertise in
insightful product strategy, well-crafted
design and proficient development for
high-end web and mobile application
technologies.
Where we stand
Visit – www.cubettech.com

What is Sass ?
 Sass is an extension of CSS that adds power and elegance to the
basic language.
 It allows you to use variables, nested rules, mixins, inline imports,
and more, all with a fully CSS-compatible syntax

Features
 Fully CSS3-compatible
 Language extensions such as variables, nesting, and
mixins
 Many useful functions for manipulating colors and
other values
 Advanced features like control directives for libraries
 Well-formatted, customizable output

Syntax
•There are two syntaxes available for Sass.
•The first, known as SCSS (Sassy CSS). is an extension of the syntax of CSS3.
•This means that every valid CSS3 stylesheet is a valid SCSS file with the same
meaning.
•In addition, SCSS understands most CSS hacks and vendor-specific syntax.
•Files using this syntax have the .scss extension.
•The second and older syntax, known as the indented syntax (or just “Sass”),
provides a more concise way of writing CSS.
•It uses indentation rather than brackets to indicate nesting of selectors, and
newlines rather than semicolons to separate properties.
•Files using this syntax have the .sass extension.

Installation
• To install 'sass' we need to install the ruby gems first.
sudo apt-get install ruby-full rubygems1.8
• To install sass
sudo gem install sass

Using Sass
•To run Sass from the command line, just use
sass input.scss output.css
•You can also tell Sass to watch the file and update the CSS every
time the Sass file changes:
sass --watch input.scss:output.css
•If you have a directory with many Sass files, you can also tell Sass to
watch the entire directory:
sass --watch app/sass:public/stylesheets

Css Extension
•Nested Rules
•Referencing Parent Selectors: &
•Nested Properties

Nested Rules
 Sass allows CSS rules to be nested within one another.
 The inner rule then only applies within the outer rule’s selector.
For example
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-
color: #ff0000;
color: #000000;
}}
is compiled to:
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}

Referencing Parent Selectors: &
 & will be replaced with the parent
selector as it appears in the CSS.
 This means that if you have a
deeply nested rule, the parent
selector will be fully resolved
before the & is replaced
•For example
#main {
color: black;
a {
font-weight: bold;
&:hover {
color: red;
} }}
•is compiled to:
#main {
color: black;
}
#main a {
font-weight: bold;
}
#main a:hover {
color: red;
}

Nested Properties
CSS has quite a few properties that are in
“namespaces;” for instance, font-family, font-
size, and font-weight are all in
the font namespace.
Sass provides a shortcut for this: just write the
namespace once, then nest each of the sub-
properties within it.
•For example
.funky {
font: 20px/24px
fantasy {
weight: bold;
}}
•is compiled to:
.funky {
font: 20px/24px
fantasy;
font-weight:
bold;
}

SassScript
In addition to the plain CSS property syntax, Sass supports a small set
of extensions called SassScript.
SassScript allows properties such as
•Variables: $
•Data Types
•Operations
•Functions
•Keyword Arguments

Variables: $
Variables begin with dollar
signs, and are set like CSS
properties:
Variables are only available
within the level of nested
selectors where they’re defined.
If they’re defined outside of any
nested selectors, they’re
available everywhere.
They can also be defined with
the
!global flag, in which case
they’re also available
everywhere.
#main {
$width: 5em !global;
width: $width; }
#sidebar {
width: $width; }
is compiled to:
#main {
width: 5em; }
#sidebar {
width: 5em; }

Data Type
•SassScript supports seven main data types:
–numbers (e.g. 1.2, 13, 10px)
–strings of text, with and without quotes (e.g. "foo", 'bar', baz)
–colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
–booleans (e.g. true, false)
–nulls (e.g. null)
–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))
•SassScript also supports all other types of CSS property value, such as Unicode
ranges and !important declarations.

Operations
•All types support equality operations (== and !=). In addition, each
type has its own operations that it has special support for.
Different Operations
Number Operations (addition +, subtraction -, multiplication *,
division /, and modulo %)
Color Operations (All number operations supported)
String Operations (The + operation can be used to concatenate
strings)
Boolean Operations ( and, or, and not )
List Operations (Not support operators, uses list functions such
as length(),nth(),join() etc)

@-Rules and Directives
•Sass supports all CSS3 @-rules, as well as some additional Sass-specific ones
known as “directives.”
@import
•Sass extends the CSS @import rule to allow it to import SCSS and Sass files.
All imported SCSS and Sass files will be merged together into a single CSS
output file.
•For example,
@import "foo.scss";

Controls Directive & Expressions
• SassScript supports basic control directives and expressions for including
styles only under some conditions or including the same style several
times with variations.
@if
• The @if directive takes a SassScript expression and uses the styles nested
beneath it if the expression returns anything other than false or null:
• For example:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
is compiled to:
p { border: 1px solid; }

@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;
}
}
is compiled to:
p {
color: green; }

@for
•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 <start> through <end>and @for $var
from <start> to <end>.
Through
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i; }}
is compiled to:
.item-1 { width: 2em; }
To
@for $i from 1 to 3 {
.item-#{$i} {
width: 2em * $i; }}
is compiled to:

@while
•The @while directive takes a SassScript expression and repeatedly
outputs the nested styles until the statement evaluates to false.
•For example:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i – 2;}
is compiled to:

Mixin Directives
•Mixins allow you to define styles that can be re-used throughout the
stylesheet
Defining a Mixin: @mixin
•Mixins are defined with the @mixin directive.
•It’s followed by the name of the mixin and optionally the arguments, and a
block containing the contents of the mixin.
•Mixins are included in the document with the @include directive.
•This takes the name of a mixin and optionally arguments to pass to it, and
includes the styles defined by that mixin into the current rule.

For example,
the large-text mixin is defined as follows:
@mixin large-text {
font: { family: Arial; size: 20px; weight: bold; }
color: #ff0000; }
Including a Mixin: @include
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;}
is compiled to:
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px; }

Our Technologies Stack:
Server Side Application JavaScript Frameworks
Mobile App Development
Database System and Cloud

THANKS!
ANY QUESTIONS? PLEASE GET IN TOUCH!
www.cubettech.com
Email : info@cubettech.com
Skype : cubet.se
Phone: +91 484 405 4324

Contact us:
Kemp House
160 City Road
London- EC1V2NX,
UK.info@cubettech.com
+44 2071938618
Carnival Info Park,
Unit IX-C, 9th floor PhaseIV,
Kochi, Kerala, India
info@cubettech.com
+91 484 4054324

Sass_Cubet seminar

More Related Content

What's hot (20)

Similar to Sass_Cubet seminar (20)

More from Cubet Techno Labs (6)

Recently uploaded (20)

Sass_Cubet seminar