Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Sass and SCSS are two syntaxes of Sass (Syntactically Awesome Stylesheets). They are both used to write more structured and maintainable CSS. The following are their main comparisons in syntax and features:

1. Syntax format

Sass (indented syntax)

• No curly braces {} and semicolon;。
• Use indentation to indicate nesting and hierarchy.

nav
  ul
    margin: 0
    padding: 0
  li
    display: inline-block
    margin-right: 5px
1
2
3
4
5
6
7

SCSS (Sassy CSS)

• Similar to standard CSS, use curly braces {} and semicolon;。
• Compatible with all existing CSS code.

nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    margin-right: 5px;
  }
}
1
2
3
4
5
6
7
8
9
10

2. Variables

Both support variables, with the same syntax:

$primary-color: #333;

nav {
  color: $primary-color;
}
1
2
3
4
5

3. Nesting

Both support nesting, but in Sass, nesting uses indentation, while SCSS uses curly braces:

// Sass
nav
  ul
    margin: 0
    padding: 0

// SCSS
nav {
  ul {
    margin: 0;
    padding: 0;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4. Mixins

The definition and invocation of the mixer is the same in both:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }
1
2
3
4
5
6
7
8

5. Interpolation

Interpolation is used the same way in both:

$side: left;
.margin-#{$side} {
  margin-#{$side}: 10px;
}
1
2
3
4

6. Operation

Both support operations in styles:

.container {
  width: 100% - 20px;
}
1
2
3

7. Inheritance

Both support style inheritance:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Add them here next time you use them in a project!