What is SASS?
What is SASS: SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which is very helpful in reducing repetition with CSS and saving time. It is a more stable and powerful CSS extension language that describes the style of the document structurally.
Reasons To Use Sass
Following are some reasons behind using Sass:
Sass is a pre-processing language and it has its 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 facilitates writing code more efficiently and is 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
Advantages of SASS
1. It helps in writing clean CSS in a programming form which helps designers and developers work more efficiently and quickly.
2. It allows one to write CSS quickly.
4. Sass is suited to all versions of CSS, we can use any available CSS libraries.
Needs for SASS
1. Operating System − Cross-platform
2. Browser Support − IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera
3. Programming Language − Ruby
The installation process of Ruby
Download Ruby from here and run the .exe file.
after completing the Installation. go to the start menu and open the command prompt with ruby.
Run the following command: gem install sass
SASS Example
Create an HTML file having the following code:
Also Checkout: The Present And The Future Of SaaS
<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 a CSS file. The only difference is that it is saved with the “.scss” extension. Put Both, .htm and .scss files inside the folder ruby. You can save your .scss file in the folder ruby\lib\sass\ (before this process, create a folder as sass in the 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;
}
Sass Syntax
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. SCSS makes it easy to maintain large style sheets. It uses the extension “.scss”.
Indented syntax: Indented syntax is the older syntax and is called Sass. You have to write CSS concisely for using this type of syntax. It uses the extension .sass”.
Sass Indented Syntax
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 their line and statements within {and} must be placed on a 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.
Syntax Differences of Sass
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:
People Also Check: How to Pass Data in PHP, JavaScript, and CSS
1. Property syntax:
You can declare Sass properties in two ways:
- Declare properties similar to CSS but without semicolon (;).
- Declare a colon ( : ) as a prefix to every property name.
For example:
.weblizar_id{
:color red;
:font-size px;
}
Both property 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.