Introduction to CSS:
Colors and animations are the dream of web designer to make web pages more attractive and colorful. Almost every designer/developer know about the usage of CSS, means cascading style sheet which is language that add the style of your HTML tag’s contents. It shows the display beauty of web pages. We can use CSS in HTML using Three (03) way internal, external and inline. There are 100’s of properties/ attributes available in CSS like background/foreground color, border, shading, animation etc to make webpage alive on internet.
CSS (Cascading Style Sheet):
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
The snippet of CSS with HTML in which internal CSS has been applied!
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
}
h1 {
color: green;
margin-left: 36px;
}
</style>
</head>
<body>
<h1>Fahad Hussain Free Computer Education</h1>
<p>fahadhussaincs.blogspot.com</p>
</body>
</html>
But, what is SAAS (Syntactically Awesome Style Sheets):
Now, these day three primary preprocessor of CSS are in the market, namely SAAS, LESS, AND STYLUS. But in this Article we are going to understand the working differences between CSS and SAAS, so, What is CSS Preprocessor, Actually, in these days of professional working in the webpages using of hexadecimal color name, bracket and related material very critical according to the demand, so the scientist come to ground to do solve this problem in the form of CSS preprocessor, it is a scripting language (like JavaScript) that capability to extends the CSS and then compile it into simple CSS.
CSS VS SAAS:
“.SCSS” and “.SASS” are the two basic syntaxes of CSS also called superset of CSS3. Which means that if I have been working on CSS file using CSS3 actually it also a valid SCSS with the extension of .scss. The other extension derived by Hamls’ Terseness, the purpose of designing of .sass to avoid the usage of bracket and semicolon, it has own indentation of line that shows the block as like python. By using SAAS the developer has the better readability than simple CSS also he/she can use variable features to avoid to remember the hexadecimal number of color name like $yellow: #fce473; on it CSS rules can be nested within each other.
Same above example convert into SCSS code:
<!DOCTYPE html>
<html>
<head>
<style>
$foregroundcolor: #008000;
$backgroundcolor: #ff0000;
$marginsize:30px;
Body
{
background-color: $backgroundcolor;
}
h1
{
Color: $foregroundcolor;
Margin-left: $marginsize;
}
</style>
</head>
<body>
<h1>Fahad Hussain Free Computer Education</h1>
<p>fahadhussaincs.blogspot.com</p>
</body>
</html>
Same above example convert in
to SASS code: <!DOCTYPE html>
<html>
<head>
<style>
$foregroundcolor:red;
$backgroundcolor:green;
$marginsize:30px;
Body
background-color: $backgroundcolor;
h1
Color: $foregroundcolor;
Margin-left: $marginsize;
</style>
</head>
<body>
<h1>Fahad Hussain Free Computer Education</h1>
<p>fahadhussaincs.blogspot.com</p>
</body>
</html>
Advantages over CSS:
After understand about the basic differences between them, we can say that SAAS provides better understanding and readability over CSS but for large data file because if you use it or less data file it become overwhelm for you. It provides learning curve and compatibility, feature of variable and holding the different data types value add on it more advantages over CSS by using SAAS we can nestedthe properties of CSS and easily handle the operator on it, also mixinswhich is custom functions that can accept parameters and will prevent useless repetitions. Overall it the good choice for developer to make attractive and more powerful style sheet in the websites.
