Sass and CSS! A Worth Having Relationship: Part-2

Working with beautiful CSS is awesome, thrilling and fun to code. You could say the most favorite language of any web designer is CSS. In fact, CSS is kind of language that everyone love to code. As the saying goes nothing is perfect, CSS got some issues within itself. Even though the flexibility and reliability, CSS own some complaints about it’s complexity as it’s hard to manage thousands of lines of code with proper indentation. To overcome this problems, developers Hampton catrin and Nathan wiezenbaum introduced a new style sheet syntax that lets you write structured and clean code.

They named it Sass which stands for “syntactically awesome style sheets”. Sass is a CSS pre-processor, the most comprehensive approach to deal with CSS problems is a language like dynamic scripting that at the end pre-processor will compile our new syntax codes into a browser readable language CSS.

Actually, Sass can be extremely useful for web designer as developer, who wants more work-done while spending less time on code management. In reality, the Sass comes with two versions. the original version of Sass also called as “the indented syntax” was different from the actual CSS. It’s lacking of curly braces and semi-columns that might be the reason of code-errors if programmer forgot to use newlines and indentation with specific number of spaces.For example:


$font-family: Arial, Helvatica
$color: #c7c7c7

body
	font: $font-family
	color:$color

You can see that instead of curly braces and semi-columns, sass syntax uses indentations. It will not compile correctly if you uses an extra space, instead it will compile the error to gives you head-ache. Little bit messy right? No problem, what else developer are supposed to do?

They developed another syntax called SCSS(“sassy CSS”) that overcome the existence problem of Sass syntax and uses the curly braces and semi-columns. SCSS comes with all the attributes of a scripting language like constants, variables, loops, functions and many more. You can use any of this features as per your requirement. For example:


$font-family: Arial, Helvatica;
$color: #c7c7c7;

body{
	font: $font-family;
	color:$color;
}

Same code of Sass and SCSS will compiled to .css as follows:


body{
	font-family: Arial, Helvatica;
	color: #c7c7c7;
}

In short SCSS inherits some properties of CSS. But before diving into the actual code, you should install Sass first. Read my previous article on environment set up for Sass to get to the bottom of this article.

Features of Sass

Organize your code using partials.

This concept simply specify dividing code into smaller files and then it will get compiled into one single file. In CSS, we use @import to linking the additional and external stylesheet files. It’s quite helpful for the implementation of large project’s style sheet. Let’s say we have a file named style.css and it consist of several @import function to link the other style sheet files within another folder. For example:


@import url('/css/responsive.css');
@import url('css/nav.css');
@import url('.bootstrap/bootstrap.css');

This types of coding may make your site slow, because of the browser request that has to be made to load that extra CSS files. Sass has a features that break large style sheets into partials but more briefly and when your SCSS files are being called, all of it’s code will imported in main CSS file. For example:


@import '/partial/nav.css';
@import '/partial/resposive.css';

Looks exactly same as CSS right? Yep, but a bit different. partial are special kind of files that comes with prefix of and underscore character. This character tells Sass that it should not be compiled into a CSS sheet. For example:


@import "_partial/variables";
@import "_partial/typography";

Media queries

You can also code your media queries with nesting function. For example:


.grid-2-3{
	width:66.66%;
	@media screen and (max-width: 450px){
		width:100%;
	}
}

Will output the code in .css as:


.grid-2-3{
	width:66.66%;
}
@media screen and (max-width:940px){
	.grid-2-3{
		width:100%;
	}
}

Nesting

Nesting used to complete the features do not repeat yourself, as we implement media queries and basic CSS rule in Sass using nesting. Let’s see some other nesting techniques.

Nesting with parent selectors

This concept will help you to add a combined selector as per your requirement. By simply adding ampersand(&) with nested selector. For example:


.button{
	&.selected{
		a{
			background:$brown;
			color:$grey;
		}
	}
}

Would compiled to CSS:


