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
<!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 nested
the properties of CSS and easily handle the operator on it, also mixins
which 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.
No comments:
Post a Comment
Fell free to write your query in comment. Your Comments will be fully encouraged.