Sự khác biệt giữa SCSS và Sass là gì?

Từ những gì tôi đã đọc, Sass là một ngôn ngữ giúp CSS mạnh hơn với sự hỗ trợ toán học và biến.

Sự khác biệt với SCSS là gì? Nó được cho là cùng một ngôn ngữ? Giống? Khác nhau?

Sass là một bộ xử lý trước CSS với các tiến bộ cú pháp. Các biểu định kiểu trong cú pháp nâng cao được chương trình xử lý và biến thành các biểu định kiểu CSS thông thường. Tuy nhiên, bản thân chúng không mở rộng tiêu chuẩn CSS.

Các biến CSS được hỗ trợ và có thể được sử dụng nhưng không phải là các biến tiền xử lý.

Đối với sự khác biệt giữa SCSS và Sass, văn bản này trên trang tài liệu Sass sẽ trả lời câu hỏi:

Có hai cú pháp có sẵn cho Sass. Cái đầu tiên, được gọi là SCSS (Sassy CSS) và được sử dụng trong toàn bộ tài liệu tham khảo này, là một phần mở rộng của cú pháp CSS. Điều này có nghĩa là mọi biểu định kiểu CSS hợp lệ là một tệp SCSS hợp lệ có cùng ý nghĩa. Cú pháp này được tăng cường với các tính năng Sass được mô tả dưới đây. Các tệp sử dụng cú pháp này có phần mở rộng .scss .

Cú pháp thứ hai và cũ hơn , được gọi là cú pháp thụt lề (hoặc đôi khi chỉ là Sass mật), cung cấp một cách viết CSS ngắn gọn hơn. Nó sử dụng thụt đầu dòng thay vì dấu ngoặc để biểu thị lồng các bộ chọn và dòng mới thay vì dấu chấm phẩy để phân tách các thuộc tính. Các tệp sử dụng cú pháp này có phần mở rộng .sass .

Tuy nhiên, tất cả điều này chỉ hoạt động với trình biên dịch trước Sass mà cuối cùng tạo ra CSS. Nó không phải là một phần mở rộng cho tiêu chuẩn CSS.

Tôi là một trong những nhà phát triển đã giúp tạo Sass.

Sự khác biệt là UI. Bên dưới bề ngoài văn bản chúng giống hệt nhau. Đây là lý do tại sao các tệp sass và scss có thể nhập lẫn nhau. Trên thực tế, Sass có bốn trình phân tích cú pháp: scss, sass, CSS và ít hơn. Tất cả những thứ này chuyển đổi một cú pháp khác nhau thành Cây Cú pháp Trừu tượng , được xử lý thêm thành đầu ra CSS hoặc thậm chí vào một trong các định dạng khác thông qua công cụ chuyển đổi sass.

Sử dụng cú pháp bạn thích nhất, cả hai đều được hỗ trợ đầy đủ và bạn có thể thay đổi giữa chúng sau này nếu bạn đổi ý.

Tệp Sass .sasskhác với trực quan .scsstệp, ví dụ:

Example.sass - sass là cú pháp cũ hơn

$color: red

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

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

Example.scss - sassy css là cú pháp mới kể từ Sass 3

$color: red;

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

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

Bất kỳ tài liệu CSS hợp lệ nào cũng có thể được chuyển đổi thành Sassy CSS (SCSS) chỉ bằng cách thay đổi phần mở rộng từ .csssang .scss.

Sass ( Syntactally Awesome StyleSheets ) có hai cú pháp:

• mới hơn: SCSS ( Sassy CSS )
• và một cú pháp cũ, nguyên gốc: thụt lề, là Sass gốc và còn được gọi là Sass .

Vì vậy, cả hai đều là một phần của bộ tiền xử lý Sass với hai cú pháp có thể khác nhau.

Sự khác biệt quan trọng nhất giữa SCSS và Sass gốc :

SCSS :

• Cú pháp tương tự như CSS (nhiều đến mức mọi CSS3 hợp lệ thông thường cũng là SCSS hợp lệ , nhưng rõ ràng mối quan hệ theo hướng khác không xảy ra)

• Sử dụng niềng răng {}

• Sử dụng dấu chấm phẩy ;
• Dấu hiệu chuyển nhượng là :
• Để tạo một mixin, nó sử dụng@mixin chỉ thị
• Để sử dụng mixin, nó đi trước nó với@include chỉ thị
• Các tệp có phần mở rộng .scss .

