267 Internet Technologies
Web Developer & Design, SEO, Mobile, E-Commerce Software and Social Media

267.What's SASS and SCSS ?

What

The technology we use today is outdated after a month. Constantly new software languages, markup languages, frameworks, and many other software projects that make our work easier.

SASS and SCSS are one of them. Sass was a Ruby Gem by Hampton Catlin in 2006, developed by the idea of developing CSS and CSS3 with a structure similar to Ruby. Continued to be developed by Hampton until 2008, Sass is currently being developed by hundreds of developers with repo on Github.

Sass translates the code written in its own syntax into CSS codes using the editor. Often, the editor used is added using the sss, scss add-on. The editor, with each save command, occurs as a file in the SASS, CSS output on the predefined path. This CSS file created by Sass, "* .sass" and "* .scss" is used by including it in the project.

If you want to automatically compress the CSS file created during compilation, you can obtain an extra CSS file with extension * .min.css and use it as an alternative in your project.

 

What's SASS ?.

Sass (syntactically awesome stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein continued to extend Sass with SassScript, a simple scripting language used in Sass files.
 
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS", uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.

When writing CSS with Sass; Variables, cycles (for, each, while), decision structures (if, else), function, mixin, nesting, selector inheritance.

When using Sass, ";" and "{}" are not used as they are in CSS. Sass was so based on the ruby language. But when the use as front-end is offered, it is rebuilt as SCSS.

 

What's SCSS?.

When writing Scss, we can use characters like ";" and "{}" as we are used to from CSS.

Scss was built into Sass, considering developers' CSS coding routines. File extension (* .sass) should be used when coding Sass, and file extension (* .scss) when coding Scss. All the features of Scss and Sass are the same, only the syntax is different.
 
SASS:
$bg-color:#333
.menu
   background-color:$bg-color
   ul
      li a
         color:#fff
SCSS:
$bg-color:#333;
.menu {
   background-color:$bg-color;
   ul {
      li a {
         color:#fff;
      }
   }
 }
OUTPUT:
.menu {
   background-color:#333;
}
.menu ul li a {
   color:#fff;
}