Mở đầu: Sự khác nhau giữa SASS và SCSS

Khi bạn đọc series này bạn sẽ thấy mình giới thiệu và SASS mà lại sư dụng phần mở rộng và cú pháp của SCSS, thực ra hai thằng này chỉ khác nhau về cú pháp mà thôi, một bên có sử dụng cặp {} và một bên là không.

Với SASS:

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Với SCSS:

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Nhìn qua thì SASS có vẻ gọn hơn, tuy nhiên cá nhân mình vẫn thích SCSS hơn bởi nhìn phân chia rất rõ ràng, không gây nhầm lẫn.

Bài viết này được đăng tại [kiso.vn]

Để đơn giản thì trong series mình nói SASS nhưng sử dụng cú pháp SCSS nhé các bạn.

Và đây là phần giới thiệu sự khác nhau giữa chúng trên trang chủ của Sass:

• Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
• Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
• The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

Mình sẽ không dịch ra, bạn tự dịch đi nhé.