Tại sao scss được gọi là sass?
Sass (viết tắt của cú pháp tuyệt vời biểu định kiểu) là ngôn ngữ kịch bản tiền xử lý được diễn giải hoặc biên dịch thành Cascading Style Sheets (CSS). SassScript là ngôn ngữ kịch bản Show Sass bao gồm hai cú pháp. Cú pháp ban đầu, được gọi là "cú pháp thụt lề", sử dụng cú pháp tương tự như Haml. [2] Nó sử dụng thụt đầu dòng để phân tách các khối mã và các ký tự xuống dòng để phân tách các quy tắc. Cú pháp mới hơn, SCSS (Sassy CSS), sử dụng định dạng khối giống như của CSS. Nó sử dụng dấu ngoặc nhọn để biểu thị các khối mã và dấu chấm phẩy để phân tách các quy tắc trong một khối. Cú pháp thụt lề và các tệp SCSS theo truyền thống được cung cấp các phần mở rộng. ngổ ngáo và. scss, tương ứng CSS3 bao gồm một loạt bộ chọn và bộ chọn giả nhóm các quy tắc áp dụng cho chúng. Sass (trong bối cảnh lớn hơn của cả hai cú pháp) mở rộng CSS bằng cách cung cấp một số cơ chế có sẵn trong các ngôn ngữ lập trình truyền thống hơn, đặc biệt là các ngôn ngữ hướng đối tượng, nhưng không có sẵn cho chính CSS3. Khi SassScript được diễn giải, nó sẽ tạo ra các khối quy tắc CSS cho các bộ chọn khác nhau như được xác định bởi tệp Sass. Trình thông dịch Sass dịch SassScript thành CSS. Ngoài ra, Sass có thể theo dõi. ngổ ngáo hoặc. scss và dịch nó thành đầu ra. css bất cứ khi nào. ngổ ngáo hoặc. tệp scss đã được lưu. [3] Cú pháp thụt lề là một ngôn ngữ kim loại. SCSS là một ngôn ngữ kim loại lồng nhau và là siêu bộ CSS, vì CSS hợp lệ là SCSS hợp lệ có cùng ngữ nghĩa SassScript cung cấp các cơ chế sau. biến, lồng nhau, mixin và kế thừa bộ chọn. [2] Lịch sử[sửa]Sass ban đầu được thiết kế bởi Hampton Catlin và được phát triển bởi Natalie Weizenbaum. [4][5] Sau các phiên bản ban đầu, Weizenbaum và Chris Eppstein đã tiếp tục mở rộng Sass bằng SassScript, một ngôn ngữ kịch bản được sử dụng trong các tệp Sass Triển khai chính [ chỉnh sửa ]SassScript được triển khai bằng nhiều ngôn ngữ, các triển khai đáng chú ý là
Đặc điểm[sửa]Các biến[sửa]Sass cho phép các biến được xác định. Các biến bắt đầu bằng ký hiệu đô la (______07). Việc gán biến được thực hiện với dấu hai chấm (______08). [16] SassScript hỗ trợ bốn loại dữ liệu. [16]
Các biến có thể là đối số hoặc kết quả từ một trong số các hàm có sẵn. [17] Trong quá trình dịch, giá trị của các biến được chèn vào tài liệu CSS đầu ra. [2] SCSSSassCSS biên dịch$primary-color: #3bbfce; $margin: 16px; .content-navigation { border-color: $primary-color; color: darken($primary-color, 10%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $primary-color; } $primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } Làm tổ [ chỉnh sửa ]CSS hỗ trợ lồng logic, nhưng bản thân các khối mã không được lồng vào nhau. Sass cho phép chèn mã lồng vào nhau. [2] SCSSSassCSS biên dịchtable.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.3em; } } table.hl margin: 2em 0 td.ln text-align: right li font: family: serif weight: bold size: 1.3em table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } li { font-family: serif; font-weight: bold; font-size: 1.3em; } Các kiểu lồng phức tạp hơn bao gồm lồng không gian tên và tham chiếu gốc được thảo luận trong tài liệu Sass. [16] ________số 8 =table-base th text-align: center font-weight: bold td, th padding: 2px #data +table-base $primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color0 Vòng lặp [ chỉnh sửa ]Sass cho phép lặp lại các biến bằng cách sử dụng $primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color9, .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; }0 và .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; }1, có thể được sử dụng để áp dụng các kiểu khác nhau cho các thành phần có lớp hoặc id tương tựSassBiên soạn CSS $primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color4 $primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color0 Lập luận[sửa]Mixins cũng hỗ trợ đối số. [2] SassBiên soạn CSS$primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color1 $primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color2 Kết hợp[sửa]SassBiên soạn CSS$primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color3 $primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color4 Kế thừa bộ chọn[sửa]Mặc dù CSS3 hỗ trợ hệ thống phân cấp Mô hình đối tượng tài liệu (DOM), nhưng nó không cho phép kế thừa bộ chọn. Trong Sass, tính kế thừa đạt được bằng cách chèn một dòng bên trong khối mã sử dụng từ khóa @extend và tham chiếu một bộ chọn khác. Các thuộc tính của bộ chọn mở rộng được áp dụng cho bộ chọn gọi. [2] SassBiên soạn CSS$primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color5 $primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color6 Sass hỗ trợ đa kế thừa. [16] libSass [ chỉnh sửa ]Tại Hội nghị Nhà phát triển HTML5 2012, Hampton Catlin, người tạo ra Sass, đã công bố phiên bản 1. 0 của libSass, một triển khai C++ mã nguồn mở của Sass được phát triển bởi Catlin, Aaron Leung và nhóm kỹ sư tại Moovweb. [18][19] Người bảo trì Sass hiện tại, Chris Eppstein, cũng bày tỏ ý định đóng góp. [20] Theo Catlin, libSass có thể được "thả [ped] vào bất cứ thứ gì và nó sẽ có Sass trong đó. Bạn có thể thả nó ngay vào Firefox ngay hôm nay và xây dựng Firefox và nó sẽ biên dịch trong đó. Chúng tôi đã viết trình phân tích cú pháp của riêng mình từ đầu để đảm bảo điều đó có thể thực hiện được. “[21] SCSS và SASS có giống nhau không?SASS (Syntactally Awesome Style Sheets) là ngôn ngữ kịch bản tiền xử lý sẽ được biên dịch hoặc diễn giải thành CSS. Bản thân SassScript là một ngôn ngữ kịch bản trong khi SCSS là cú pháp chính cho SASS được xây dựng dựa trên cú pháp CSS hiện có .
SASS có nghĩa là gì trong mã?Sass là gì? . Sass là một phần mở rộng của CSS. Sass là một bộ tiền xử lý CSS. Sass hoàn toàn tương thích với tất cả các phiên bản CSS. Syntactically Awesome Stylesheet. Sass is an extension to CSS. Sass is a CSS pre-processor. Sass is completely compatible with all versions of CSS.
SASS dựa trên cái gì?Đó là bộ CSS cao cấp , có nghĩa là tất cả CSS hợp lệ cũng là SCSS hợp lệ. Cú pháp thụt lề (. sass ) khác thường hơn. nó sử dụng dấu thụt đầu dòng thay vì dấu ngoặc nhọn để lồng các câu lệnh và dòng mới thay vì dấu chấm phẩy để phân tách chúng.
Tệp SASS là gì?Tệp SASS là gì? . Nó được biên dịch thành CSS và được lưu trữ với. phần mở rộng sass. a preprocessor scripting language. It is compiled into CSS and is stored with the . sass extension. |