Sass gốc :

• Cú pháp tương tự như Ruby
• Không niềng răng
• Không thụt lề nghiêm ngặt
• Không có dấu chấm phẩy
• Dấu hiệu chuyển nhượng là =thay vì:
• Để tạo một mixin, nó sử dụng = dấu
• Để sử dụng mixin, nó đi trước nó với +dấu hiệu
• Các tập tin có phần mở rộng .sass .

Một số thích Sass , cú pháp ban đầu - trong khi những người khác thích SCSS . Dù bằng cách nào, nhưng điều đáng chú ý là cú pháp thụt lề Sass không được và sẽ không bao giờ bị phản đối .

Chuyển đổi với sass-convert :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Tài liệu Sass và SCSS

Cú pháp của nó là khác nhau, và đó là pro chính (hoặc con, tùy thuộc vào quan điểm của bạn).

Tôi sẽ cố gắng không lặp lại nhiều điều người khác nói, bạn có thể dễ dàng google điều đó nhưng thay vào đó, tôi muốn nói một vài điều từ kinh nghiệm của tôi khi sử dụng cả hai, đôi khi ngay cả trong cùng một dự án.

SASS pro

• sạch hơn - nếu bạn đến từ Python, Ruby (thậm chí bạn có thể viết các đạo cụ với cú pháp giống như biểu tượng) hoặc thậm chí là thế giới CoffeeScript, nó sẽ trở nên rất tự nhiên đối với bạn - viết mixins, hàm và nói chung mọi thứ có thể tái sử dụng .sassđều dễ dàng hơn nhiều 'và dễ đọc hơn trong .scss(chủ quan).

Nhược điểm

• khoảng trắng nhạy cảm (chủ quan), tôi không bận tâm đến nó trong các ngôn ngữ khác nhưng ở đây trong CSS nó chỉ làm phiền tôi (các vấn đề: sao chép, tab so với chiến tranh không gian, v.v.).
• không có quy tắc nội tuyến (đây là trò chơi phá vỡ đối với tôi), bạn không thể làm body color: rednhư bạn có thể trong .scssbody {color: red}
• nhập nội dung của nhà cung cấp khác, sao chép các đoạn CSS vanilla - không phải là không thể nhưng rất nhàm chán sau một thời gian. Giải pháp là có .scsscác tệp (cùng với .sasscác tệp) trong dự án của bạn hoặc chuyển đổi chúng thành .sass.

Khác với điều này - họ làm cùng một công việc.

Bây giờ, điều tôi muốn làm là viết mixins và các biến .sassvà mã sẽ thực sự biên dịch thành CSS .scssnếu có thể (ví dụ Visual studio không hỗ trợ.sass nhưng bất cứ khi nào tôi làm việc trên các dự án Rails, tôi thường kết hợp hai trong số chúng, không phải trong một tập tin ofc).

Gần đây, tôi đang cân nhắc việc tặng bút stylus một cơ hội (cho bộ tiền xử lý CSS toàn thời gian) vì nó cho phép bạn kết hợp hai cú pháp trong một tệp (trong số một số tính năng khác). Đó có thể không phải là một hướng đi tốt cho một đội nhưng khi bạn duy trì nó một mình - không sao cả. Bút stylus thực sự linh hoạt nhất khi cú pháp được đề cập.

Và cuối cùng mixin cho .scssvs .sassso sánh cú pháp:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

Từ trang chủ của ngôn ngữ

Sass có hai cú pháp. Cú pháp chính mới (kể từ Sass 3) được biết đến với tên gọi là SCSSv (đối với CSS Sassy CSS , ) và là một siêu cú pháp của cú pháp CSS3. Điều này có nghĩa là mọi biểu định kiểu CSS3 hợp lệ cũng là SCSS hợp lệ. Các tệp SCSS sử dụng phần mở rộng .scss.

Cú pháp thứ hai, cũ hơn được gọi là cú pháp thụt lề (hoặc chỉ là Sass mật). Lấy cảm hứng từ sự căng thẳng của Haml, nó dành cho những người thích sự đồng nhất hơn là sự tương đồng với CSS. Thay vì dấu ngoặc và dấu chấm phẩy, nó sử dụng thụt dòng để chỉ định các khối. Mặc dù không còn là cú pháp chính, cú pháp thụt lề sẽ tiếp tục được hỗ trợ. Các tệp trong cú pháp thụt lề sử dụng phần mở rộng .sass.

