SASS có sử dụng SCSS không?

Nếu bạn là người dùng thường xuyên của CodePen. io, bạn sẽ nhận thấy rằng có một số tùy chọn khi nói đến hương vị của CSS mà bạn có thể chọn

• SASS với La bàn
• SCSS với La bàn
• ÍT HƠN
• CSS thông thường

Đừng nhầm lẫn giữa các tùy chọn SASS và SCSS, mặc dù ban đầu tôi. scss là Sassy CSS và là thế hệ tiếp theo của. ngổ ngáo. Một lời giải thích từ trang web

Sass có hai cú pháp. Cú pháp được sử dụng phổ biến nhất được gọi là “SCSS” (viết tắt của “Sassy CSS”) và là siêu bộ 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ệ. 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ỉ “. ngổ ngáo”). 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 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 đầu dòng để chỉ định các khối. Các tệp trong cú pháp thụt lề sử dụng phần mở rộng. ngổ ngáo

Giải thích về SASS vs SCSS trên sass-lang. trang web com

Nếu điều đó không hợp lý, 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 khai báo. 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 có thụt đầu dòng 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ũ hơn

/* CSS */

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

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

Tôi nghĩ hầu hết thời gian hiện nay nếu ai đó đề cập rằng họ đang làm việc với Sass thì họ đang đề cập đến việc viết trong đó. scss chứ không phải truyền thống. cách hỗn xược

Bạn cũng có thể muốn xem một số @mixins hữu ích sẽ giúp bạn xây dựng phản hồi nhanh

Trước khi bạn đi

Tôi biết, một bản tin khác - nhưng hãy nghe tôi nói. Hầu hết các bản tin JavaScript đều tệ. Lần cuối cùng bạn thực sự mong muốn có được một cái là khi nào?

Chúng tôi gọi nó là Byte, nhưng những người khác gọi nó là bản tin yêu thích của họ

tham gia byte

Được gửi tới 152.074 nhà phát triển vào mỗi thứ Hai và thứ Năm

Sdu

@sduduzo_g

Đây là bản tin đầu tiên mà tôi mở danh sách phát nhạc và tối đa hóa cửa sổ trình duyệt của mình chỉ để yên tâm đọc nó. Kudos để @uidotdev cho nội dung hàng tuần tuyệt vời



Brandon Bayer

@flybayer

Bản tin Bytes là một tác phẩm nghệ thuật. Đó là bản tin dành cho nhà phát triển duy nhất mà tôi đã đăng ký. Bằng cách nào đó, họ lấy những thứ hơi nhàm chán và truyền vào đó một lượng hài vừa phải để khiến bạn cười khúc khích



John Hawley

@johnhawly

Bytes là bản tin yêu thích của tôi kể từ khi thành lập. Đó là điều yêu thích của tôi mà tôi mong đợi vào thứ Hai. Tuyệt vời với một tách cà phê nóng



màu xanh lá cây Garrett

@garrettgreen

Tôi đăng ký RẤT NHIỀU bản tin dành cho nhà phát triển (đặc biệt là JS/TS/Node) và Byte của @uidotdev luôn là một sự thay đổi thú vị, được hoan nghênh đối với hầu hết (hài hước, vui vẻ, v.v.) nhưng vẫn toàn diện/hữu ích



Muhammad

@mhashim6_

Thực sự là bản tin duy nhất mà tôi chờ đợi mỗi tuần



Grayson Hicks

@graysonhicks

Bytes là bản tin dành cho nhà phát triển mà tôi mong chờ nhất mỗi tuần. Cân bằng tuyệt vời giữa nội dung và ngữ cảnh. Cảm ơn @uidotdev



Mitchell Wright

@mitchellbwright

Tôi biết tôi đã nói điều đó trước đây, nhưng @tylermcginnis không bỏ lỡ email Bytes. Nếu bạn là nhà phát triển, bạn thực sự cần phải đăng ký



Ali Spittel

@aspittel

Tôi có thể nói rằng tôi cười khúc khích mỗi khi nhận được email @uidotdev mỗi tuần không?



Chris Finn

@thefinnomenon

Mọi lập trình viên JavaScript nên đăng ký nhận bản tin từ @uidotdev. Họ không chỉ quản lý để đưa tin ngắn gọn về những tin tức nóng hổi trong thế giới JavaScript trong tuần mà họ còn quản lý để thêm sự hài hước mới mẻ vào tất cả

SCSS có mới hơn SASS không?

SCSS là viết tắt của Sassy CSS và đó là cú pháp mới hơn của SASS . Nó chỉ đơn giản là CSS với bộ tính năng giống như SASS nhưng yêu cầu dấu chấm phẩy và dấu ngoặc nhọn giống như CSS.

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

CSS là ngôn ngữ tạo kiểu cho phép người dùng tạo, thiết kế và tạo kiểu cho các trang web khác nhau. SCSS là một loại tệp đặc biệt trong chương trình SASS mà người ta cần viết bằng ngôn ngữ Ruby . Chúng tôi thường sử dụng CSS trong ngôn ngữ JavaScript và HTML. Chúng tôi thường sử dụng SCSS bằng ngôn ngữ Ruby.

SASS hay SCSS hay LESS tốt hơn?

Cả hai bộ tiền xử lý đều có chung một số thuộc tính. Cả SASS và LESS đều cho phép sử dụng mixin và biến. Tuy nhiên, có một điểm khác biệt là SASS dựa trên Ruby, trong khi LESS sử dụng JavaScript . Nhưng ngay cả điều này cũng không mang lại lợi thế cho một trong hai bộ tiền xử lý so với những bộ tiền xử lý khác.

SASS có sử dụng CSS không?

Sass là bộ tiền xử lý CSS giúp bạn quản lý các tác vụ trong các dự án lớn, nơi các biểu định kiểu ngày càng lớn, bạn có nhiều dòng mã CSS và việc bảo trì trở nên khó khăn .