What is the difference between sass and scss

Sass and scss are two different syntaxes provided by the CSS preprocessor Sass, both are similar and do the same thing, but are written in different styles. SCSS is the latest and considered better than Sass.

Let’s first learn about the two different syntaxes sass and scss provided by the CSS preprocessor Sass.

sass, also known as indentation syntax, is a programming language similar to Ruby.

It comes from another preprocessor called Haml, inspired by the simplicity of Haml, and designed and written by Ruby developers, so Sass stylesheets use Ruby-like syntax. No

sass is for those who prefer simplicity similar to CSS. It uses the indentation of the line to specify blocks instead of parentheses and semicolons, so there are parentheses, no semicolons and strict indentation. Files in sass syntax use the extension .sass.

Example:

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
  -webkit-border-radius= !radius
  -moz-border-radius= !radius
  border-radius= !radius.my-element
  color= !primary-color
  width= 100%
  overflow= hidden.my-other-element
  +border-radius(5px)

As we can see, this is quite a change compared to regular CSS! The variable flag is "!" not "$", and the assignment symbol is "=", not ":", which is a bit strange!

But this was what Sass looked like before version 3.0 arrived in May 2010, after which Sassy CSS introduced a brand new syntax called scss. This syntax aims to bridge the gap between Sass and CSS by introducing CSS-friendly syntax.

scss, similar to the syntax of CSS, fully conforms to CSS standards,

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
.my-element {
  color: $primary-color;
  width: 100%;
  overflow: hidden;
}
.my-other-element {
  @include border-radius(5px);
}

scss is definitely closer to CSS than sass.

The difference between scss and sass

The sass syntax is similar to rubby, it has no brackets Usage, there is no strict indentation, no semicolon; the variable symbol is "!" instead of "$", and the assignment symbol is "=" instead of ":".

less syntax is similar to CSS, requiring the use of braces and semicolons; the variable symbol is "$" and the assignment symbol is ":".

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of What is the difference between sass and scss. For more information, please follow other related articles on the PHP Chinese website!