Câu hỏi 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ữ làm cho CSS mạnh mẽ hơn với sự hỗ trợ biến và toán học.

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


1336
2018-04-13 19:23


gốc




Các câu trả lời:


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

Lý do chính cho việc này là bổ sung các tính năng mà CSS thiếu đau đớn (như các biến).

Sự khác biệt giữa SCSS và Sass, văn bản này trên Trang tài liệu Sass nên trả lời câu hỏi:

Có hai cú pháp có sẵn cho Sass. Đầu tiên, được gọi là SCSS (Sassy CSS) và được sử dụng trong suốt tham chiếu này, là phần mở rộng của cú pháp CSS. Điều này có nghĩa rằng mọi CSS stylesheet 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ó .scss sự mở rộng.

Thứ hai và cú pháp cũ hơn, được gọi là cú pháp thụt lề (hoặc đôi khi chỉ là "Sass"), cung cấp một cách súc tích hơn để viết CSS. Nó sử dụng thụt đầu dòng hơn là dấu ngoặc để biểu thị lồng nhau của các bộ chọn và các dòng mới hơn là 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ó .sass sự mở rộng.

Tuy nhiên, tất cả điều này chỉ làm việc 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 bản thân tiêu chuẩn CSS.


1364
2018-04-13 19:25



Văn bản trên đã bị xóa khỏi trang chủ Sass ngay bây giờ. Cảm ơn rất nhiều cho câu trả lời với văn bản được trích dẫn! - Roy Ling
Văn bản hiện được di chuyển tại đây: sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax - Roy Ling
Sau khi đọc to câu trả lời này, tôi biết rằng tôi có một lisp. - robnardo
Khi chọn cú pháp, hãy nhớ rằng chỉ scss cho phép sao chép và dán css từ stackoverflow và các công cụ phát triển của trình duyệt, trong khi đó, bạn luôn phải điều chỉnh cú pháp - fishbone
CSS3 có các biến: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables - Jersh


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

Sự khác biệt là giao diện người dùng. Bên dưới văn bản bên ngoài 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 cú pháp: scss, sass, CSS và ít hơn. Tất cả những cú pháp này chuyển đổi một cú pháp khác thành Cây cú pháp trừu tượng được tiếp tục xử lý thành đầu ra CSS hoặc thậm chí lên 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 thay đổi ý định.


482
2018-04-20 15:16



Xin lỗi? Tôi đã đọc phải không? Có thể Sass thực sự nhập ít tệp hơn không? Có bất kỳ sức mạnh tổng hợp nào giữa mixin / biến không? - pilau
Sự tương tự với CSS chuẩn có thể quan trọng hơn trong môi trường nhóm nơi có những người cần đọc mã của bạn, nhưng thỉnh thoảng, và họ không có thời gian / sở thích để tìm hiểu một cú pháp hoàn toàn mới. - c roald


Sass .sass tệp trực quan khác với .scss tệ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 của 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ừ .css đến .scss.


266
2017-11-30 03:05



