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

Tôi biết CSS rất tốt, nhưng lại nhầm lẫn về Sass. SCSS khác với CSS như thế nào và nếu tôi sử dụng SCSS thay vì CSS thì nó có hoạt động giống nhau không?

Ngoài câu trả lời Idriss :

CSS

Trong CSS, chúng tôi viết mã như mô tả bên dưới, có độ dài đầy đủ.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

Trong SCSS, chúng ta có thể rút ngắn mã này bằng cách sử dụng dấu @mixinđể chúng ta không phải viết colorvà viết widthlại các thuộc tính. Chúng ta có thể xác định điều này thông qua một hàm, tương tự như PHP hoặc các ngôn ngữ khác.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

Tuy nhiên, trong SASS, toàn bộ cấu trúc nhanh hơn và rõ ràng hơn so với SCSS.

• Nó nhạy cảm với khoảng trắng khi bạn sử dụng sao chép và dán,

• Có vẻ như nó hiện không hỗ trợ CSS nội tuyến.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color

CSS là ngôn ngữ tạo kiểu mà bất kỳ trình duyệt nào cũng hiểu để tạo kiểu cho các trang web.

SCSS là một loại tệp đặc biệt SASS, một chương trình được viết bằng Ruby để tập hợp các biểu định CSSkiểu cho trình duyệt và để biết thông tin, SASSbổ sung nhiều chức năng bổ sung CSSnhư các biến, lồng vào nhau và hơn thế nữa có thể giúp việc viết CSSdễ dàng và nhanh hơn.
Các tệp SCSS được xử lý bởi máy chủ đang chạy ứng dụng web để xuất ra một tệp truyền thống CSSmà trình duyệt của bạn có thể hiểu được.

csscũng có biến. Bạn có thể sử dụng chúng như thế này:

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

Và điều này ít hơn

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

Định nghĩa biến đúng:

$      => SCSS, SASS
--     => CSS
@      => LESS

Tất cả các câu trả lời đều tốt nhưng câu hỏi hơi khác so với câu trả lời

"about Sass. SCSS khác với CSS như thế nào" : scss là cú pháp CSS3 được hình thành tốt . sử dụng bộ tiền xử lý sass để tạo ra điều đó.

và nếu tôi sử dụng SCSS thay vì CSS thì nó có hoạt động như cũ không? Đúng. nếu lý tưởng của bạn hỗ trợ bộ tiền xử lý sass. hơn là nó sẽ hoạt động như cũ.

Sass có hai cú pháp. Cú pháp được sử dụng phổ biến nhất được gọi là “SCSS” (dành cho “Sassy CSS”) và là một tập hợp siêu cú pháp của 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ệ. 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ự ngắn gọn của Haml, nó dành cho những người thích sự ngắn gọn hơn là giống với CSS. Thay vì dấu ngoặc và dấu chấm phẩy, nó sử dụng thụt đầu dòng để chỉ định khối. Các tệp theo cú pháp thụt lề sử dụng phần mở rộng .sass.

• Thông tin Furher Về:

Bộ tiền xử lý CSS là gì?

Bản thân CSS không có logic và chức năng phức tạp được yêu cầu để viết mã có thể tái sử dụng và có tổ chức. Kết quả là, một nhà phát triển bị ràng buộc bởi các giới hạn và sẽ gặp khó khăn cực kỳ trong việc bảo trì mã và khả năng mở rộng, đặc biệt khi làm việc trên các dự án lớn liên quan đến mã mở rộng và nhiều biểu định kiểu CSS. Đây là lúc Bộ tiền xử lý CSS đến để giải cứu.

CSS Preprocessor là một công cụ được sử dụng để mở rộng chức năng cơ bản của CSS vani mặc định thông qua ngôn ngữ kịch bản của riêng nó. Nó giúp chúng tôi sử dụng các cú pháp logic phức tạp như - biến, hàm, mixin, lồng mã và kế thừa để đặt tên cho một số, làm tăng thêm CSS vani của bạn. Bằng cách sử dụng CSS Preprocessors, bạn có thể tự động hóa liền mạch các tác vụ lâu dài, xây dựng các đoạn mã có thể sử dụng lại, tránh lặp lại mã và đầy hơi và viết các khối mã lồng nhau được tổ chức tốt và dễ đọc. Tuy nhiên, các trình duyệt chỉ có thể hiểu mã CSS vani gốc và sẽ không thể diễn giải cú pháp CSS Preprocessor. Do đó, cú pháp Preprocessor phức tạp và nâng cao trước tiên cần phải được biên dịch thành cú pháp CSS gốc, sau đó trình duyệt có thể hiểu được cú pháp này để tránh các vấn đề tương thích giữa các trình duyệt.

Tiếp tục trong bài viết, chúng ta sẽ xem xét 3 Bộ tiền xử lý CSS phổ biến nhất hiện đang được các nhà phát triển trên thế giới sử dụng là Sass, LESS và Stylus. Trước khi bạn quyết định người chiến thắng giữa Sass vs LESS vs Stylus, hãy để chúng tôi tìm hiểu chi tiết về họ trước.

Sass - Trang tính kiểu tuyệt vời về mặt cú pháp

Sass là từ viết tắt của "Syntacally Awesome Style Sheets". Sass không chỉ là CSS Preprocessor phổ biến nhất trên thế giới mà còn là một trong những CSS lâu đời nhất, được ra mắt vào năm 2006 bởi Hampton Catlin và sau đó được phát triển bởi Natalie Weizenbaum. Mặc dù Sass được viết bằng ngôn ngữ Ruby, Precompiler LibSass cho phép Sass được phân tích cú pháp bằng các ngôn ngữ khác và tách nó khỏi Ruby. Sass có một cộng đồng lớn đang hoạt động và các nguồn tài nguyên học tập phong phú có sẵn trên mạng cho người mới bắt đầu. Nhờ sự trưởng thành, ổn định và năng lực logic mạnh mẽ, Sass đã tự khẳng định vị trí hàng đầu của Bộ tiền xử lý CSS trước các đối thủ của nó.

