SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which is very helpfull in to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of document structurally.
Why use Sass
Following are some reasons behind using Sass:
Sass is a pre-processing language and it has its own syntax for CSS.
1.It is easy, short and clean in a programming form.
2.It has some features that are used for creating CSS and facilitates writing code more efficient and easy to maintain.
3.It contains all the features of CSS along with some advanced features.
4.It provides document style presentation better than flat CSS.
5.It facilitates reusability methods, logic statements and some of the built-in functions like color manipulation, mathematics, and parameter lists.
6.It facilitates you to keep your responsive design project more organized.
7.You don’t need to repeat similar CSS again and again in your project.
Recommended Post: How to Pass Data in PHP, Javascript and CSS
1.It helps in writing clean CSS in a programming form which helps designers and developers work more efficiently and quickly.
2.It allows to writing CSS quickly.
4.Sass is suited with all versions of CSS, we can use any available CSS libraries.
1.Operating System − Cross-platform
2.Browser Support − IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera
3.Programming Language − Ruby
Download ruby from here and run the .exe file.
after complete the Installation. go to the start menu and open the command prompt with ruby.
Run the following command: gem install sass
Create an HTML file having the following code:
<html>
<head>
<title> example of sass</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Weblizar Sass Example</h1>
<h3>Welcome to Weblizar</h3>
<p>Web solution for all .</p>
</body>
</html>
Now create a file named “style.scss”. It is similar to CSS file. The only one difference is that it is saved with “.scss” extension. Put the Both, .htm and .scss files inside in the folder ruby. You can save your .scss file in the folder ruby\lib\sass\ (before this process, create a folder as sass in lib directory).
Suggested Post: How To Minify CSS And JavaScript Of Your WordPress Website
Now, execute the following code: sass –watch style.scss:style.css
It will create a new CSS file named “style.css” inside the root folder automatically. Whenever you change the SCSS file, the style.css file will be changed automatically.
The style.css file will have the following code when you run the above-given command
h1{
color: #AF80ED;
}
h3{
color: #DE5E85;
}
SCSS Syntax: The SCSS (Sassy CSS) can be specified as an extension of CSS syntax. It simply means that every valid CSS is a valid SCSS also. SCSS makes it easy to maintain large style sheets. It uses the extension “.scss”.
Indented syntax: Indented syntax is the older syntax and called as Sass. You have to write CSS concisely for using this type of syntax. It uses the extension .sass”.
SASS Indented syntax or SASS is an alternative to CSS based SCSS syntax. It has the following features:
1.It uses indentation rather than {and} to delimit blocks.
2.It uses newlines instead of semicolons (;) to separate statements.
3.Property declaration and selectors must be placed on its own line and statements within {and} must be placed on new line and indented.
See the following SCSS code:
.weblizar_id
{
color = red;
font-size= px;
}
This syntax is older so it is not recommended to use new Sass files. If you use this file, you will get a display error.
Most of the CSS and SCSS syntaxes are compatible with SASS but there are some differences also. You can see the differences in the following sections:
1.Property syntax:
You can declare Sass properties in two ways:
For example:
.weblizar_id
{
:color red;
:font-size px;
}
Both properties declaration methods i.e. without semicolon and colon prefixed to property name can be used by default but you should use only one property syntax to specify when you use the: property_syntax option.
Leave a Reply