SASS vs SCSS in CSS

SCSS and SASS is a preprocessor that lets you use features that aren't a part of the wider CSS standard yet. and provides better workflows for maintaining your stylesheets.

SASS

SASS (Syntactically Awesome Stylesheets) is a CSS pre-processor that lets you use 

variables, mathematical operations, mixins, loops, functions, imports, and other interesting

functionalities that make writing CSS much more powerful. In some ways, you may think of

SASS is a style sheet extension language because it extends the standard CSS

characteristics by introducing the benefits of a basic programming language. So SASS will

compile your code and generate the CSS output a browser can understand.


SCSS


SCSS is the main syntax for the SASS which builds on top of the existing CSS

syntax. It makes use of semicolons and brackets like CSS (Cascaded Style Sheets)


List down the main difference between SAAS and SCSS.


SASS 

  • is used when we need an original syntax.
  • SASS follows strict indentation.
  • SASS has a loose syntax with white space and no semicolons
  • SAAS file extension is .sass.
  • SASS has more developer community and support than SCSS.


SCSS

  • The code syntax is not required for SCSS.
  • SCSS has no strict indentation.
  • The SCSS resembles more to CSS style and the use of semicolons and braces is mandatory.
  • SCSS file extension is .scss

Example of SASS













Example of SCSS















Conclusion
CSS pre-processors are here to stay. They extend the basic CSS features by providing you with a set of powerful functionalities that will raise your productivity right away. We mentioned a few benefits but there are many more, like inheritance, functions, control directives, and expressions like if(), for() or while(), data types, interpolation, etc...

Comments

Post a Comment

Popular posts from this blog

Call Stack in JavaScript with examples

Image
  Summary  in this tutorial, you will learn about the JavaScript Call Stack which is a mechanism to keep track of the function calls. Introduction to JavaScript Call Stack JavaScript engine uses a  call stack  to manage exection context the Global Execution Context and Function Execution Contexts. The call stack works based on the LIFO principle i.e., last-in-first-out. When you execute a script, the JavaScript engine creates a Global Execution Context and pushes it on top of the call stack. Whenever a function is called, the JavaScript engine creates a Function Execution Context for the function, pushes it on top of the Call Stack, and starts executing the function. If a function calls another function, the JavaScript engine creates a new Function Execution Context for the function that is being called and pushes it on top of the call stack. When the current function completes, the JavaScript engine pops it off the call stack and resumes the execution where it ...
Read more

Every JS developer should know these concepts.. Syntax Parsers, lexical Enviroments and Execution context

Syntax parsers  A program that ready your code and determines what it does and if its grammer is valid. Your code is not magic. Someone else wrote a program to translate it for the computer.. Lexical Enviroment  Where something sits physically in the code you write.. lexical meand having to do with words or grammer. A lexical environment exists in programming languages in which where you write something is important.. Execution Context  A wrapper to help manage the code that is running.. There are lots of lexical environments. Which one is currently running is managed via execution contexts. It can contain things beyond what you are written in your code.
Read more