@Novocaine +1, tôi đồng ý. Là một lập trình viên C ++, tôi thích các dấu ngoặc và dấu chấm phẩy. BTW, tôi có một câu hỏi, chuyển đổi từ .scss đến .css giống như .css đến .scss? - JW.ZG
Chúng ta có thể thấy sự khác biệt ở đây sass-lang.com/guide - Anthuan Vásquez


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 những gì người khác nói, bạn có thể dễ dàng google 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 bằng cách 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 (bạn thậm chí 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ẽ rất tự nhiên với bạn - viết mixin, chức năng và thường là bất kỳ thứ gì có thể tái sử dụng .sassdễ dàng hơn nhiều và dễ đọc hơn trong .scss (chủ quan).

SASS khuyết điểm

  • khoảng trắng nhạy cảm (chủ quan), tôi không nhớ nó bằng các ngôn ngữ khác nhưng ở đây trong CSS nó chỉ làm phiền tôi (vấn đề: sao chép, tab vs không gian chiến tranh, vv).
  • không có quy tắc nội tuyến (đây là trò chơi phá vỡ cho tôi), bạn không thể làm body color: red như bạn có thể trong .scss body {color: red}
  • nhập nội dung của nhà cung cấp khác, sao chép đoạn mã vani CSS - 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ó .scss tệp (cùng với .sass 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ờ, những gì tôi muốn làm là viết mixin và các biến trong .sass và mã sẽ thực sự biên dịch thành CSS .scss nếu có thể (tức là Visual studio không có 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ố đó, không phải trong một tập tin ofc).

Gần đây, tôi đang xem xét cho Bút cảm ứng một cơ hội (đối với 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 tốt cho một đội để thực hiện nhưng khi bạn đang duy trì nó một mình - đó là ok. Bút stylus thực sự linh hoạt nhất khi cú pháp được hỏi.

Và mixin cuối cùng cho .scss so với .sass so 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

57
2018-05-13 14:16



@cimmanon Nó có tính năng ưu và nhược điểm, được viết rõ ràng. Đó là sự khác biệt giữa câu trả lời này và các câu trả lời khác. Tôi upvoted để kéo ra khỏi màu đỏ. Tôi nghĩ rằng nó là hữu ích mặc dù nó có sơ đồ venn bình thường của câu trả lời chồng lên nhau mà mỗi bài SO khác có. Điều này có thể hữu ích hơn đối với một người nào đó chỉ tạo ra sự lựa chọn trên hai đường dẫn. Tôi cũng nghĩ rằng nó tốt hơn một chút so với câu trả lời được chấp nhận bởi vì nó thực sự cho thấy sự khác biệt của ngôn ngữ thay vì chỉ nói "Sass là khác vì nó không phải là SCSS", mà với tôi là vô dụng. Tôi có thể làm mà không có các công cụ sử dụng cá nhân, nhưng vẫn :) - coblr


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

Sass có hai cú pháp. Chính mới   cú pháp (như của Sass 3) được gọi là   “SCSS” (đối với “Sassy CSS”)và là một   superset 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ệ là   cũng như 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").   Lấy cảm hứng từ sự ham mê của Haml, đó là   dành cho những người thích   conciseness hơn tương tự như CSS.   Thay vì dấu ngoặc và dấu chấm phẩy, nó   sử dụng sự thụt đầu dòng để   chỉ định các khối. Mặc dù không còn   cú pháp chính, cú pháp thụt lề   sẽ tiếp tục được hỗ trợ. Các tập tin   trong cú pháp thụt lề, sử dụng   phần mở rộng .sass.

SASS là một giải thích ngôn ngữ kích thích CSS. Cấu trúc của Sass nhìn như CSS (từ xa), nhưng có vẻ như với tôi rằng mô tả là một chút gây hiểu nhầm; nó là không phải thay thế cho CSS hoặc tiện ích mở rộng. Đó là một thông dịch viên mà cuối cùng cũng rút ra CSS, vì vậy Sass vẫn có những hạn chế của CSS bình thường, nhưng nó che dấu chúng bằng mã đơn giản.


45
2018-04-13 19:27



nhớ điều đó, cảm ơn bạn rất nhiều - bruno077


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

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

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

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

SCSS:

  • Cú pháp của nó tương tự như CSS.
  • Dùng niềng răng {}.
  • Sử dụng dấu chấm phẩy ;.
  • Biến đăng nhập SCSS Là $.
  • Đăng nhập Aassignment SCSS Là :.
  • Các tệp sử dụng cú pháp này có .scss sự mở rộng.

Nguyên Sass:

  • Cú pháp của nó tương tự như Ruby.
  • Ở đây không sử dụng niềng răng.
  • Không thụt lề nghiêm ngặt.
  • Không có dấu chấm phẩy.
  • Biến đăng nhập Sass Là ! thay vì $.
  • Đăng nhập chỉ định Sass Là = thay vì :.
  • Các tệp sử dụng cú pháp này có .sass sự mở rộng.

Đây là hai cú pháp có sẵn cho Sass.

Một số người 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 đáng chú ý là Sass’s cú pháp thụt lề chưa đượ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

SASS REFERENCE


37
2018-04-10 11:16



Lạ lùng rằng câu trả lời rõ ràng và ngắn gọn như vậy có ít phiếu bầu hơn những người khác. Tôi đã trải qua hàng đống nguồn để hiểu sự khác nhau giữa Sass và Scss là gì và cuối cùng đã tìm thấy điều này ngay lập tức soi sáng cho tôi. Công việc tốt ngoại trừ một vài lỗi chính tả / ngữ pháp. - tnkh
@TonyNg cảm ơn bạn. Tôi rất vui vì tôi có thể giúp bạn. Về vấn đề này, nó rất chắc chắn vì tôi đã trả lời rất muộn - khoảng 6 năm sau khi đặt câu hỏi. Vui lòng sửa tôi, nơi tôi đã sửa lỗi chính tả hoặc ngữ pháp. - prostosmirienie
Cảm ơn bạn đã tham khảo bộ chuyển đổi - Greg


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


18
2018-05-06 10:36





Nguyên sass giống như cú pháp ruby, tương tự như ruby, ngọc bích ...

Trong những cú pháp đó, chúng tôi không sử dụng {}thay vào đó, chúng tôi đi với không gian màu trắng, cũng không sử dụng ;...

Trong scss cú pháp giống như CSS, nhưng với việc có nhiều tùy chọn hơn như: lồng ghép, tuyên bố, v.v., tương tự như less và tiền xử lý khác CSS ...

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

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

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

9
2017-07-02 04:51





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

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

Sass bỏ qua các dấu ngoặc nhọn và bán dấu hai chấm và nằm trên làm tổ, mà tôi thấy hữu ích hơn.


8
2018-04-11 13:25





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 với các tùy chọn SASS và SCSS, mặc dù tôi cũng là bước đầu, .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 ta 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 thêm điểm này. 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 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 là phương pháp SASS cũ hơn.

/* 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 authoring in .scss chứ không phải là cách truyền thống .sass.


4
2018-05-02 05:40





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

enter image description here

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))

CSS đầu ra sau khi biên dịch (giống nhau cho cả hai)

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

Để biết thêm giới thiệu chính thức trang mạng


2
2017-07-19 13:20