.button{
	background:#f3ffff;
	color:#df7813;
}
.button.selected a{
	background:#df7813;
	color:#f3ffff;
}

Using nesting with pseudo selectors

list of pseudo selectors in CSS:


:hover
:active
:focus
:after
:before

I know you can’t feel your breathe without hover and active effects. Don’t worry, you can use pseudo selectors in nested sass to get those effect of the elements that you have used. Sass selectors comes as a bit differ then CSS. List of pseudo selectors in SCSS:


&:hover
&:active
&:focus
&:before
&:after

How you can define the selectors in Sass? Let’s say you have a link that you want to style it when somebody hover over it. Then sass code will goes like:


a{
	&:hover, &:active{
		border-bottom:2px solid #df7813;
		color:#df7813;
	}
}

Which will return the code in .css as:


a{
	color:#333;
}
a:hover, a:active{
	border-bottom:2px solid #df7813;
	color:#df7813;
}

Dynamic functionality over a static language

variables

As a programmer, you must have been came across the word “variables” it simply store the information which you want to use throughout your entire stylesheet. The sass variables uses the $ symbol. here’s an example.


$color:#df7813
a
	color:$color


$color:#df7813;
a{
	color:$color;
}

Will output in .css as


a{
	color:#df7813;
}

Mixins

Mixins is an approach that lets you group of CSS code that you want to use multiple time on your site with variables. You can pass different value each time you call the mixin. Mixin is highly recommended to get rid of vendor prefixes and fallback stacks as it’s annoying enough to get head-ache.

@mixin is used to create a mixin, you have to name it and then using @include you can call your pre-defined mixin as many times you wanna use that property with different variables. Just make sure to use the name of the mixin while calling it with @include.

to understand it properly, have a look at the below example of border-radius.


=border-radius($unit)
	-webkit-border-radius: $unit
	border-radius: $unit
.button
	+border-radius(5px)


@mixin border-radius($unit){
		-webkit-border-radius: $unit;
		border-radius: $unit;
}
.button{
	@include -border-radius(5px);
}

Here i have defined a mixin named border-radius that will apply 5 px border to the first element “div” and 2px border to the second element “button”. Above code will output to .css style as:


.button{
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

Operators

Sometimes it’s very fun to get in to the math situation. As a dynamic concept sass got some operators like +, -, *, /, and %. let’s make a simple example:


$width: 1366px
div
	width: 900px / $width * 100%


$width: 1366px;
div{
  width: 900px / $width * 100%;
}

would compile to .css as:


div {
	width: 65.88%;
}

Inheritance(extend):

Inheritance is very simple and easy to implement on your code. It implies the dry(don’t repeat yourself) feature of sass and make the sass file less repetitive in sass using @extend, you can inherit the properties from the parent attributes(element) or previously defined elements. In CSS file, all the properties listed sequentially underneath the elements as shown below:


.grid.grid-2-3{
	float:left;
}
.grid-2-3{
	width:66.66%;
	background:#c7c7c7;
}

Did you see any kind of less repetition of same code? nope, actually far from it. in SCSS using the concept of nesting, coding can be done as clean, logical and well organized structure.


.grid
	float:left
.grid-2-3
	@extend.grid
	width:66.66%
	background:#c7c7c7


.grid{
	float:left;
}
.grid-2-3{
	@extend.grid;
	width:66.66%;
	background:#c7c7c7;
}

compiling this code will output the same code as the above CSS have.

One extra minute:

Continue your journey to the mysterious Sass as it’s very easy to use and understand. You can visit the official website of Sass guide to get to know the extra stuff and guidelines.

2 Replies to “Sass and CSS! A Worth Having Relationship: Part-2”

  1. ex4 to mq4 decompiler fake

    After looking at a few of the blog articles on your site, I really
    appreciate your way of writing a blog. I book marked
    it to my bookmark site list and will be checking back
    in the near future. Please check out my website too and tell me
    what you think.

Leave a Reply

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