July 30, 2021
SASS is SASS(Sassy Stylesheet) providing convenience such as no need to write open/close brackets, and also no need to write a semicolon at the end of the syntax. Using SASS itself makes it easier for us to write CSS such as using variables, nesting, mixins, selector inheritance, etc.
Other advantages such as CSS that is more structured, neat, easy to understand, and most importantly can run well in all browsers.
# How to install sass:
$ gem install sass
# Running Simple Server Ruby:
$ ruby -run -e httpd . -p 8008
Create two scripts: index.html
and style.scss
<html>
<head>
<title> Import example of sass</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Simple Example</h1>
<h3>Welcome to TutorialsPoint</h3>
<p class="class1">Welcome to Tutorialspoint!!!</p>
<p class="class2">SASS stands for Syntactically Awesome Stylesheet...</p>
<br>
<p class="tutorialpoint">Tutorial point posting.</p>
<p class="lastname">Reza R</p>
</body>
</html>
$version: "1.2";
$author: "Moeclay IO";
$txtcolor: 'yellow';
$fontSize: 20px;
$txtbg: #aaa;
$name: "tutorialpoint";
/*
* Author: #{$author}
* Dokumentation version: #{$version}.
*/
body{
background-color: #333;
}
h1{
color: #fff;
}
h3{
color: #DE5E85;
}
p{
color: #{$txtcolor};
font-size:$fontSize;
}
p.#{$name}{
padding: 5px;
background-color: #{$txtbg};
color: #000;
}
p.lastname{
color: hsl(290,60%,70%);
}
And now the build script style.scss
becomes css automatically and the index.html file will still read the style.css file.
# Build scss in realtime:
$ sass --watch style.scss:style.css
author : doctor. moeclay