Introduction to SASS
SASS (Syntactically Awesome Stylesheets) is a stylesheet scripting language for CSS. With SASS you get the power to use features like variables, mixins, nesting etc. thereby decreasing the overall complexity and length CSS sheets. It creates reusable functions and thus increasing code maintainability. The initial version of SASS had an intended syntax, but the later version a new syntax was introduced which did not care about indentation levels or white-space. It uses brackets and semi-colons just like CSS. This version of SASS is called SCSS (Sassy CSS).
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. Additionally, Vaadin has a Java implementation of Sass. Sass supports integration with the Firefox extension Firebug.
So we will start with few features of this scripting language for CSS. We have following features which will be discussing in little details below.
Variables
Just like in other scripting or object oriented languages now in CSS we can have variables to store information that could be reused. You can assign any font, color, or any other CSS attribute to a variable which you may use throughout the code. SASS uses $ symbol to denote a variable.
E.g
$red-color: #ff0000;
.menu-navigation {
border-color: $red-color;
color:
darken($red, 10%);
}
Interesting fact here is that in variable names hyphen and underscores can be used interchangeably. Variable could be made global with !global keyword.
Rules and Directives
You can think of Mixins as functions which can also take parameters if required. A Mixin helps you create a group of CSS declarations which you may want to reuse throughout you code multiple times. To create a mixin we use @mixin directive. We may pass a parameter in the same which can be used in code below. Once you create a mixin you can call it using @include
a. @import
This rule is used to import scss and sass files at the top of file
b. Nested @import
To import within CSS rule
c. Partials
Partials are similar to partial views in MVC. To modularize large CSS files one may create a separate partial class containing small code snippets.
Partials classes are created with a prefix underscore like _Partial.scss. These partials are then used using @import directive.
d. @media
To add media style without repeating them
e. @extend
To add style of one class into another class
f. @debug
To print value in output.
g. @warn
This is same as @debug with the difference that they could be turned off with –quiet command
h. @error
This is used to throw error with stack trace
Mixins
You can think of Mixins as functions which can also take parameters if required. A Mixin helps you create a group of CSS declarations which you may want to reuse throughout you code multiple times. To create a mixin we use @mixin directive. We may pass a parameter in the same which can be used in code below. Once you create a mixin you can call it using @include
E.g
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
Control Expressions
We can use control statements which we use in any oops language like If-Else, For, each, while, etc
div {
@if $Company == avanade {
color: orange;
} @else if $type == accenture {
color: blue;
} @else {
color: black;
}
}
Output Style
The output style is used to define how do you want your output CSS to be structured. It has three different options
:Nested - It add the indentation to each rule
:Expanded - it add indentation to each property within the rule
:Compact - Each rule appear in single line
:Compressed – It is kind of minified version of CSS with no whitespaces
Function
User defined functions could be created as in other programming languages and it contains collection of statements as below
@function double-pix($n) {
@return $n * 2;
}
#sidebar { width: double-pix(5); }
Example for practical implementation
Below we have tried to show an example how can we use SASS in our page say an application form.
Let’s say I define a class for validation error in my .scss file with following attributes
.css-validation-arrow {
border-color: $red-color;
position: absolute;
top: 0;
left: rem-calc(40);
}
Now when this SCSS file is compiled, it would get compiled to following class in your.css file.
.css-validation-arrow {
border-color: #FF0000;
position: absolute;
top: 0;
left: 2.5em;
}
Now let’s say I have a span in my .cshtml file of .net project which I would like to highlight for a validation error occurring in my input field of my application form.
I will just have to define this class just like my normal css class and it would fire validation error as specified in css.
<small class="error">
<span class="css-validation-arrow"></span>
You must select the sender account
</small>
SASS Installation
We would need to follow following steps for SASS installation using ruby
1. Download Ruby, http://rubyinstaller.org/downloads/ (NB! Not x64 version)
2. Run installation
2.1. Add Ruby executables to your path
2.2. Associate .rb and .rbw files with Ruby installation
3. Run cmd
3.1. Write: gem update --system
3.2. gem install sass -v "3.2.13"
(The source files can be found under C:\[RUBY]\lib\ruby\gems\[VERSIONNUMBER]\gems)
We would now need to install compass to watch over our changes. Follow following steps for compass install
1. In cmd, write: gem install compass -v "0.12.2"
To compile and watch our changes we can use following commands in command prompt Compass compile
● Compile: compass compile [path/to/project]
● Watch the project for changes and compile whenever it does: compass watch [path/to/project]
When a compass project is created a file called config.rb is created. The file contains settings for the compass project that will be used during compilation.
SASS Intellisense in Visual Studio 2012
There are various extension available for SASS Intellisense which could be used. Below is example for mindscape
1. Download Visual Studio extension Web Workbench from Mindscape (is used for Syntax highlighting, intellisense etc),
2. Since Compass will be used for compilation, uncheck all checkboxes from the compile
column in the “Mindscape/Web Workbench Settings” menu option in Visual Studio.
Or we can extend compass watch tool in Visual Studio using following steps:-
1. Go to Tools/External Tools/Add in visual studio
1.1. Give title: Compass Watch
1.2. Command: C:\[RUBYROOT]\bin\compass.bat
1.3. Arguments: watch $(ProjectDir)
1.4. Initial directory: $(ItemDir)
1.5. Uncheck “close on exit”
1.6. Check “Use output window”
2. Right click on toolbar in Visual Studio and choose “Customize”
2.1. New/Toolbar name: Compass
2.2. Tab Commands
2.2.1. Toolbar: Compass
2.2.2. Add command…
2.2.3. Tools
2.2.4. External command X (X is the index of Compass Watch in External Tools)
Hello, my name is Monikandan. I'm a 40 year old self-employed ML Group from the Nagercoil.
No comments:
Post a Comment