What is Sass ?

What is Sass(Syntactically Awesome Style sheets)? Sass is a per-processed language we will first write CSS in Sass and then compile Sass file in CSS because browser didn’t not understand Sass we have to convert it in CSS so that browser can understand.
Advantage of Sass
1)We can create CSS verr faster.
2)We can organize our CSS.

To user Sass in our machine we have to install Ruby in out machine
We can write Sass in two ways
1).Sass
If you see carefully there is no curly braces on this extention

.bgColor
  background: orange
  border: 1px solid black

.foo
  text-align: center
  Font-size: 1.3em

2).Scss

.bgColor{
  background: orange
  border: 1px solid black
}
.foo{
  text-align: center
  Font-size: 1.3em
}

Sass allows us to use
1)Variables

$white:    #fff;
$black:    #000;
$yellow:   #FFBA00;

2)Nesting

div {
    font-size: 10px;
    h1 {
        color: black;
    }
}

Nesting Output

div { font-size: 14px;}
div h1 { color: black; }

3)Partials
In Sass we can use partials for example
if we have created variable.Scss, Mixins.Scss and style.css we can use this as a partials when we compile our .Scss file it will compile all the .Scss file in one style.css.

@import "variables.scss";
@import "mixins.scss";
Get all .Scss file result in style.css file.

4)Mixins
Mixins are just like a function.

@mixin roundedCorner($radius:10px){
	border-radius:$radius;
}
.addRoundedCorner{
	img
{
	@include roundedCorner(20px)
}
}

For example you have created mixins with border radius property name roundedCorner now in image inside addRoundedCorner div you want to add 20px of border radius to the image you will you use roundedCorner like i have shown in example if you will not pass any parameter it will take the default one. (10px)

if parameter is passed
.addRoundedCorner img{
border-radius:20px;
}

if No parameter is passed
.addRoundedCorner img{
border-radius:10px;
}

5)Extends
Extends meas we can use one class as a base class used in another class Suppose we have base class(.baseBtn) button on this base class we can create other class

.baseBtn{
display:inline;
padding:10px;
text-align:center;
border-radius:5px;
background-color:orange;
}


This will is our Scss rule

.baseBtn{
display:inline;
padding:10px;
text-align:center;
border-radius:5px;
background-color:orange;
}
.btn-red{
@extend .btn;
background-color:red;
}
.btn-blue{
@extend .btn;
background-color:orange;
}

This Scss will output this css result.

.baseBtn, .btn-red, .btn-blue{
 background-color: orange;
border: medium none;
border-radius: 5px;
color: #fff;
display: inline;
font-weight: bold;
padding: 10px;
text-align: center;
}
.btn-red{
background-color:red;
}
.btn-blue{
background-color:orange;
}

Leave a Reply

Your email address will not be published. Required fields are marked *