SASS là một ngôn ngữ được giải thích tạo ra CSS. Cấu trúc của Sass trông giống như CSS (từ xa), nhưng đối với tôi, phần mô tả có chút sai lệch; nó không phải là sự thay thế cho CSS hay một phần mở rộng. Cuối cùng, nó là một trình thông dịch phát ra CSS, vì vậy Sass vẫn có những hạn chế của CSS thông thường, nhưng nó che giấu chúng bằng mã đơn giản.

Sự khác biệt cơ bản là cú pháp. Mặc dù SASS có cú pháp lỏng lẻo với khoảng trắng và không có dấu chấm phẩy, SCSS giống với CSS hơn.

SASS là viết tắt của Syntactally Awesome StyleSheets. Nó là một phần mở rộng của CSS tăng thêm sức mạnh và sự tao nhã cho ngôn ngữ cơ bản. SASS mới được đặt tên là SCSS với một số trò chuyện, nhưng SASS cũ cũng ở đó. Trước khi bạn sử dụng SCSS hoặc SASS, vui lòng xem sự khác biệt dưới đây.

Một ví dụ về một số cú pháp SCSS và SASS:

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

Xuất CSS sau khi biên dịch (Tương tự cho cả hai)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Để được hướng dẫn thêm, bạn có thể xem trang web chính thức .

Sass là người đầu tiên và cú pháp hơi khác một chút. Ví dụ: bao gồm một mixin:

Sass: +mixinname()
Scss: @include mixinname()

Sass bỏ qua dấu ngoặc nhọn và dấu chấm phẩy và nằm trên lồng, điều mà tôi thấy hữu ích hơn.

Sự khác biệt giữa SASS và SCSS bài viết giải thích sự khác biệt về chi tiết. Đừng nhầm lẫn bởi các tùy chọn SASS và SCSS, mặc dù ban đầu tôi cũng vậy, .scss là Sassy CSS và là thế hệ tiếp theo của .sass.

Nếu điều đó không có ý nghĩa, bạn có thể thấy sự khác biệt trong mã bên dưới.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

Trong đoạn mã trên chúng tôi sử dụng; để tách các tờ khai. Tôi thậm chí đã thêm tất cả các khai báo cho .border vào một dòng để minh họa điểm này hơn nữa. Ngược lại, mã SASS bên dưới phải nằm trên các dòng khác nhau với thụt lề và không được sử dụng;

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Bạn có thể thấy từ CSS bên dưới rằng kiểu SCSS giống với CSS thông thường hơn nhiều so với cách tiếp cận SASS cũ.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Tôi nghĩ rằng hầu hết thời gian những ngày này nếu ai đó đề cập rằng họ đang làm việc với Sass, họ đang đề cập đến việc tác giả trong .scss chứ không phải là cách .sass truyền thống.

Nguyên sass giống như cú pháp của ruby, tương tự như ruby, ngọc v.v ...

Trong các cú pháp đó, chúng tôi không sử dụng {}, thay vào đó chúng tôi sử dụng khoảng trắng, cũng không sử dụng; ...

Trong các scsscú pháp thì giống hơn CSS, nhưng với việc có nhiều tùy chọn hơn như: lồng nhau, khai báo, v.v., tương tự lessvà xử lý trước CSS...

Đại khái họ làm điều tương tự, nhưng tôi đặt vài dòng của mỗi để thấy sự khác biệt cú pháp, nhìn vào {}, ;và spaces:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

Câu trả lời nhỏ gọn:

SCSS đề cập đến cú pháp chính được hỗ trợ bởi bộ xử lý trước Sass CSS .

• Tập tin kết thúc bằng .scss đại diện cho cú pháp tiêu chuẩn được hỗ trợ bởi Sass. SCSS là một siêu bộ CSS.
• Các tệp kết thúc bằng .sasscú pháp "cũ hơn" được Sass hỗ trợ bắt nguồn từ thế giới Ruby.

SASS là Bảng định kiểu tuyệt vời về mặt cú pháp và là một phần mở rộng của CSS cung cấp các tính năng của các quy tắc lồng ghép, kế thừa, Mixins trong khi SCSS là Sassy Cascaded Style Sheets tương tự như CSS và lấp đầy các khoảng trống và không tương thích giữa CSS và SASS. Nó đã được cấp phép theo giấy phép MIT. Bài viết này có nhiều hơn về sự khác biệt: https://www.educba.com/sass-vs-scss/