Sass có thể được viết bằng 2 cú pháp sử dụng Sass hoặc SCSS. Sự khác biệt giữa hai là gì? Hãy cùng tìm hiểu.

Khai báo cú pháp: Sass so với SCSS

• SCSS là viết tắt của Sassy CSS. Không giống như Sass, SCSS không dựa trên thụt lề.
• Phần mở rộng .sass được sử dụng làm cú pháp gốc cho Sass, trong khi SCSS cung cấp một cú pháp mới hơn với phần mở rộng .scss.
• Không giống như Sass, SCSS có dấu ngoặc nhọn và dấu chấm phẩy, giống như CSS.
• Trái ngược với SCSS, Sass rất khó đọc vì nó khá lệch so với CSS. Đó là lý do tại sao SCSS nó là cú pháp Sass được đề xuất nhiều hơn vì nó dễ đọc hơn và gần giống với CSS gốc trong khi đồng thời tận hưởng sức mạnh của Sass.

Hãy xem xét ví dụ bên dưới với cú pháp Sass so với SCSS cùng với mã CSS đã biên dịch.

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

Trong cả hai trường hợp, có thể là Sass hoặc SCSS, mã CSS đã biên dịch sẽ giống nhau -

#box {
      color: #fff;
      background: #00f;

Sử dụng Sass

Có thể cho rằng khuôn khổ giao diện người dùng phổ biến nhất Bootstrap được viết bằng Sass. Cho đến phiên bản 3, Bootstrap được viết bằng LESS nhưng bootstrap 4 đã thông qua Sass và tăng sự phổ biến của nó. Một số công ty lớn sử dụng Sass là - Zapier, Uber, Airbnb và Kickstarter.

LESS - Trang tính kiểu Leaner

LESS là từ viết tắt của “Leaner Stylesheets”. Nó được phát hành vào năm 2009 bởi Alexis Sellier, 3 năm sau lần ra mắt đầu tiên của Sass vào năm 2006. Trong khi Sass được viết bằng Ruby, LESS được viết bằng JavaScript. Trên thực tế, LESS là một thư viện JavaScript mở rộng chức năng của CSS vani gốc với các mixin, biến, lồng và vòng lặp bộ quy tắc. Sass vs LESS đã là một cuộc tranh luận sôi nổi. Không có gì ngạc nhiên khi LESS là đối thủ cạnh tranh mạnh nhất với Sass và có cơ sở người dùng lớn thứ hai. Tuy nhiên, khi bootstrap bán LESS để ủng hộ Sass bằng sự ra mắt của Bootstrap 4, LESS đã suy yếu dần. Một trong những nhược điểm của LESS so với Sass là nó không hỗ trợ các chức năng. Không giống như Sass, LESS sử dụng @ để khai báo các biến có thể gây nhầm lẫn với @media và @keyframes. Tuy nhiên, Một ưu điểm chính của LESS so với Sass và Stylus hoặc bất kỳ bộ tiền xử lý nào khác, là dễ dàng thêm nó vào dự án của bạn. Bạn có thể làm điều đó bằng cách sử dụng NPM hoặc bằng cách kết hợp tệp Less.js. Khai báo cú pháp: LESS Sử dụng phần mở rộng .less. Cú pháp của LESS khá giống với SCSS với ngoại lệ là để khai báo biến, thay vì dấu $, LESS sử dụng @.

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

Cách sử dụng LESS Khung Bootstrap phổ biến cho đến khi ra mắt phiên bản 4 được viết bằng LESS. Tuy nhiên, một khuôn khổ phổ biến khác được gọi là SEMANTIC UI vẫn được viết bằng LESS. Trong số các công ty lớn sử dụng Sass là - Indiegogo, Patreon và WeChat

Bút cảm ứng

Bút cảm ứng này được ra mắt vào năm 2010 bởi nhà phát triển Node JS, TJ Holowaychuk, gần 4 năm sau khi phát hành Sass và 1 năm sau khi phát hành LESS. Bút cảm ứng được viết Node JS và hoàn toàn phù hợp với ngăn xếp JS. Bút stylus bị ảnh hưởng nhiều bởi sức mạnh logic của Sass và sự đơn giản của LESS. Mặc dù Stylus vẫn phổ biến với các nhà phát triển Node JS, nhưng nó đã không quản lý để tạo ra một phần lớn cho riêng mình. Một ưu điểm của bút Stylus so với Sass hoặc LESS là nó được trang bị các chức năng tích hợp cực kỳ mạnh mẽ và có khả năng xử lý các máy tính nặng.

Khai báo cú pháp: Stylus Sử dụng phần mở rộng .styl. Stylus cung cấp rất nhiều tính linh hoạt trong việc viết cú pháp, hỗ trợ CSS gốc cũng như cho phép bỏ qua dấu hai chấm và dấu chấm phẩy trong ngoặc vuông. Ngoài ra, lưu ý rằng Stylus không sử dụng ký hiệu @ hoặc $ để xác định các biến. Thay vào đó, Stylus sử dụng các toán tử gán để chỉ ra một khai báo biến.

STYLUS TỔNG HỢP VIẾT NHƯ CSS NATIVE

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

HOẶC LÀ

STYLUS SYNTAX KHÔNG CÓ MẶT BẰNG HIỆN NAY

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

HOẶC LÀ

STYLUS TỔNG HỢP KHÔNG CÓ MÀU SẮC VÀ MÙI

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color