Sass - Cú pháp

Trong chương này, chúng ta sẽ nghiên cứu về SASS Syntax. SASS hỗ trợ hai cú pháp cụ thể làSCSS và Indented syntax.

Các SCSS (Sassy CSS)là một phần mở rộng của cú pháp CSS. Điều này có nghĩa là mọi CSS hợp lệ cũng là một SCSS hợp lệ. SCSS giúp dễ dàng hơn nhiều để duy trì các bảng định kiểu lớn và có thể nhận ra cú pháp cụ thể của nhà cung cấp, Nhiều tệp CSS và SCSS sử dụng phần mở rộng.scss.
Indented - Đây là cú pháp cũ hơn và đôi khi chỉ được gọi là SASS. Sử dụng dạng cú pháp này, CSS có thể được viết ngắn gọn. Các tệp SASS sử dụng phần mở rộng.sass.

Cú pháp thụt lề SASS

SASS Cú pháp thụt lề hoặc chỉ SASS là một thay thế cho cú pháp SCSS dựa trên CSS.

Nó sử dụng thụt lề thay vì{ và } để phân tách các khối.
Để phân tách các câu lệnh, nó sử dụng dòng mới thay vì dấu chấm phẩy (;) .
Việc khai báo và chọn tài sản phải được đặt trên dòng riêng và các câu lệnh bên trong{ và }phải được đặt trên dòng mới và thụt lề .

Ví dụ: hãy xem xét mã SCSS sau:

.myclass {
   color = red;
   font-size = 0.2em;
}

Các indentedcú pháp là một cú pháp cũ hơn, không được khuyến khích sử dụng trong các tệp Sass mới. Nếu bạn sử dụng tệp này, nó sẽ hiển thị lỗi trong tệp CSS như chúng tôi đã sử dụng= thay vì đặt thuộc tính và biến.

Biên dịch đoạn mã đã cho ở trên bằng lệnh sau:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Tiếp theo, chạy lệnh trên; nó sẽ hiển thị lỗi trong tệp style.css như hình dưới đây -

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Sự khác biệt về cú pháp của SASS

Hầu hết các cú pháp CSS và SCSS hoạt động hoàn hảo trong SASS. Tuy nhiên, có một số khác biệt, được giải thích trong các phần sau:

Cú pháp tài sản

Các thuộc tính CSS có thể được khai báo theo hai cách:

Các thuộc tính có thể được khai báo tương tự như CSS nhưng không có semicolon(;).
colon(:) sẽ được đặt trước mỗi tên thuộc tính.

Ví dụ, bạn có thể viết là -

.myclass
   :color red
   :font-size 0.2em

Cả hai cách trên (khai báo thuộc tính không có dấu chấm phẩy và dấu hai chấm đặt trước tên thuộc tính) đều có thể được sử dụng, theo mặc định. Tuy nhiên, chỉ một cú pháp thuộc tính được phép chỉ định khi bạn sử dụng tùy chọn : property_syntax .

Bộ chọn nhiều dòng

Trong cú pháp thụt lề, các bộ chọn có thể được đặt trên một dòng mới bất cứ khi nào chúng xuất hiện sau commas.

Thí dụ

Ví dụ sau đây mô tả việc sử dụng bộ chọn nhiều dòng trong tệp SCSS -

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

Tiếp theo, tạo tệp style.scss . Lưu ý phần mở rộng .scss .

style.scss

.class1,
.class2{
   color:red;
}

Bạn có thể yêu cầu SASS xem tệp và cập nhật CSS bất cứ khi nào tệp SASS thay đổi, bằng cách sử dụng lệnh sau:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Tiếp theo, thực hiện lệnh đã cho ở trên, nó sẽ tự động tạo tệp style.css với đoạn mã sau:

Style.css được tạo như hình dưới đây:

style.css

.class1,
.class2 {
   color: red;
}

Đầu ra

Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -

Lưu mã html đã cho ở trên trong tệp .html multiline_selectors .
Mở tệp HTML này trên trình duyệt, kết quả hiển thị như hình dưới đây.

Bình luận

Nhận xét chiếm toàn bộ một dòng và bao gồm tất cả văn bản được lồng dưới chúng. Chúng dựa trên dòng trong cú pháp thụt lề. Để biết thêm thông tin về nhận xét, hãy tham khảo liên kết này .

@import

Trong SASS, @importChỉ thị có thể được viết với / không có dấu ngoặc kép. Không giống như trong SCSS, chúng phải được sử dụng với dấu ngoặc kép.

Ví dụ, trong SCSS, @import Chỉ thị có thể được sử dụng như -

@import "themes/blackforest";
@import "style.sass";

Điều này có thể được viết trong SASS là -

@import themes/blackforest
@import fontstyle.sass

Chỉ thị Mixin

SASS hỗ trợ tốc ký cho các lệnh như @mixin và @include. Thay vì@mixin và @include bạn có thể dùng = và + các ký tự, yêu cầu nhập ít hơn và làm cho mã của bạn đơn giản và dễ đọc hơn.

Ví dụ: bạn có thể viết các chỉ thị mixin dưới dạng:

=myclass
   font-size: 12px;
p
   +myclass

Đoạn mã đã cho ở trên giống như -

@mixin myclass
   font-size: 12px;
p
   @include myclass

Cú pháp không được chấp nhận

SASS hỗ trợ sử dụng một số cú pháp cũ. Tuy nhiên, sử dụng cú pháp này trong SASS lànot recommended. Cảnh báo sẽ được hiển thị nếu bạn sử dụng cú pháp này và nó sẽ bị gỡ bỏ trong các phiên bản sau. Một số cú pháp cũ được hiển thị trong bảng sau.

S. Không.	Nhà điều hành & Mô tả
1	= Nó được sử dụng thay vì: khi thiết lập các biến và thuộc tính cho các giá trị của SassScript.
2	\|\|= Nó được sử dụng thay vì: bất cứ khi nào bạn gán giá trị mặc định của một biến.
3	! Thay vì $,! đã được sử dụng làm tiền tố biến. Chức năng sẽ không bị thay đổi khi nó được sử dụng thay vì $.