SASS mở rộng quy tắc
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 của CSS với khả năng nhập các kiểu dáng SASS và CSS, cung cấp quyền truy cập vào mixin, chức năng và biến và kết hợp CSS của nhiều kiểu dáng với nhau. Không giống như nhập CSS đơn giản, yêu cầu trình duyệt thực hiện nhiều yêu cầu HTTP khi nó hiển thị trang của bạn, SASS nhập được xử lý hoàn toàn trong quá trình biên dịch.Nhập khẩu SASS có cùng cú pháp như nhập khẩu CSS, ngoại trừ việc chúng & nbsp; cho phép nhiều lần nhập được phân tách bằng dấu phẩy thay vì yêu cầu mỗi người & nbsp; để có
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 riêng. Ngoài ra, trong cú pháp thụt vào, URL đã nhập & nbsp; aren yêu cầu phải có & nbsp; trích dẫn.CSS imports, except that they allow multiple imports to be separated by commas rather than requiring each one to have its own // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8. Also, in the
indented syntax, imported URLs aren’t required to have quotes.Heads & nbsp; lên!
Nhóm SASS không khuyến khích việc tiếp tục sử dụng quy tắc
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8. Sass sẽ dần dần đưa nó ra trong vài năm tới, và cuối cùng loại bỏ nó khỏi ngôn ngữ hoàn toàn. Thích quy tắc // style.sass
@import foundation/code, foundation/lists
1 thay thế. [Lưu ý rằng chỉ DART SASS hiện đang hỗ trợ // style.sass
@import foundation/code, foundation/lists
1.Điều gì sai với & nbsp; ________ 48?
Quy tắc
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 có một số vấn đề nghiêm trọng & NBSP;
8 làm cho tất cả các biến, mixin và chức năng có thể truy cập toàn cầu. Điều này làm cho mọi người [hoặc công cụ] rất khó khăn để biết bất cứ điều gì là & nbsp; được xác định.// foundation/_lists.sass ul, ol text-align: left & & padding: bottom: 0 left: 0
Bởi vì mọi thứ trên toàn cầu, các thư viện phải tiền tố cho tất cả các thành viên của họ để tránh đặt tên & nbsp; va chạm.
Các quy tắc
7 cũng là toàn cầu, điều này gây khó khăn cho việc dự đoán các quy tắc phong cách nào sẽ được & nbsp;// style.sass @import foundation/code, foundation/lists
Mỗi bảng kiểu được thực hiện và CSS của nó phát ra mỗi khi nó
8ed, làm tăng thời gian biên dịch và tạo ra Bloated & NBSP; đầu ra.CSS emitted every time it’s// foundation/_lists.sass ul, ol text-align: left & & padding: bottom: 0 left: 0
8ed, which increases compilation time and produces bloated output.// foundation/_lists.sass ul, ol text-align: left & & padding: bottom: 0 left: 0
Không có cách nào để xác định các thành viên tư nhân hoặc bộ chọn giữ chỗ không thể truy cập được đối với hạ nguồn & nbsp; bảng hiệu kiểu.
Hệ thống mô -đun mới và quy tắc
// style.sass
@import foundation/code, foundation/lists
1 giải quyết tất cả các vấn đề này & nbsp;Làm thế nào để tôi & nbsp; di chuyển?
Chúng tôi đã viết một công cụ di chuyển tự động chuyển đổi hầu hết các mã dựa trên ____ 48 thành mã dựa trên ________ 51 trong đèn flash. Chỉ cần trỏ nó vào các điểm nhập cảnh của bạn và để nó & nbsp; chạy!
- SCSS
- Sass
- CSS
SCSS Syntax Syntax
// foundation/_code.scss
code {
padding: .25em;
line-height: 0;
}
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
// style.scss
@import 'foundation/code', 'foundation/lists';
Sass Syntax
// foundation/_code.sass
code
padding: .25em
line-height: 0
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
// style.sass
@import foundation/code, foundation/lists
CSS Output Output
code {
padding: .25em;
line-height: 0;
}
ul, ol {
text-align: left;
}
ul ul, ol ol {
padding-bottom: 0;
padding-left: 0;
}
Khi SASS nhập một tệp, tệp đó được đánh giá như thể nội dung của nó & nbsp; xuất hiện trực tiếp thay cho
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8. Bất kỳ mixin, chức năng nào, & nbsp; và các biến từ tệp đã nhập được cung cấp và tất cả CSS & NBSP của nó được bao gồm tại điểm chính xác mà // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 được viết. Hơn nữa, & nbsp; bất kỳ mixin, chức năng hoặc biến nào được xác định trước & nbsp; ________ 48 [bao gồm cả từ các // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 khác] có sẵn trong hộp số nhập khẩu & nbsp;CSS is included at the exact point where the // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 was written. What’s more, any mixins, functions, or variables that were defined before the // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 [including from other // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8s] are available in the imported stylesheet.Heads & nbsp; lên!
Nhóm SASS không khuyến khích việc tiếp tục sử dụng quy tắc
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8. Sass sẽ dần dần đưa nó ra trong vài năm tới, và cuối cùng loại bỏ nó khỏi ngôn ngữ hoàn toàn. Thích quy tắc // style.sass
@import foundation/code, foundation/lists
1 thay thế. [Lưu ý rằng chỉ DART SASS hiện đang hỗ trợ // style.sass
@import foundation/code, foundation/lists
1.CSS more than once.Điều gì sai với & nbsp; ________ 48?Finding the File
Quy tắc
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 có một số vấn đề nghiêm trọng & NBSP;Heads & nbsp; lên!
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 làm cho tất cả các biến, mixin và chức năng có thể truy cập toàn cầu. Điều này làm cho mọi người [hoặc công cụ] rất khó khăn để biết bất cứ điều gì là & nbsp; được xác định.URL, not by file path. This means you need to use forward slashes, not backslashes, even when you’re
on Windows.Bởi vì mọi thứ trên toàn cầu, các thư viện phải tiền tố cho tất cả các thành viên của họ để tránh đặt tên & nbsp; va chạm.Load Paths
Các quy tắc
// style.sass
@import foundation/code, foundation/lists
7 cũng là toàn cầu, điều này gây khó khăn cho việc dự đoán các quy tắc phong cách nào sẽ được & nbsp;Mỗi bảng kiểu được thực hiện và CSS của nó phát ra mỗi khi nó
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8ed, làm tăng thời gian biên dịch và tạo ra Bloated & NBSP; đầu ra.Không có cách nào để xác định các thành viên tư nhân hoặc bộ chọn giữ chỗ không thể truy cập được đối với hạ nguồn & nbsp; bảng hiệu kiểu.
Hệ thống mô -đun mới và quy tắc
// style.sass
@import foundation/code, foundation/lists
1 giải quyết tất cả các vấn đề này & nbsp;Làm thế nào để tôi & nbsp; di chuyển?Partials
Chúng tôi đã viết một công cụ di chuyển tự động chuyển đổi hầu hết các mã dựa trên ____ 48 thành mã dựa trên ________ 51 trong đèn flash. Chỉ cần trỏ nó vào các điểm nhập cảnh của bạn và để nó & nbsp; chạy!
Tệp chỉ mục permalinkindex & nbsp; filesIndex Files
Compatibility:
Dart Sass
✓LIBSASS
since 3.6.03.6.0Ruby Sass
since 3.6.03.6.0Nếu bạn viết một
// foundation/_code.scss
code {
padding: .25em;
line-height: 0;
}
7 hoặc // foundation/_code.scss
code {
padding: .25em;
line-height: 0;
}
8 trong một thư mục, khi chính thư mục & nbsp; chính được nhập tệp đó sẽ được tải trong địa điểm & nbsp của nó.- SCSS
- Sass
- CSS
SCSS Syntax Syntax
// foundation/_code.scss
code {
padding: .25em;
line-height: 0;
}
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
// foundation/_index.scss
@import 'code', 'lists';
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
0Sass & nbsp; cú pháp
// foundation/_code.sass
code
padding: .25em
line-height: 0
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
3// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
4CSS Output Output
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
5Các nhà nhập khẩu tùy chỉnh permalinkcustom & nbsp; nhà nhập khẩuCustom Importers
Tất cả các triển khai SASS cung cấp một cách để xác định các nhà nhập khẩu tùy chỉnh, trong đó & nbsp; kiểm soát cách
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8S định vị & nbsp; styleSheets:Node Sass và Dart Sass trên NPM cung cấp tùy chọn
0 & nbsp; như một phần của JS & NBSP; API của họ.JS API.// foundation/_lists.scss ul, ol { text-align: left; & & { padding: { bottom: 0; left: 0; } } }
DART SASS ON PUB cung cấp một lớp
1 trừu tượng có thể & nbsp; được mở rộng bởi một tùy chỉnh & nbsp; nhà nhập khẩu.// foundation/_lists.scss ul, ol { text-align: left; & & { padding: { bottom: 0; left: 0; } } }
Ruby Sass cung cấp một lớp
2 trừu tượng có thể & nbsp; được mở rộng bởi một nhà nhập khẩu tùy chỉnh & nbsp;// foundation/_lists.scss ul, ol { text-align: left; & & { padding: { bottom: 0; left: 0; } } }
Làm tổ permalinknestingNesting
Nhập khẩu thường được viết ở cấp cao nhất của một bảng kiểu, nhưng họ & nbsp; don lồng phải có. Họ có thể lồng nhau trong các quy tắc phong cách hoặc các quy tắc CSS đơn giản & NBSP; CSS đã nhập được lồng trong bối cảnh đó, điều này làm cho Nested & NBSP; được xác định trên toàn cầu, & nbsp; mặc dù.CSS at-rules as well. The imported CSS is nested in that context, which makes nested imports useful for scoping a chunk of CSS to a particular element or media query. Note that top-level mixins, functions, and variables defined in the nested import are still defined globally, though.
- SCSS
- Sass
- CSS
SCSS Syntax Syntax
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
6// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
7Sass Syntax
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
8// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
9CSS Output Output
// style.scss
@import 'foundation/code', 'foundation/lists';
0Sass & nbsp; cú pháp
Các nhà nhập khẩu tùy chỉnh permalinkcustom & nbsp; nhà nhập khẩu
Tất cả các triển khai SASS cung cấp một cách để xác định các nhà nhập khẩu tùy chỉnh, trong đó & nbsp; kiểm soát cách // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8S định vị & nbsp; styleSheets:
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
Node Sass và Dart Sass trên NPM cung cấp tùy chọn
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
0 & nbsp; như một phần của JS & NBSP; API của họ.CSS in nested imports is evaluated like a mixin, which means that any parent selectors will refer to the selector in which the stylesheet is nested.- SCSS
- Sass
- CSS
SCSS Syntax Syntax
// style.scss
@import 'foundation/code', 'foundation/lists';
1// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
7Sass Syntax
Sass & nbsp; cú phápCSS Output Output
// style.scss
@import 'foundation/code', 'foundation/lists';
5Các nhà nhập khẩu tùy chỉnh permalinkcustom & nbsp; nhà nhập khẩuCSS permalinkImporting CSS
Compatibility:
Dart Sass
since 1.11.01.11.0LIBSASS
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8S định vị & nbsp; styleSheets:Ruby Sass
Node Sass và Dart Sass trên NPM cung cấp tùy chọn// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
0 & nbsp; như một phần của JS & NBSP; API của họ.DART SASS ON PUB cung cấp một lớp
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
1 trừu tượng có thể & nbsp; được mở rộng bởi một tùy chỉnh & nbsp; nhà nhập khẩu.SCSS files rather than being parsed as CSS. This behavior has been deprecated, and an update is in the works to support the behavior described below.Ruby Sass cung cấp một lớp
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
2 trừu tượng có thể & nbsp; được mở rộng bởi một nhà nhập khẩu tùy chỉnh & nbsp;CSS // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8.- SCSS
- Sass
- CSS
SCSS Syntax Syntax
// style.scss
@import 'foundation/code', 'foundation/lists';
6// style.scss
@import 'foundation/code', 'foundation/lists';
7Sass Syntax
// style.scss
@import 'foundation/code', 'foundation/lists';
6// style.scss
@import 'foundation/code', 'foundation/lists';
9CSS Output Output
// foundation/_code.sass
code
padding: .25em
line-height: 0
0Sass & nbsp; cú pháp files imported by Sass don’t allow any special Sass features. In order to make sure authors don’t accidentally write Sass in their CSS, all Sass features that aren’t also valid CSS will produce errors. Otherwise, the CSS will be rendered as-is. It can even be extended!
Các nhà nhập khẩu tùy chỉnh permalinkcustom & nbsp; nhà nhập khẩuCSS @imports permalinkPlain CSS // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8s
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
Compatibility:
Dart Sass
✓LIBSASS
Tất cả các triển khai SASS cung cấp một cách để xác định các nhà nhập khẩu tùy chỉnh, trong đó & nbsp; kiểm soát cách// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8S định vị & nbsp; styleSheets:Ruby Sass
✓Node Sass và Dart Sass trên NPM cung cấp tùy chọn
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
0 & nbsp; như một phần của JS & NBSP; API của họ.CSS imports correctly. However, any custom importers will incorrectly apply to plain-CSS // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 rules, making it possible for those rules to load Sass files.DART SASS ON PUB cung cấp một lớp
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
1 trừu tượng có thể & nbsp; được mở rộng bởi một tùy chỉnh & nbsp; nhà nhập khẩu.CSS, Sass needs a way of compiling plain CSS // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8s without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8s with the following characteristics to plain CSS imports:- Ruby Sass cung cấp một lớp
2 trừu tượng có thể & nbsp; được mở rộng bởi một nhà nhập khẩu tùy chỉnh & nbsp;URL ends with// foundation/_lists.scss ul, ol { text-align: left; & & { padding: { bottom: 0; left: 0; } } }
3.// foundation/_lists.scss ul, ol { text-align: left; & & { padding: { bottom: 0; left: 0; } } }
- Làm tổ permalinknestingURL begins
5 or// foundation/_index.scss @import 'code', 'lists';
6.// foundation/_index.scss @import 'code', 'lists';
- Nhập khẩu thường được viết ở cấp cao nhất của một bảng kiểu, nhưng họ & nbsp; don lồng phải có. Họ có thể lồng nhau trong các quy tắc phong cách hoặc các quy tắc CSS đơn giản & NBSP; CSS đã nhập được lồng trong bối cảnh đó, điều này làm cho Nested & NBSP; được xác định trên toàn cầu, & nbsp; mặc dù.URL is written as a
7.// foundation/_index.scss @import 'code', 'lists';
- 💡 Fun & nbsp; thực tế:
- SCSS
- Sass
- CSS
SCSS Syntax Syntax
// foundation/_code.sass
code
padding: .25em
line-height: 0
1Sass Syntax
// foundation/_code.sass
code
padding: .25em
line-height: 0
2CSS Output Output
// foundation/_code.sass
code
padding: .25em
line-height: 0
3Sass & nbsp; cú phápInterpolation
Các nhà nhập khẩu tùy chỉnh permalinkcustom & nbsp; nhà nhập khẩuCSS imports can. This makes it possible to dynamically generate imports, for example based on mixin parameters.
- SCSS
- Sass
- CSS
SCSS Syntax Syntax
// foundation/_code.sass
code
padding: .25em
line-height: 0
4Sass Syntax
// foundation/_code.sass
code
padding: .25em
line-height: 0
5CSS Output Output
// foundation/_code.sass
code
padding: .25em
line-height: 0
6Sass & nbsp; cú phápImport and Modules
Compatibility:
Dart Sass
LIBSASS
✗Ruby Sass
✗Chỉ DART SASS hiện đang hỗ trợ
// style.sass
@import foundation/code, foundation/lists
1. Thay vào đó, người dùng của các triển khai khác phải sử dụng quy tắc // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 & nbsp;Hệ thống mô -đun SASS, tích hợp liền mạch với
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8, cho dù & nbsp; bạn có thể nhập một tệp chứa các quy tắc // style.sass
@import foundation/code, foundation/lists
1 hoặc tải một tệp & nbsp; chứa nhập dưới dạng mô -đun. Chúng tôi muốn thực hiện quá trình chuyển đổi từ // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 sang ________ 51 & nbsp; mượt mà như & nbsp; có thể.Nhập tệp hệ thống mô-đun PermalinkImporting một hệ thống mô-đun & NBSP; TệpImporting a Module-System File
Khi bạn nhập một tệp chứa các quy tắc
// style.sass
@import foundation/code, foundation/lists
1, tệp nhập có & nbsp; truy cập vào tất cả các thành viên [thậm chí là thành viên riêng] được xác định trực tiếp trong tệp đó, nhưng không phải bất kỳ thành viên nào từ các mô -đun mà tệp đã tải. Tuy nhiên, nếu tệp đó & nbsp; chứa các quy tắc // foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
05, tệp nhập sẽ có quyền truy cập vào các thành viên được chuyển tiếp & nbsp; Điều này có nghĩa là bạn có thể nhập một thư viện được viết để sử dụng với & nbsp; Mô -đun & nbsp; hệ thống.Heads & nbsp; lên!
Khi một tệp có quy tắc
// style.sass
@import foundation/code, foundation/lists
1 được nhập, tất cả các CSS được tải qua một cách chuyển tiếp bởi các quy tắc được bao gồm trong bảng kiểu kết quả, ngay cả khi nó đã được đưa vào bởi một loại nhập khác. Nếu bạn không cẩn thận, điều này có thể dẫn đến CSS & NBSP; đầu ra!CSS transitively loaded by those is included in the resulting stylesheet, even if it’s already been included by another import. If
you’re not careful, this can result in bloated CSS output!Các tệp chỉ nhập chỉ nhập permalinkimport & nbsp; filesImport-Only Files
Một API có ý nghĩa đối với
// style.sass
@import foundation/code, foundation/lists
1 có thể không có ý nghĩa đối với ____ 48. & nbsp; ví dụ, // style.sass
@import foundation/code, foundation/lists
1 thêm một không gian tên cho tất cả các thành viên theo mặc định để bạn có thể an toàn & nbsp; Nếu & nbsp; bạn là một tác giả thư viện, bạn có thể lo ngại rằng nếu bạn cập nhật thư viện của mình lên & nbsp; sử dụng hệ thống mô-đun mới, người dùng ____ 48 hiện tại của bạn sẽ & nbsp; break.API that makes sense for // style.sass
@import foundation/code, foundation/lists
1 might not make sense for // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8. For example, // style.sass
@import foundation/code, foundation/lists
1 adds a namespace to all members by default so you can safely use short names, but // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 doesn’t
so you might need something longer. If you’re a library author, you may be concerned that if you update your library to use the new module system, your existing // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8-based users will break.Để làm cho điều này dễ dàng hơn, SASS cũng hỗ trợ các tệp chỉ nhập. Nếu bạn đặt tên cho A & NBSP; Tệp
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
12, nó sẽ chỉ được tải cho nhập khẩu, không phải cho ________ 51S. & NBSP; theo cách này, bạn có thể giữ lại khả năng tương thích cho người dùng // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 trong khi vẫn cung cấp & NBSP; API đẹp cho người dùng của mô -đun mới & NBSP; hệ thống.API for users of
the new module system.- SCSS
- Sass
SCSS Syntax Syntax
// foundation/_code.sass
code
padding: .25em
line-height: 0
7// foundation/_code.sass
code
padding: .25em
line-height: 0
8Sass Syntax
// foundation/_code.sass
code
padding: .25em
line-height: 0
9// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
0Định cấu hình các mô -đun thông qua các mô -đun PermalinkConfiguring thông qua & NBSP; Nhập khẩuConfiguring Modules Through Imports
Compatibility:
Dart Sass
since 1.24.01.24.0LIBSASS
✗Ruby Sass
✗Chỉ DART SASS hiện đang hỗ trợ
// style.sass
@import foundation/code, foundation/lists
1. Thay vào đó, người dùng của các triển khai khác phải sử dụng quy tắc // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 & nbsp;- SCSS
- Sass
- Định cấu hình các mô -đun thông qua các mô -đun PermalinkConfiguring thông qua & NBSP; Nhập khẩu
SCSS Syntax Syntax
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
1// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
2// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
3Sass Syntax
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
4// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
5// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
6CSS Output Output
// foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
7Heads & nbsp; lên!
Khi một tệp có quy tắc
// style.sass
@import foundation/code, foundation/lists
1 được nhập, tất cả các CSS được tải qua một cách chuyển tiếp bởi các quy tắc được bao gồm trong bảng kiểu kết quả, ngay cả khi nó đã được đưa vào bởi một loại nhập khác. Nếu bạn không cẩn thận, điều này có thể dẫn đến CSS & NBSP; đầu ra!Các tệp chỉ nhập chỉ nhập permalinkimport & nbsp; filesLoading a Module That Contains Imports
Một API có ý nghĩa đối với
// style.sass
@import foundation/code, foundation/lists
1 có thể không có ý nghĩa đối với ____ 48. & nbsp; ví dụ, // style.sass
@import foundation/code, foundation/lists
1 thêm một không gian tên cho tất cả các thành viên theo mặc định để bạn có thể an toàn & nbsp; Nếu & nbsp; bạn là một tác giả thư viện, bạn có thể lo ngại rằng nếu bạn cập nhật thư viện của mình lên & nbsp; sử dụng hệ thống mô-đun mới, người dùng ____ 48 hiện tại của bạn sẽ & nbsp; break.Để làm cho điều này dễ dàng hơn, SASS cũng hỗ trợ các tệp chỉ nhập. Nếu bạn đặt tên cho A & NBSP; Tệp
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
12, nó sẽ chỉ được tải cho nhập khẩu, không phải cho ________ 51S. & NBSP; theo cách này, bạn có thể giữ lại khả năng tương thích cho người dùng // foundation/_lists.sass
ul, ol
text-align: left
& &
padding:
bottom: 0
left: 0
8 trong khi vẫn cung cấp & NBSP; API đẹp cho người dùng của mô -đun mới & NBSP; hệ thống.