What are Scss and Sass?

Sass is a CSS preprocessing language written in Ruby; Sass can provide a simpler and more elegant syntax, while providing a variety of functions to create maintainable and manageable style sheets. Scss is a new syntax introduced by Sass3 and is a superset of CSS3 syntax. To put it bluntly, Scss is an upgraded version of Sass.

The operating environment of this article: Windows 7 system, Dell G3 computer, Sass version 3.7.4.

Recommended: css video tutorial

What is Sass

Sass is a language higher than The metalanguage of CSS can be used to describe file styles clearly and structurally, and has more powerful functions than ordinary CSS. Sass provides a cleaner, more elegant syntax while providing a variety of features to create maintainable and manageable stylesheets.

Sass is a CSS preprocessing language written in Ruby language. It was born in 2007 and is the largest mature CSS preprocessing language. It was originally designed to work with HAML (an indented HTML precompiler), so it has the same indentation style as HTML. SASS is an extension of CSS3 that adds rule nesting, variables, mixins, selector inheritance, and more. Convert it into standard, well-formed CSS code by using command line tools or WEB framework plug-ins.

Sass official website: http://sass-lang.com

What is Scss

Scss is Sass 3 The introduction of new syntax is the abbreviation of Sassy CSS, which is a superset of CSS3 syntax, which means that all valid CSS3 styles are also suitable for Sass. To put it bluntly, Scss is an upgraded version of Sass. Its syntax is fully compatible with CSS3 and inherits the powerful functions of Sass. That is, any standard CSS3 stylesheet is a valid SCSS file with the same semantics. In addition, SCSS can also recognize most CSS hacks (some CSS tricks) and browser-specific syntax, such as the ancient IE filter syntax.

Since Scss is an extension of CSS, all code that works properly in CSS will also work properly in Scss. In other words, for a Sass user, you only need to understand how the Sass extension works to fully understand Scss. Most extensions such as variables, parent references, and directives are identical; the only difference is that SCSS requires semicolons and braces instead of newlines and indentation.

Similarities and Differences between Scss and Sass

Sass and Scss are actually the same thing. We usually call it Sass. There are differences between the two. The main differences are the following two points:

1. The file extensions are different. Sass uses the ".sass" suffix as the extension, while Scss uses the ".scss" suffix as the extension.

2. The grammar writing method is different. Sass is written with strict indentation grammar rules, without braces ({}) and semicolon (;), while the grammar writing of Scss is the same as our CSS The grammar is written in a very similar way.

We might as well take a look at the following two pieces of code, which will be more intuitive and easier to understand.

Simple Sass code

#sidebar
width: 30%
background-color: #faa

Corresponding Scss code

#sidebar {
   width: 30%;
   background-color: #faa;
}

In addition, SCSS is not sensitive to whitespace characters. The above code can also be written as follows:

#sidebar {width: 30%; background-color: #faa}

We might as well share a few more pieces of Scss code

Sass allows nested selectors. For example, the following CSS code:

div {
     h1 {
        color:blue;
    }
 }

The output CSS style is

div h1 {
    color: blue;
}

In nested code blocks, you can use & to refer to the parent element. For example, the a:hover pseudo-class can be written as:

a {
    &:hover { color: #0099cc; }
}

The output CSS style is

a:hover {
   color: #0099cc;
}

For more programming-related knowledge, please visit: Programming Learning! !

The above is the detailed content of What are Scss and Sass?. For more information, please follow other related articles on the PHP Chinese website!