Sass - the technology most of you have heard of
Let me assume that some of the learners of front-end web
development at elementary level might find difficulty understanding of what
Sass is and why we use it. Admittedly, I
was the person who was on the same track. I saw several basic tutorials at the time when I was about to learn
Sass. But sadly I came up with some ambiguous ideas about Sass resulted in I
could not even start to learn. The problem with those tutorials was that the
mentors just uttered some prewritten words
and terms on websites, and then started coding. How funny! Without clearing the
basic concept they started coding. Anyway, let it go. Luckily, now I have a
clear idea about it. See me writing an article. :P
In the current article I will try my best to explain Sass in
words of one syllable, InShaAllah.
Sass stands for Syntactically Awesome Stylesheets.
Sass can extend CSS code. That’s why it is called a CSS
extension language. And since Sass processes CSS behind the scenes before CSS
goes in action, it is also called a CSS preprocessor scripting language.
Does that make sense to you?
I hope not!
Well, that’s not enough for a clear understanding, especially
for absolute beginners, I think. And that was what happened to me at initial
stage.
So, how does Sass extend CSS code? That’s the burning
question, isn’t it?
Let’s think not in a zigzag way, okay? Think simple and be
simple, and at the end of the day win the race.
In simple terms, we could say that Sass is a scripting language with which we can write our CSS
code programmatically. Typically we cannot make the CSS code programmable. But
when we write stylesheet using Sass language we can have our CSS code
programmable. That means we can then manipulate the CSS code as we do in any other
programming languages.
Now, I think, it’s clear so far that Sass is another way of
writing CSS code. We write Sass code in a .sass/.scss file, and it is processed
into simple CSS code automatically in a .css file. We don’t need to edit .css
file manually. That will be automatically edited. We will just edit .scss/.sass
files.
Sass adds some real program language features like nested
rules, variable, mixins, functions, conditional and mathematical operations,
selector inheritance, inline imports and more to CSS. It brings a real programming
language flavour to CSS which results in clean, extensible and reusable CSS
code.
Keep it in mind that only the CSS code is executable by
browsers. In other words, browsers can recognize the CSS code only. Sass is
just processed into CSS code being under the hood. Developers write Sass code
in .sass/.scss file. Then that code converts into CSS code in .css file
automatically. Developers need not handle the .css file manually. Ultimately,
the .css file comes in action.
Now the question is – why do we use Sass to process CSS?
Well, great, now again -
“CSS itself is not programmable. That is where Sass can help
us. Sass lets us make CSS code programmable by adding some programme features
such as nested rules, variable, mixins, functions, selector inheritance, inline
imports and other nifty goodies. It brings a real language flavour to CSS which
results in programmable CSS code.”
So, the answer is- we
use Sass to make CSS code programmable.
Okay, so far?
Now the question is – how can we make CSS programmable using
Sass? Well, as the elders explain it, example is better than percept. So we’re
gonna dig in with some examples. That must be great, right?
Traditionally we create a CSS file with .css extension, and
then write css code, something like this:
h1{
font-size: 40px;
line-height: 56px;
margin-bottom: 10px;
}
h2{
font-size: 30px;
line-height: 42px;
margin-bottom: 10px;
}
h3{
font-size: 20px;
line-height: 28px;
margin-bottom: 10px;
}
Let’s say we want that pixel ( px ) units to be converted
into ‘em’ units. All we need to do is convert them manually using the following
formula –
1.
font size : expected font pixel / parent element
font pixel
2.
margin/padding: expected margin(px)/font size
3.
line-height:
((font size pixel*140)/100)/ font size pixel
That goes without saying that we
have to repeat each of the processes for each of the units. Obviously that’s a
tiresome and time consuming job. The code might look like the following:
h1{
font-size: 2.5em; /*40px/16px*/
line-height: 1.25;
margin-bottom: 0.25em; /*10px/40px*/
}
h2{
font-size: 1.875em; /*30px/16px*/
line-height: 1.4;
margin-bottom: 0.33em; /*10px/30px*/
}
h3{
font-size: 1.25em; /*20px/16px*/
line-height: 1.4;
margin-bottom: 0.5em; /*10px/20px*/
}
Naturally, a programmer would be reluctant to do that
useless job, especially, where there is Sass in this web world for him :P . He might write functions for px to em
conversion and for the line height to automate the process. And then he should go
to bed leaving the responsibility on Sass.
The Sass code might look like the following:
$base_fontSize: 16px;
// convert px to em
@function em( $expected__px, $parentElement__fontSize: $base_fontSize ){
@return ( $expected__px / $parentElement__fontSize ) * 1em;
}
// line height can be 140%-150% of font size
@function line__height($currentElement__fontpx: $base__fontSize, $percent: 150){
@return (($currentElement__fontpx * $percent) / 100) / $currentElement__fontpx;
}
h1{
font-size: em(40px); /*40px/16px*/
line-height: line__height(40px);
margin-bottom: em(10px,40px); /*10px/40px*/
}
h2{
font-size: em(30px); /*30px/16px*/
line-height: line__height(30px);
margin-bottom: em(10px,30px); /*10px/30px*/
}
h3{
font-size: em(20px); /*20px/16px*/
line-height: line__height(20px);
margin-bottom: em(10px,20px); /*10px/20px*/
}
Well, for absolute beginners, it might seem a bit hard. But
it is a lot more simple than you think. If you don’t have a clear idea about
pixel, em, line height, then I would recommend you to research. Here in this
example I was just trying to explore the strength of Sass. Just take it as a
simple concept. If you’re interested, then start to learn from scratch.
Oh, a request to you, this article is not well-written, I
think. If you’d like to give any suggestions, whether it is language-related or
development-related, please leave a comment in the comment box. I’ll be happy
to hear from you.
Have fun!
Comments
Post a Comment