programming css

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

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à

Triển khai Dart mã nguồn mở chính thức. [6]
Mô-đun nút "sass" chính thức trên npm, là Dart Sass được biên dịch thành JavaScript thuần túy. [7]
Mô-đun nút "sass-embedded" chính thức là trình bao bọc JavaScript xung quanh tệp thực thi Dart gốc. [số 8]
Việc triển khai Ruby mã nguồn mở ban đầu được tạo vào năm 2006,[6] kể từ khi không được dùng nữa do thiếu người bảo trì và đã đạt đến End-of-Life vào tháng 3 năm 2019. [9][10]
libSass, triển khai C++ mã nguồn mở chính thức, không dùng nữa vào tháng 10 năm 2020. [11]
Mô-đun nút "node-sass" không dùng nữa trên npm, dựa trên libSass không dùng nữa. [12]
JSass, một triển khai Java không chính thức,[13] dựa trên libSass không dùng nữa. [14]
phamlp, triển khai Sass/SCSS không chính thức trong PHP. [6]
Vaadin có triển khai Java của Sass. [15]
Firebug, tiện ích mở rộng Firefox XUL ["cũ"] để phát triển web. [16] Kể từ đó, nó không còn được dùng nữa vì các công cụ dành cho nhà phát triển được tích hợp vào chính Firefox. Nó ngừng hoạt động kể từ khi Firefox 57 ngừng hỗ trợ các tiện ích mở rộng XUL

Đặ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]

Số [kể cả đơn vị]
Chuỗi [có hoặc không có dấu ngoặc kép]
Màu sắc [tên hoặc tên]
Booleans

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ịch

table.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]

SCSSSassCSS biên dịch

________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-color

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

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

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

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

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

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.

Lịch sử[sửa]

Triển khai chính [ chỉnh sửa ]

Đặc điểm[sửa]

Các biến[sửa]

Làm tổ [ chỉnh sửa ]

Vòng lặp [ chỉnh sửa ]

Lập luận[sửa]

Kết hợp[sửa]

Kế thừa bộ chọn[sửa]

libSass [ chỉnh sửa ]

SCSS và SASS có giống nhau không?

SASS có nghĩa là gì trong mã?

SASS dựa trên cái gì?

Tệp SASS là gì?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề