Thực đơn
trang chủYandex

Bộ tiền xử lý Sass. Hướng dẫn đầy đủ và lý do bạn cần nó. Sass cho trẻ nhỏ - hướng dẫn chi tiết

Sass là một phần mở rộng CSS giúp tăng thêm sức mạnh và sự sang trọng cho nó bằng ngôn ngữ đơn giản. Sass cung cấp cho bạn khả năng sử dụng các biến, quy tắc lồng nhau, mixin, nhập nội tuyến, v.v., tất cả đều có cú pháp hoàn toàn tương thích với CSS. Sass giúp giữ cho các bảng định kiểu khổng lồ được tổ chức tốt và các kiểu nhỏ chạy nhanh chóng, đặc biệt là với thư viện kiểu La bàn.

Mục đích của bài viết này là làm rõ cách Sass hoạt động trong các trường hợp khác nhau và tự quyết định xem bạn có cần nó hay không.

Cú pháp

Có hai cú pháp có sẵn cho Sass. Cái đầu tiên, được gọi là SCSS (CSS ngổ ngáo) và được sử dụng xuyên suốt bài viết này — là một cái nâng cao Cú pháp CSS. Điều này có nghĩa là mọi biểu định kiểu CSS hợp lệ đều là tệp SCSS hợp lệ, mang cùng một logic. Hơn nữa, SCSS hiểu hầu hết các thủ thuật CSS và cú pháp của nhà cung cấp, chẳng hạn như cú pháp bộ lọc trong IE cũ. Cú pháp này được cải thiện nhờ chức năng Sass được mô tả bên dưới. Các tệp sử dụng cú pháp này có phần mở rộng .scss.

Cú pháp thứ hai và cũ hơn, còn được gọi là cú pháp biên hoặc đôi khi chỉ là Sass, cung cấp một cách ngắn gọn hơn để làm việc với CSS. Nó sử dụng thụt lề thay vì dấu ngoặc đơn để phân tách các bộ chọn lồng nhau và dòng mới thay vì dấu chấm phẩy để phân tách các thuộc tính. Đôi khi mọi người thấy nó dễ hiểu và viết nhanh hơn SCSS. Trên thực tế, những cú pháp này có chức năng giống nhau, mặc dù một số cú pháp có cách tiếp cận hơi khác. Các tệp sử dụng cú pháp này có phần mở rộng .sass.

Cú pháp này có thể nhập các tệp được viết bằng cú pháp khác. Các tập tin có thể được tự động chuyển đổi từ tập tin này sang tập tin khác bằng lệnh sass-convert:

# Chuyển đổi Sass sang SCSS $ sass-convert style.sass style.scss # Chuyển đổi SCSS sang Sass $ sass-convert style.scss style.sass

Sử dụng Sass

Sass có thể được sử dụng theo ba cách: như một dòng lệnh, như mô-đun riêng biệt Ruby và làm plugin cho khung giá, bao gồm Ruby on Rails và Merb. Trước hết, để làm được điều này, bạn cần cài đặt Sass gem:

Nếu bạn đang dùng Windows, trước tiên bạn có thể cần phải cài đặt Ruby.

Để chạy Sass từ dòng lệnh, chỉ cần sử dụng:

sass input.scss đầu ra.css

Bạn cũng có thể yêu cầu Sass xem tệp và cập nhật CSS mỗi khi tệp Sass thay đổi:

sass --watch input.scss:output.css

Nếu bạn có một thư mục chứa nhiều tệp Sass, thì bạn cũng có thể yêu cầu Sass xem toàn bộ thư mục:

sass --watch app/sass:public/stylesheets

Sử dụng sass --help để có tài liệu đầy đủ.

Bộ chọn

CSS so với Bộ chọn SCSS.

#main (màu: #999; ) #main .nội dung ( màu: #bfbfbf; )

Đoạn CSS ở trên có thể được viết bằng SCSS như thế này:

#main( màu: #999; .content( màu: #bfbfbf; ) )

Như chúng ta có thể thấy, cấu trúc SCSS giống với cấu trúc DOM hơn. Điều này cho phép chúng tôi tổ chức CSS hiệu quả hơn. Dưới đây là ví dụ:

#main h1 ( color: #00ff00; chiều rộng: 97%; .title ( màu nền: #ff0000; color: #000000; ) )

Sẽ được biên soạn thành:

#main h1 ( color: #00ff00; width: 97%; ) #main h1 .title( màu nền: #ff0000; color: #000000; )

Đề cập đến bộ chọn cha mẹ:

#wrapper h1( width:20px; &:hover( width:25px; ) )

& sẽ được thay thế bởi bộ chọn cha. Tức là đoạn code trên sẽ tương đương với:

#wrapper h1( width:20px; ) #wrapper h1:hover( width:25px; )

Nhập khẩu

Nhập khẩu bình thường.

@import “foo.css”; // nhập foo.css @import màn hình “foo”; // nhập foo.scss @import màn hình “foo.scss”; //nhập foo.scss @import “foo1”,”foo2" màn hình; // nhập foo1.scss và foo2 scss

một phần

Nếu bạn không muốn biên dịch tệp SCSS dưới dạng CSS, bạn có thể sử dụng “_” trước tên tệp.

@import “màu sắc”; //_colors.scss sẽ được nhập @import “utils/foo.scss”; // Thao tác này sẽ nhập fo.scss vào thư mục utils.

Nhập khẩu lồng nhau:

Nếu demo.scss bao gồm:

Ví dụ (màu: đỏ; )

#main (@import “bản demo”; )

Sẽ được biên soạn thành

#main .example ( color: red; )

Biến

Biến SCSS bắt đầu bằng một ký tự $ .

$ chiều rộng: 10px; $headercolor:đỏ; #main h1( chiều rộng: $width; color:$headercolor; )

Sẽ được biên soạn thành:

#chính h1( chiều rộng: 10px; màu: đỏ; )

Các biến chỉ có sẵn trong cấp độ bộ chọn lồng nhau nơi chúng được khai báo. Nếu bạn muốn một biến có thể truy cập được bên ngoài phạm vi, thì bạn cần thêm vào biến đó !toàn cầu

#main ( $width: 5em !global; width: $width; ) #sidebar ( width: $width; )

Bạn có thể chỉ định các biến trong tập tin riêng biệt và bạn có thể nhập tệp scss này để sử dụng các biến này. Đây giống như một tập tin cấu hình cho dự án của bạn. Nếu bạn thay đổi giá trị của biến, nó sẽ thay đổi ở bất cứ nơi nào bạn sử dụng. Nó rất hiệu quả đối với dự án lớn. Chúng ta sẽ thấy điều này sau một chút.

Bạn cũng có thể thực hiện các hoạt động khác nhau trong SCSS. Ví dụ:

P ( font: 10px/8px; // CSS thuần không chia $width: 1000px; width: $width/2; // Sử dụng các biến trong phép chia width: round(1.5)/2; // Sử dụng hàm và chia chiều cao: ( 500px/2); // Sử dụng dấu ngoặc và chia lề-trái: 5px + 8px/2px; // Sử dụng phông chữ cộng và chia: (in nghiêng đậm 10px/8px); // Trong danh sách, dấu ngoặc không được tính đến )

Biên dịch thành:

Chèn: #{}

Bạn có thể sử dụng các biến trong thuộc tính tên và giá trị bằng cách sử dụng #() . Ví dụ:

$name:foo; $attr:đường viền; p.#($name) ( #($attr)-color: blue; )

Biên dịch thành:

P.foo ( màu viền: xanh; )

Chỉ thị điều khiển

@nếu như

p (@if 1 + 1 == 2 (đường viền: 1px liền khối; ) @if 5< 3 { border: 2px dotted; } @if null { border: 3px double; } }

Biên dịch thành:

P (đường viền: 1px liền khối; )

@vì

@for $i từ 1 đến 3 ( .item-#($i) ( width: 2em * $i; ) )

Biên dịch thành:

Mục-1 ( chiều rộng: 2em; ) .item-2 ( chiều rộng: 4em; ) .item-3 ( chiều rộng: 6em; )

@mỗi

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) ( #($header) ( font-size: $size; ) )

Biên dịch thành:

H1 (cỡ chữ: 2em; ) h2 (cỡ chữ: 1.5em; ) h3 (cỡ chữ: 1.2em; )

@trong khi

$i: 6; @while $i > 0 ( .item-#($i) ( width: 2em * $i; ) $i: $i - 2; )

Biên dịch thành:

Mục-6 ( chiều rộng: 12em; ) .item-4 ( chiều rộng: 8em; ) .item-2 ( chiều rộng: 4em; )

cá hagfish

Mixins cho phép bạn xác định các kiểu có thể được sử dụng lại trong toàn bộ biểu định kiểu. Bạn có thể coi mixin như các hàm trong một số ngôn ngữ lập trình khác. Bạn có thể truyền các biến giống như trong các hàm của bất kỳ ngôn ngữ lập trình nào khác. Trong SCSS, mixins trả về một bộ quy tắc CSS. Bạn có thể sử dụng mixin như thế này bằng cách @include tên mixin được xác định bởi lệnh @mixin.

Hãy xem xét ví dụ sau:

@mixin văn bản lớn ( phông chữ: ( family: Arial; kích thước: 20px; trọng lượng: đậm; ) màu: #ff0000; ) .page-title ( @include văn bản lớn; đệm: 4px; lề trên: 10px; )

Biên dịch thành:

Tiêu đề trang ( họ phông chữ: Arial; cỡ chữ: 20px; độ dày phông chữ: đậm; màu: #ff0000; phần đệm: 4px; lề trên: 10px; )

Bạn cũng có thể sử dụng hỗn hợp hỗn hợp, như thế này:

@mixin mixin-one( color: red; ) @mixin mixin-two( width:20px; ) .page-title ( @include mixin-one; @include mixin-two; )

Bạn cũng có thể truyền các biến trong mixins:

$global-tiền tố:webkit moz ms o; Tiền tố @mixin ($property,$value,$prefixes:null)( @if $prefixes==null( @each $prefix in $globel-prefixes ( -#($prefix)-#($property): $value; ) ) @else ( @each $prefix trong $prefixes ( -#($prefix)-#($property): $value; ) ) #($property): $value; ) *( @include tiền tố(box-sizing ,hộp viền); )

Sẽ được biên soạn thành:

*( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing: hộp viền; )

Chức năng

Bạn cũng có thể xác định các hàm trả về một giá trị. Ví dụ.

$không có cột:12; $gutter-width:2%; @function get-column-width($i)( @return (100% - ($no-of-columns/$i - 1) * $gutter-width) / $no-of-columns * $i; ) . col-6 ( width:get-column-width(6); )

Sẽ được biên soạn thành:

Col-6 (chiều rộng: 49%; )

Tiện ích mở rộng

Bạn sẽ gặp phải tình huống cần sử dụng lại các kiểu. Hãy xem xét ví dụ sau:

Cả hai sẽ có kiểu dáng giống nhau ngoại trừ màu sắc.

Btn(lề:10px; màu:đen; chiều rộng:200px; chiều cao:100px; ) .btn-blue( @extend .btn; nền:blue; )

Điều này sẽ biên dịch thành:

Btn,.btn-blue( lề:10px; màu:đen; chiều rộng:200px; chiều cao:100px; ) .btn-blue( nền: xanh; )

Bạn cũng có thể liên kết các tiện ích mở rộng và sử dụng nhiều tiện ích mở rộng trong một bộ chọn CSS.

Nếu bạn không muốn biên dịch chỉ thị mở rộng sang CSS, bạn có thể sử dụng % trước bộ chọn.

%btn( lề:10px; màu:đen; chiều rộng:200px; chiều cao:100px; ) .btn-blue( @extend %btn; nền:blue; ) .btn-red( @extend %btn; nền:red; ) Sẽ biên dịch thành: .btn-blue( lề:10px; color:black; width:200px; Height:100px; nền:blue; ) .btn-red( lề:10px; color:black; width:200px; Height:100px ; nền:màu đỏ; )

Bản dịch của bài viết: Hướng dẫn tuyệt đối cho người mới bắt đầu về Sass.
Andrew Chalkley.

SASS là gì?

SASS là viết tắt của Bảng định kiểu tuyệt vời về mặt cú pháp là một ngôn ngữ kim loại dựa trên CSS có tên có thể được dịch là "CSS với cú pháp tuyệt vời", được thiết kế bởi Hampton Catlin.

Nó là một phương tiện để đơn giản hóa quá trình hình thành Kiểu CSS, giúp đơn giản hóa đáng kể nhiệm vụ phát triển và sau đó duy trì mã.

Ví dụ: bạn đã bao giờ phục vụ một khách hàng thiếu quyết đoán nào đó, phải xem qua toàn bộ nội dung của một tệp kiểu để tìm một giá trị màu HEX cụ thể nhằm thay thế nó bằng một giá trị màu khác chưa? Hoặc chuyển sang một ứng dụng máy tính không phải lúc nào cũng có sẵn để tính chiều rộng cột cho mẫu nhiều cột?

SASS có sẵn các công cụ để giúp bạn thoát khỏi thói quen này. Bao gồm các biến, cá mút đá, làm tổ Và kế thừa bộ chọn.

Về cơ bản, mã SASS tương tự như CSS, nhưng cơ bản tính năng đặc biệtĐiều đáng chú ý ngay lập tức là sự vắng mặt của dấu chấm phẩy sau mỗi cặp thuộc tính-giá trị và sự vắng mặt của dấu ngoặc nhọn.

Hãy lấy đoạn mã CSS sau đây làm ví dụ:

#tòa nhà chọc trời_ad
{
hiển thị: khối;
chiều rộng: 120px;
chiều cao: 600px;
}

#leaderboard_ad
{
hiển thị: khối;
chiều rộng: 728px;
chiều cao: 90px;
}

Tương đương với SASS này:

#tòa nhà chọc trời_ad
hiển thị: khối
chiều rộng: 120px
chiều cao: 600px

#leaderboard_ad
hiển thị: khối
chiều rộng: 728px
chiều cao: 90px

SASS sử dụng khoảng cách (thụt lề ở đầu dòng tiếp theo) của hai khoảng trắng để biểu thị việc lồng các đoạn mã. ( *Trong đoạn trích cuối cùng, để rõ ràng, tôi đã đánh dấu những khoảng trống này bằng nền đỏ.)

Bây giờ chúng ta đã có ý tưởng về cách tạo mã SASS, hãy xem xét các vấn đề khiến nó trở nên như vậy xuất sắc.

Biến.

Trong SASS, để khai báo một biến, bạn phải đặt trước tên của nó ký hiệu đô la $. Và nếu tên biến của bạn là red , thì sau dấu hai chấm, chúng ta có thể chỉ ra giá trị sau tương ứng với nó:

SASS có các hàm tích hợp sẵn như làm tối và làm sáng có thể được sử dụng để sửa đổi giá trị của các loại biến này.

Vì vậy, trong ví dụ sau, màu phông chữ trong đoạn văn cũng sẽ có màu đỏ, nhưng đậm hơn màu phông chữ được sử dụng trong tiêu đề h1:

$đỏ: #FF4848
$fontsize: 12px
h1
màu sắc: $đỏ

P
màu sắc: đậm($đỏ, 10%)

Bạn có thể thực hiện các phép tính số học với các biến, chẳng hạn như phép cộng và phép trừ, miễn là các giá trị được sử dụng có cùng kiểu dữ liệu. Ví dụ: nếu chúng ta muốn áp dụng tông màu tối hơn, thì tất cả những gì chúng ta cần làm là trừ giá trị màu đã được sử dụng trong mã, được lưu trữ trong một biến, một giá trị HEX thập lục phân nhỏ bằng #101 . Điều tương tự cũng áp dụng cho trường hợp cần thay đổi giá trị kích thước phông chữ, chẳng hạn như tăng nó lên 10 pixel; đối với điều này, chúng tôi chỉ cần thêm các pixel bị thiếu:

p.addition_and_subtraction
màu sắc: $đỏ - #101
cỡ chữ: $fontsize + 10px

Làm tổ.

Có hai kiểu lồng trong SASS.

Lồng các bộ chọn.

Đây là kiểu lồng đầu tiên, tương tự như kiểu lồng được sử dụng để cấu trúc mã HTML:

$fontsize: 12px

Loa
.tên
nét chữ:
trọng lượng: đậm
kích thước: $fontsize + 10px
.chức vụ
nét chữ:
kích thước: $fontsize

Nếu bạn nhìn vào mã CSS kết quả, mọi nhận xét sẽ không cần thiết. Bằng cách lồng lớp .name vào trong lớp .loa ( *theo cách tương tự - sử dụng hai dấu cách ở đầu dòng tiếp theo) bộ chọn CSS .loa.name được tạo. Điều tương tự cũng áp dụng cho tên lớp sau .position , nằm sau phần khai báo thuộc tính cho bộ chọn đầu tiên, dẫn đến việc lồng bộ chọn thứ hai .loa.position :

Loa.name(
độ dày phông chữ: đậm;
cỡ chữ: 22px; )
.loa.position (
cỡ chữ: 12px; )

Lồng ghép các thuộc tính.

Kiểu lồng thứ hai cho phép bạn cấu trúc các thuộc tính bằng một tiền tố (* font-family , font-size , font-weight hoặc border-style , border-color , border-radius v.v.):

$fontsize: 12px

Loa
.tên
nét chữ:
trọng lượng: đậm
kích thước: $fontsize + 10px
.chức vụ
nét chữ:
kích thước: $fontsize

Trong ví dụ trên, chúng tôi sử dụng khai báo phông chữ gốc, thuộc tính phổ quát: và sau đó trên một dòng mới sau dấu thụt hai dấu cách, chúng tôi chỉ ra phần thứ hai của thuộc tính, thường nằm sau dấu gạch nối.

Nghĩa là, nếu chúng ta chỉ định thuộc tính font: trên hàng tiếp theo sau hai dấu cách thuộc tính Weight: thì kết quả sẽ tương đương với thuộc tính font-weight quen thuộc.

Loa.name(
độ dày phông chữ: đậm;
cỡ chữ: 22px; )
.loa.position (
cỡ chữ: 12px; )

Mô-đun này cung cấp hỗ trợ cho tất cả các thuộc tính có chứa dấu gạch nối.

Kiểu lồng này là một cách tuyệt vời để tổ chức và cấu trúc mã CSS của bạn và tránh sự lặp lại không mong muốn. ( *KHÔ- “Đừng lặp lại chính mình” - “Đừng lặp lại chính mình.” Các tình huống khi CSS định dạng một số thành phần nhất định, kiểu của chúng được lặp lại và/hoặc bị ghi đè ở những nơi khác, điều này làm phức tạp khả năng đọc và bảo trì mã).

Cá mút đá.

Một tính năng tuyệt vời khác của SASS là cá mút đá.

Mixins cho phép bạn sử dụng lại toàn bộ đoạn mã SASS và thậm chí truyền đối số cho chúng nếu cần. Và quan trọng là bạn cũng có thể chỉ định giá trị ban đầu của chúng.

Để xác định một mixin, hãy sử dụng từ khóa SASS @mixin dành riêng đặc biệt theo sau là tên mixin mà bạn chọn. Nếu cần có lý lẽ thì hãy liệt kê chúng vào dấu ngoặc đơn. Các giá trị mặc định cho đối số được chỉ định khi xác định mixin, phân tách bằng dấu hai chấm. ( *Nói cách khác, mixin là các hàm CSS.)

Quy trình sử dụng mixins rất đơn giản - sau từ khóa@include chỉ định tên của mixin mong muốn và liệt kê các tham số bắt buộc, nếu có, trong ngoặc đơn.

Hãy xem ví dụ sau:

@mixin border-radius($amount: 5px) /* xác định mixin */
-moz-biên giới-bán kính: số tiền $
-webkit-biên giới-bán kính: số tiền $
bán kính đường viền: số tiền $

h1 /* sử dụng mixin */
@include bán kính đường viền (2px)

Loa
@include bán kính đường viền

SASS này sau khi biên dịch sẽ được chuyển đổi thành mã CSS bên dưới:

h1 (
-moz-biên giới-bán kính: 2px;
-webkit-biên giới-bán kính: 2px;
bán kính đường viền: 2x; )

Loa (
-moz-biên giới-bán kính: 5px;
-webkit-biên giới-bán kính: 5px;
bán kính đường viền: 5px; )

Đối với tiêu đề h1, chúng tôi đã chỉ định rõ ràng giá trị bán kính góc viền, nhưng đối với phần tử có tên lớp .loa, chúng tôi không làm điều này, vì vậy giá trị mặc định là 5px đã được lấy.

Kế thừa bộ chọn.

Khác xuất sắc Một tính năng của cú pháp SASS là khả năng của bộ chọn kế thừa tất cả các kiểu được xác định cho các bộ chọn khác. Để tận dụng tính năng này, bạn phải sử dụng từ khóa @extend, theo sau là bộ chọn có thuộc tính bạn muốn kế thừa:

h1
đường viền: 4px rắn #ff9aa9

Loa
@mở rộng h1
chiều rộng đường viền: 2px

Những gì sẽ được biên dịch thành:

h1,.loa (
đường viền: 4px liền khối #ff9aa9; )

Loa (
chiều rộng đường viền: 2px; )

(*Lưu ý khai báo đường viền: 4px Solid #ff9aa9; không được lặp lại trong quy tắc có bộ chọn .loa, mà thay vào đó, bộ chọn thứ hai được thêm vào quy tắc đầu tiên. Nói cách khác, không có sự trùng lặp mã.)

Hãy thử SASS hoạt động.

Trực tuyến.

Bạn có thể trải nghiệm SASS trực tuyến mà không cần cài đặt mô-đun trước trên máy tính cục bộ của mình.

Nhưng trước khi bạn bắt đầu thử nghiệm, ở cuối trang, hãy chọn tùy chọn "Cú pháp thụt lề".

Đã cài đặt trên PC.

Bản thân SASS là một ứng dụng (đá quý) của nền tảng Ruby. Do đó, để cài đặt nó mà không cần cài đặt trước nền tảng và trình quản lý gói của ngôn ngữ này Lập trình RubyĐá quý là không thể thiếu. Sau khi cài đặt thành công nền tảng và trình quản lý, hãy chạy lệnh sau trong bảng điều khiển:

sass cài đặt đá quý

Mô-đun SASS có thể được sử dụng làm công cụ để chuyển đổi tệp SASS của bạn thành tệp định dạng CSS ở chế độ dòng lệnh.

Điều này có thể được thực hiện, ví dụ, bằng cách nhập lệnh sau:

sass --watch sass_folder:stylesheets_folder

Trong đó sass_folder là đường dẫn đến thư mục chứa các tệp SASS (nghĩa là có phần mở rộng .sass) và stylesheets_folder là đường dẫn đến thư mục chứa các tệp CSS kết quả sẽ được lưu sau khi biên dịch. Lệnh --watch cho mô-đun biết rằng nó sẽ theo dõi mọi thay đổi trong thư mục đã chỉ định và, nếu có, sau khi lưu chúng, hãy chuyển đổi các tệp .sass gốc thành các tệp .css tương đương.

Chuyển đổi ngược CSS sang SASS.

Bạn có thể bắt đầu sử dụng SASS bằng cách chuyển đổi các kiểu được sử dụng trong các dự án hiện có của mình sang định dạng này bằng tiện ích "sass-convert".

Để thực hiện việc này, trong dòng lệnh, nhập đường dẫn đến thư mục có nội dung cần chuyển đổi ( *nghĩa là, chỉ cần đi tới thư mục mong muốn nơi chứa các tệp nguồn). Sau đó chạy tiện ích được đề cập ở trên và cung cấp cho nó các tham số sau:

sass-convert --từ css --sang sass –R.

Trong đó cờ -R chỉ định cách đệ quy để thực hiện thao tác. Và điểm tiếp theo sau nó. có nghĩa là các tệp .sass thu được sẽ được lưu trong thư mục hiện tại. ( *Nếu cần, thay vì dấu chấm, bạn có thể chỉ định đường dẫn đến thư mục mà bạn muốn lưu tệp kết quả.)

Trước khi có thể sử dụng Sass, bạn cần định cấu hình nó trong dự án của mình. Nếu bạn chỉ muốn đọc thì cứ thoải mái đọc, nhưng chúng tôi khuyên bạn nên cài đặt Sass trước. Cài đặt Sass để hiểu tất cả các tính năng của Sass.

  • Sơ chế

    Viết CSS bản thân nó đã thú vị, nhưng khi một bản định kiểu quá lớn, việc duy trì sẽ trở nên khó khăn. Và trong trường hợp này, bộ tiền xử lý sẽ giúp chúng ta. Sass cho phép bạn sử dụng các tính năng không có sẵn trong CSS, ví dụ: biến, lồng, mixin, kế thừa và những thứ hay ho khác mang lại sự tiện lợi khi viết CSS.

    Khi bạn bắt đầu sử dụng Sass, bộ tiền xử lý sẽ xử lý tệp Sass của bạn và lưu nó dưới dạng tệp CSS đơn giản mà bạn có thể sử dụng trên bất kỳ trang web nào.

    Cách dễ nhất để có được kết quả này là sử dụng thiết bị đầu cuối. Sau khi Sass được cài đặt, bạn có thể biên dịch Sass thành CSS bằng lệnh sass. Bạn chỉ cần cho Sass biết nơi lấy tệp Sass và tệp CSS nào để biên dịch nó thành. Ví dụ: bằng cách chạy lệnh sass input.scss out.css trong terminal, bạn đang yêu cầu Sass lấy một tệp Sass input.scss và biên dịch nó thành out.css .

  • Biến

    Hãy coi các biến như một cách để lưu trữ thông tin mà bạn muốn sử dụng trong suốt quá trình viết từng kiểu dự án. Bạn có thể lưu trữ màu sắc, ngăn xếp phông chữ hoặc bất kỳ giá trị CSS nào khác mà bạn muốn sử dụng trong các biến. Để tạo một biến trong Sass bạn cần sử dụng ký hiệu $. Hãy xem một ví dụ:

    Cú pháp SCSS

    $font-stack : Helvetica , sans-serif ; $màu chính : #333 ; nội dung ( phông chữ : 100% $font-stack ; màu : $ màu chính ; )

    Cú pháp Sass

    $font-stack : Helvetica , sans-serif $primary-color : #333 phông chữ nội dung : 100% $font-stack color : $primary-color

    Khi Sass được xử lý, nó lấy các giá trị chúng ta đặt trong $font-stack và $primary-color rồi chèn chúng vào tệp CSS thông thường ở những vị trí mà chúng ta đã chỉ định các biến làm giá trị. Điều này làm cho các biến trở thành một tính năng mạnh mẽ, ví dụ như khi làm việc với màu sắc thương hiệu được sử dụng trên toàn bộ trang web.

    nội dung (phông chữ: 100% Helvetica, sans-serif; màu: #333; )

  • làm tổ

    Khi viết HTML, bạn có thể nhận thấy rằng nó có hệ thống phân cấp trực quan và lồng nhau rõ ràng. Đây không phải là trường hợp với CSS.

    Sass sẽ cho phép bạn lồng các bộ chọn CSS theo cách tương tự như trong hệ thống phân cấp hình ảnh HTML. Nhưng hãy nhớ rằng việc lồng ghép quá nhiều sẽ làm cho tài liệu của bạn khó đọc và khó hiểu hơn, điều này được coi là hành vi không tốt.

    Để hiểu ý của chúng tôi, đây là ví dụ điển hình phong cách điều hướng trang web:

    Cú pháp SCSS

    điều hướng ( ul ( lề : 0 ; đệm : 0 ; kiểu danh sách : không có ; ) li ( hiển thị : khối nội tuyến ; ) a ( hiển thị : khối ; đệm : 6px 12px ; trang trí văn bản : không có ; ) )

    Cú pháp Sass

    nav ul lề : 0 đệm : 0 kiểu danh sách : không li hiển thị : khối nội tuyến a hiển thị : đệm khối : 6px 12px trang trí văn bản : không

    Bạn có để ý rằng các bộ chọn ul , li và a được lồng trong bộ chọn điều hướng không? Cái này cách tuyệt vời làm cho tệp CSS của bạn dễ đọc hơn. Khi bạn tạo tệp CSS, đầu ra sẽ giống như thế này:

    điều hướng ul ( lề : 0 ; phần đệm : 0 ; kiểu danh sách : không có ; ) điều hướng li ( hiển thị : khối nội tuyến ; ) điều hướng a ( hiển thị : khối ; phần đệm : 6px 12px ; trang trí văn bản : không có ; )

  • Sự phân mảnh

    Bạn có thể tạo các đoạn tệp Sass chứa các đoạn CSS nhỏ có thể được sử dụng trong các tệp Sass khác. Đây là một cách tuyệt vời để làm cho CSS của bạn trở nên mô-đun và cũng dễ bảo trì hơn. Một đoạn là một tệp Sass đơn giản có tên bắt đầu bằng dấu gạch dưới, ví dụ: _partial.scss. Dấu gạch dưới trong tên tệp Sass cho trình biên dịch biết rằng đó chỉ là một đoạn mã và không nên biên dịch thành CSS. Các đoạn Sass được đưa vào bằng lệnh @import.

  • Nhập khẩu

    CSS có tính năng nhập cho phép bạn chia tệp CSS của mình thành các tệp nhỏ hơn và giúp bảo trì chúng dễ dàng hơn. Nhưng phương pháp này có một nhược điểm đáng kể: mỗi khi bạn sử dụng @import trong CSS, một yêu cầu HTTP khác sẽ được tạo trong CSS. Sass có ý tưởng nhập tệp thông qua lệnh @import, nhưng thay vì tạo một yêu cầu HTTP riêng, Sass nhập tệp được chỉ định trong lệnh vào tệp được gọi, tức là. Đầu ra là một tệp CSS được biên dịch từ nhiều đoạn.

    Ví dụ: bạn có một số đoạn tệp Sass - _reset.scss và base.scss . Và chúng tôi muốn nhập _reset.scss vào base.scss .

    Cú pháp SCSS

    // _reset.scss html, body, ul, ol ( lề: 0; đệm: 0; ) // base.scss @import "reset" ; nội dung (phông chữ: 100% Helvetica, sans-serif; màu nền: #efefef;)

    Cú pháp Sass

    // _reset.sass html , body , ul , ol lề : 0 đệm : 0 // base.sass @import đặt lại phông chữ nội dung : 100% Helvetica , sans-serif nền-color : #efefef

    Lưu ý rằng chúng tôi đang sử dụng @import "reset"; trong tệp base.scss. Khi nhập tệp, bạn không cần chỉ định phần mở rộng .scss. Sass là một ngôn ngữ thông minh và nó sẽ tự tìm ra cách. Khi CSS được tạo, bạn sẽ nhận được:

    html , body , ul , ol ( lề : 0 ; phần đệm : 0 ; ) phần thân ( phông chữ : 100% Helvetica , sans-serif ; màu nền : #efefef ; )

  • Mixin (mixin)

    Một số thứ trong CSS khá tẻ nhạt khi viết, đặc biệt là trong CSS3, trong đó bạn thường cần sử dụng một số lượng lớn tiền tố của nhà cung cấp. Mixins cho phép bạn tạo các nhóm khai báo CSS mà bạn sẽ sử dụng nhiều lần trên toàn bộ trang web của mình. Thật tốt khi sử dụng mixin cho tiền tố của nhà cung cấp. Ví dụ về bán kính đường viền:

    Cú pháp SCSS

    @mixin bán kính đường viền ($radius) ( -webkit-border-radius : $radius ; -moz-border-radius : $radius ; -ms-border-radius : $radius ; bán kính đường viền : $radius ; ) .box ( @include bán kính đường viền (10px); )

    Cú pháp Sass

    =bán kính đường viền ($radius ) -webkit-border-radius : $radius -moz-border-radius : $radius -ms-border-radius : $radius border-radius : $radius .box +border-radius (10px )

    Để tạo một mixin, hãy sử dụng lệnh @mixin + tên của mixin. Chúng tôi đặt tên cho bán kính đường viền mixin của mình. Ngoài ra, trong mixin, chúng ta sử dụng biến $radius bên trong dấu ngoặc đơn, do đó cho phép chúng ta chuyển bất cứ thứ gì chúng ta muốn vào biến. Khi bạn đã tạo một mixin, bạn có thể sử dụng nó làm tham số CSS bằng cách bắt đầu lệnh gọi bằng @include và tên của mixin. Khi CSS của bạn biên dịch, bạn sẽ nhận được điều này:

    .box ( -webkit-border-radius : 10px ; -moz-border-radius : 10px ; -ms-border-radius : 10px ; bán kính đường viền : 10px ; )

  • Mở rộng/Kế thừa

    Đây là một trong những tính năng hữu ích nhất của Sass. Sử dụng lệnh @extend, bạn có thể kế thừa các bộ thuộc tính CSS từ bộ chọn này sang bộ chọn khác. Điều này cho phép bạn giữ cho tệp Sass của mình "sạch". Trong ví dụ của chúng tôi, chúng tôi sẽ chỉ cho bạn cách tạo kiểu thông báo lỗi, cảnh báo và thành công bằng cách sử dụng các tính năng Sass khác đi đôi với các lớp mẫu của tiện ích mở rộng.

    Lớp mẫu là một loại lớp đặc biệt chỉ xuất ra khi bạn sử dụng tiện ích mở rộng - điều này sẽ giữ cho CSS được biên dịch của bạn luôn gọn gàng và sạch sẽ.

    Cú pháp SCSS

    %equal-heights ( display : flex ; flex-wrap : Wrap ; ) %message-shared ( border : 1px Solid #ccc ; đệm : 10px ; color : #333 ; ) .message ( @extend %message-shared ; ) . thành công ( @extend %message-shared ; border-color : green ; ) .error ( @extend %message-shared ; border-color : red ; ) .warning ( @extend %message-shared ; border-color : yellow ; )

    Cú pháp Sass

    // Đoạn mã này sẽ không được đưa vào CSS vì %equal-heights chưa bao giờ được mở rộng. Hiển thị % chiều cao bằng nhau : flex flex-wrap : bọc // Đoạn mã này sẽ kết thúc bằng CSS vì %message-shared được mở rộng.%message-shared border : 1px Solid #ccc buffer : 10px color : #333 .message @extend %message-shared .success @extend %message-shared border-color : green .error @extend %message-shared border-color : màu đỏ .warning @extend %message-shared border-color : màu vàng

    Đoạn mã trên yêu cầu các lớp .message , .success , .error và .warning hoạt động giống như %message-shared . Điều này có nghĩa là bất cứ nơi nào %message-shared được gọi, .message , .success , .error và .warning cũng sẽ được gọi. Điều kỳ diệu xảy ra trong CSS được tạo, trong đó mỗi lớp này nhận được các thuộc tính CSS, giống như %message-shared. Điều này sẽ cho phép bạn tránh viết nhiều lớp trong các phần tử HTML.

    Bạn có thể mở rộng phần lớn CSS đơn giản Tuy nhiên, việc thêm bộ chọn vào các lớp mẫu trong Sass bằng cách sử dụng các mẫu - cách đơn giản nhất hãy đảm bảo rằng bạn không mở rộng lớp ở bất cứ nơi nào nó được sử dụng trong kiểu của bạn, điều này có thể dẫn đến các tập hợp kiểu ngoài ý muốn trong CSS của bạn.

    Khi bạn tạo CSS, nó sẽ trông giống như ví dụ bên dưới. Xin lưu ý rằng %equal-heights không được đưa vào CSS vì nó chưa bao giờ được sử dụng.

    .message, .success, .error, .warning (viền: 1px Solid #cccccc; phần đệm: 10px; màu: #333;).thành công (màu viền: xanh lá cây;).error (màu viền: đỏ;). cảnh báo ( màu viền : màu vàng ; )

  • Toán tử toán học

    Sử dụng toán học trong CSS rất hữu ích. Sass có một số toán tử tiêu chuẩn như + , - , * , / và % . Trong ví dụ của chúng tôi, chúng tôi đang thực hiện một số phép toán đơn giản để tính chiều rộng của side và Article .

    Cú pháp SCSS

    .container ( chiều rộng : 100% ; ) bài viết [ vai trò = "chính" ] ( float : trái ; chiều rộng : 600px / 960px * 100% ; ) sang một bên [ vai trò = "bổ sung" ] ( float : phải ; chiều rộng : 300px / 960px * 100%; )

    Cú pháp Sass

    .container chiều rộng: 100% bài viết [ vai trò = "chính"] float : chiều rộng bên trái : 600px / 960px * sang một bên 100% [ vai trò = "bổ sung"] float : chiều rộng bên phải : 300px / 960px * 100%

    Chúng tôi đã tạo một lưới mô-đun đáp ứng đơn giản với chiều rộng 960 pixel. Sử dụng các toán tử toán học, chúng tôi lấy dữ liệu thu được có giá trị pixel và chuyển đổi chúng thành tỷ lệ phần trăm mà không cần tốn nhiều công sức. CSS được biên dịch trông như thế này:

    .container ( chiều rộng : 100% ; ) bài viết [ vai trò = "chính" ] ( float : trái ; chiều rộng : 62,5% ; ) sang một bên [ vai trò = "bổ sung" ] ( float : phải ; chiều rộng : 31,25% ; )

Chào mọi người! Thời gian trôi nhanh làm sao. Tôi thậm chí còn không nhận thấy mình đã chuyển từ phong cách viết từ Css thông thường sang bộ tiền xử lý Sass như thế nào. Nhưng trước đây tôi không hiểu - Sass là loại gì, nó dùng để làm gì, có lẽ nó dành cho những chuyên gia siêu cao cấp về bố cục. Đúng, sử dụng bộ tiền xử lý là một bước tiến lên một tầm cao mới trong phát triển web, nhưng không có gì đáng sợ hay phức tạp ở đây và bạn sẽ tự mình thấy sau khi đọc xong bài viết nàyđể kết thúc.

Vì vậy, điều gì là tốt về bộ tiền xử lý và Sass cụ thể? Tôi sẽ nói ngay rằng có những cái khác, chẳng hạn như Less, Stylus, v.v. Chúng đều hoạt động theo cùng một nguyên tắc, nhưng mỗi cái đều có những đặc điểm riêng. Sass đã trở nên phổ biến rộng rãi trong giới chuyên môn, khiến việc học trở nên dễ dàng hơn nhiều. Chỉ là công nghệ càng phổ biến thì cộng đồng càng lớn và tài liệu càng phong phú.

Bộ tiền xử lý được thiết kế để giúp nhà phát triển giải quyết hầu hết công việc thường ngày khi viết code, từ đó tăng tốc độ và chất lượng công việc. Ngoài các bộ tiền xử lý CSS, còn có các bộ tiền xử lý HTML, ví dụ như Pug (Jade).

Cấu trúc bài viết

Tài liệu

Nhà phát triển Sass là người Pháp Hugo Giraudel, người đã sống ở Đức một thời gian. Đương nhiên tài liệu đã được bật tiếng anh, nhưng cá nhân tôi nắm khá tốt về nó (điều quan trọng là phải biết tiếng Anh kỹ thuật). Nhưng cũng có bản dịch sang tiếng Nga. Tôi vẫn muốn giới thiệu phiên bản tiếng Anh, điều này là để làm quen và học tiếng Anh ngày một sâu hơn. Nhưng người Nga cũng không tệ hơn.

  • Tài liệu tiếng Anh: http://www.sass-lang.com
  • Tài liệu tiếng Nga: https://sass-scss.ru

Biên dịch Sass thành Css

BẰNG phần mềmĐể biên dịch Sass thành Css, tôi sử dụng plugin trình quản lý tác vụ Sass. Nói chung Sass là một ứng dụng (Gem) Ngôn ngữ Ruby. Do đó, nếu bạn muốn làm mà không cần Gulp, thì để biên dịch sang Css, bạn sẽ cần cài đặt nền tảng ngôn ngữ lập trình Ruby. Bây giờ tôi sẽ không chỉ cho bạn cách thực hiện việc này, bạn có thể đọc về nó trên trang web chính thức.

Cú pháp - Sass, Scss

Hãy để tôi lưu ý ngay rằng có 2 cú pháp để viết mã: Sass và Scss.

Cú pháp của Sass hơi khác so với Scss. Scss trông giống mã Css thông thường hơn và Sass loại bỏ dấu ngoặc nhọn và dấu chấm phẩy giữa các quy tắc. Cũng có những khác biệt trong cách viết một số hàm và bạn phải cẩn thận về cú pháp mình chọn. Phần mở rộng tệp cho Sass - *.sass, và cho Scss - *.scss. Cú pháp Sass cũ hơn và Scss ra đời sau để giúp người mới bắt đầu học dễ dàng hơn. Bản thân tôi cũng bắt đầu nghiên cứu bộ tiền xử lý này trong Scss, như vậy sẽ dễ hiểu hơn. Bây giờ tôi đã chuyển sang Sass, nó thuận tiện hơn cho tôi.

Nếu chúng ta nói về Sass, thì cấu trúc mã của nó được xây dựng trên cơ sở các vết lõm (xét cho cùng, không có dấu ngoặc nhọn nào trong đó) và bạn nên cẩn thận ở đây, vì cả trình lập bảng (TAB - 4 dấu cách) và dấu cách thông thường ( thông thường đó là một khoảng trắng đôi). Tôi luôn sử dụng máy lập bảng.

Nhớ! Nếu bạn sử dụng tab làm thụt lề thì nên loại trừ khoảng trắng để mọi thứ đều giống nhau. Và ngược lại - nếu bạn sử dụng dấu cách thì sẽ loại trừ bộ lập bảng. Nếu không, trình biên dịch sẽ báo lỗi.

Sass

.maincontent .main-title cỡ chữ: 30px cỡ chữ: 700 lề: 0 0 30px .description lề-dưới: 30px p màu: #444444 cỡ chữ: 16px chiều cao dòng: 22px

Scss

.maincontent ( .main-title ( cỡ chữ: 30px; độ dày phông chữ: 700; lề: 0 0 30px; ) .description ( lề-dưới: 30px; p ( color: #444444; cỡ chữ: 16px; dòng -chiều cao: 22px; ) ) )

Trong hầu hết các trình soạn thảo mã (ví dụ: văn bản tuyệt vời) có dấu vết lõm ở dạng sọc, giúp chúng ta không bị nhầm lẫn. Trong các ví dụ dưới đây tôi sẽ sử dụng cú pháp Sass.

Đơn giản hóa cuộc sống của bạn với Sass

Lồng ghép các quy tắc

Đây là điều tôi thích ở Sass ngay từ đầu, nó chính xác là việc lồng các quy tắc CSS vào nhau. Điều này giúp tiết kiệm rất nhiều thời gian và mã có cấu trúc và dễ đọc. Ví dụ: nếu chúng ta muốn viết kiểu cho các thành phần của vùng chứa cha cụ thể, thì trong Css, chúng ta cần chỉ định từng lần lớp cha, ví dụ như thế này:

.title chính ( font-size: 30px; color: #444; ) .main .subtitle ( font-size: 20px; ) .main .description ( font-size: 14px; Margin-bottom: 30px; )

Nghĩa là, chúng ta chỉ định class cha.main ở mọi nơi, và điều này lại không hoàn toàn thuận tiện. Sử dụng Sass, bạn có thể viết nó như thế này:

Scss

.main ( .title ( font-size: 30px; color: #444; ) .subtitle ( font-size: 20px; ) .description ( font-size: 14px; Margin-bottom: 30px; ) )

Sass

.main .title cỡ chữ: 30px màu: #444 .subtitle cỡ chữ: 20px .description cỡ chữ: 14px lề dưới: 30px

Đồng ý, nó trông gọn gàng hơn nhiều và bạn có thể viết mã nhanh hơn vì chúng ta chỉ viết class.main cha một lần. Nếu bạn muốn làm theo tôi mà không cần cài đặt Ruby và bất kỳ phần mềm tương tự nào, bạn có thể sử dụng trình biên dịch trực tuyến để trình diễn.

Thuộc tính lồng nhau

Ngoài các quy tắc lồng nhau trong Sass, còn có khả năng lồng các thuộc tính. Ví dụ: đây là cách viết giá trị lề:

Sass

.main .title lề: trên: 10px phải: 15px dưới: 10px trái: 15px

Css

.main .title ( lề-top: 10px; lề-phải: 15px; lề-dưới: 10px; lề-trái: 15px; )

Liên kết hoặc ghép nối bộ chọn - & ký

Chúng ta có thể tăng tốc độ viết mã của mình và làm cho nó nhỏ gọn hơn nữa bằng cách sử dụng phép nối (kết nối) bằng ký hiệu - & . Làm thế nào nó hoạt động? Ví dụ: chúng ta có các lớp như: .main-title, .main-subtitle, .main-description. Trong Sass, các lớp này có thể được viết như sau:

Kích thước phông chữ &-tiêu đề chính: 30px màu: #444 &-phụ đề cỡ chữ: 20px &-kích thước phông chữ mô tả: 14px lề-dưới: 30px

Tiêu đề chính ( font-size: 30px; color: #444; ) .main-subtitle ( font-size: 20px; ) .main-description ( font-size: 14px; Margin-bottom: 30px; )

Sử dụng một biểu tượng & chúng tôi kết nối với lớp gốc, nghĩa là trong trường hợp này không cần phải lặp lại liên tục root.main . Đồng thời, hãy nhớ rằng chúng tôi chưa tạo bất kỳ phần tử con nào.

/* Liên kết */ a ( color: red; ) a:hover ( color: blue; ) /* Pseudo-elements */ .main::Before ( content: ""; display: block; font-size: 20px; ) .main ::after ( nội dung: ""; hiển thị: khối; cỡ chữ: 30px; )

Đôi khi bạn cần chỉ định một chuỗi bộ chọn cho đến phần tử hiện tại. Tất nhiên, bạn có thể di chuyển nó đến thư mục gốc, nhưng để không phá vỡ phần lồng nhau, bạn có thể viết nó như sau:

.container chính và chiều rộng: 700px

Container.main (chiều rộng: 700px)

Bằng cách di chuyển & sau bộ chọn, chúng tôi đã thay đổi thứ tự lắp ghép, tức là class.container trong trường hợp này là cha mẹ.

Liên kết với bộ chọn cha, nhưng cao hơn một cấp

Ở trên, làm ví dụ, tôi đã trình diễn mã Sass:

Kích thước phông chữ &-tiêu đề chính: 30px màu: #444 &-phụ đề cỡ chữ: 20px &-kích thước phông chữ mô tả: 14px lề-dưới: 30px

Bây giờ hãy tưởng tượng rằng trong khối .main-title có một phần tử khác cần được tạo kiểu rõ ràng bằng cách sử dụng toàn bộ chuỗi cha mẹ. Trong một thời gian dài, tôi chỉ chỉ định tên gốc (trong trường hợp này là - .main), nhưng điều này không thuận tiện cho lắm. Tôi bắt đầu tìm hiểu tài liệu của Sass và tìm ra giải pháp. Trên thực tế, mọi thứ đều đơn giản - chúng ta cần khai báo một liên kết tới cấp độ gốc và sử dụng nó khi cần thiết.

Đây là cách tôi đã làm trước đây:

Kích thước phông chữ &-title chính: 30px color: #444 .main__icon // chỉ định root.main, nếu không, nếu bạn sử dụng & nó sẽ liên kết đến .main-title color: #444 width: 20px &-subtitle font-size : 20px & -description cỡ chữ: 14px lề dưới: 30px

Và bây giờ bạn có thể làm điều này:

$self: & // liên kết tới màu gốc &-title font-size: 30px color: #444 #($self)__icon // thay vì & sử dụng liên kết đến màu gốc: #444 width: 20px &-subtitle cỡ chữ: 20px &-mô tả cỡ chữ: 14px lề dưới: 30px

Nếu bạn để ý, chúng tôi đã khai báo một tham chiếu đến cấp độ gốc - $self: & . Điều này làm tôi liên tưởng đến đối tượng (this) đã kích hoạt sự kiện trong JavaScript. Bây giờ, ở đúng nơi, chúng ta có thể gọi nó một cách đơn giản là #($self) . Hóa ra mọi chuyện thật đơn giản nhưng tôi gãi đầu nghĩ rằng không có giải pháp nào cho vấn đề này ở Sass.

Tiêu đề chính ( font-size: 30px; color: #444; ) .main-title .main__icon ( color: #444; width: 20px; ) .main-subtitle ( font-size: 20px; ) .main-description ( cỡ chữ: 14px; lề dưới: 30px; )

Mẫu

Điều thường xảy ra là một số phần tử có cùng kiểu cơ sở nhưng chỉ khác nhau ở một số quy tắc. Hãy lấy các nút làm ví dụ. Nếu chúng ta lấy các nút có cùng kích thước thì chúng chỉ có thể khác nhau về màu sắc: đỏ, xanh lá cây, xám, v.v. Nếu bạn dùng css thuần túy, thì bạn sẽ phải chỉ định tất cả màu sắc của các nút theo kiểu cơ sở, được phân tách bằng dấu phẩy hoặc tạo một lớp cơ sở. Nhưng ở Sass thì dễ dàng hơn nhiều:

%button Background-color: #666 border: 1px Solid #666 buffer: 0 20px font-size: 15px line-height: 40px Height: 40px .button-green @extend %button Background-color: green border-color: green . nút-đỏ @extend %button màu nền: màu đỏ viền: đỏ

Button-green, .button-red ( nền-color: #666; border: 1px Solid #666; đệm: 0 20px; font-size: 15px; line-height: 40px; Height: 40px; ) .button-green ( màu nền: xanh lá cây; màu viền: xanh lá cây; ) .button-red ( màu nền: đỏ; màu viền: đỏ; )

Mẫu trong trường hợp này là bộ chọn nút % (điều này được biểu thị bằng dấu - %). Điều này thuận tiện vì bản thân bộ chọn mẫu không liên quan đến bất kỳ đâu và các kiểu của nó được các bộ chọn khác kế thừa thông qua lệnh - @mở rộng. Mẫu này có thể được sử dụng nhiều lần như mong muốn, do đó làm giảm số lượng mã.

SassScript

Trong Sass, cũng như trong các ngôn ngữ lập trình, có các tính năng như: tạo biến, phép toán số học (cộng, trừ, chia, nhân, v.v.), lặp (vòng lặp), hàm (mixins) và nhiều tính năng khác. Nghĩa là, Sass là một loại ngôn ngữ lập trình, một lần nữa được thiết kế để đơn giản hóa việc viết mã và tăng tốc công việc một cách đáng kể.

Biến

Một biến trong Sass bắt đầu bằng một dấu hiệu $ , và tên được viết bằng tiếng Latin, ví dụ: $color . Cần lưu ý rằng các dấu hiệu: “ — " Và " _ » có thể hoán đổi cho nhau. Ví dụ: nếu bạn đã gọi $color-red , thì bạn có thể gọi $color_red . Biến được định nghĩa như sau: $name: giá trị, ví dụ: $color: #f6f6f6 .

Một biến được khai báo bên ngoài bất kỳ cấp độ lồng nhau nào đều có sẵn trên toàn cầu, tức là. có thể được sử dụng ở mọi nơi. Nếu bạn xác định một biến ở bất kỳ cấp độ lồng nhau nào của bộ chọn thì biến đó sẽ chỉ khả dụng ở cấp độ này. Để nó hoạt động toàn cầu trong toàn bộ tài liệu, bạn phải chỉ định một từ khóa !toàn cầu.

Tiêu đề $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size

Nói chung, biến là một điều tuyệt vời; bạn chỉ cần khai báo chúng và nhập một giá trị, sau đó bạn có thể sử dụng chúng bao nhiêu tùy thích, ở bất cứ đâu. Ví dụ: chúng ta có thể xác định màu sắc bằng cách đặt cho chúng tên cụ thể, cỡ chữ, họ phông chữ, v.v. và bất kỳ ý nghĩa nào nói chung.

Chỉ thị

@mở rộng

Chúng tôi đã đề cập đến chỉ thị này ở trên khi nghiên cứu mẫu trống. Hãy củng cố lại kiến ​​thức của chúng ta một lần nữa. Bằng cách sử dụng @mở rộng chúng ta có thể sao chép các quy tắc của bất kỳ bộ chọn nào. Ví dụ: trong quá trình bố trí, có thể phần tử “ MỘT" và phần tử " B» có thể giống nhau ở vẻ bề ngoài. Trong trường hợp này, bạn có thể viết quy tắc cho phần tử “A” và đối với “B”, bạn chỉ cần sao chép kiểu của phần tử “A”, xác định lại một chút các thuộc tính cần thiết.

Block_a màu nền: #cccccc viền: 5px Solid #999999 đệm: 20px cỡ chữ: 30px chiều cao: 150px chiều rộng: 150px .block_b @extend .block_a đệm: 15px

Block_a, .block_b ( màu nền: #cccccc; đường viền: 5px Solid #999999; phần đệm: 20px; cỡ chữ: 30px; chiều cao: 150px; chiều rộng: 150px; ) .block_b ( phần đệm: 15px; )

Trong ví dụ này, chúng tôi tạo ra 2 hình vuông giống hệt nhau. Đối với hình vuông “B”, chúng tôi chỉ xác định lại phần đệm: 15px. Đây là cách @extend hoạt động. Tôi sử dụng chỉ thị này khá thường xuyên.

@nhập khẩu

Lệnh này cho phép bạn kết hợp nhiều tệp kiểu thành một. Điều này rất thuận tiện, đặc biệt nếu dự án lớn. Đừng nhầm lẫn với lệnh tồn tại trong Css - @nhập khẩu. Trong Css, thuộc tính bắt buộc là - url().

Trên thực tế, sẽ thuận tiện hơn khi viết kiểu trong các tệp khác nhau và mỗi tệp đều có mục đích riêng. Ví dụ: toàn bộ khung trang có thể được chia thành các vùng: header.sass, sidebar.sass, footer.sass. Bạn có thể thu thập mọi thứ trong tệp chính main.sass bằng cách sử dụng @import. Các tệp vùng cũng có thể được chỉ định bằng cách sử dụng dấu gạch dưới ở đầu tên tệp, ví dụ: _header.sass, _sidebar.sass, _footer.sass. Những tập tin như vậy được gọi là các đoạn. Khi nhập các đoạn, không cần thiết phải chỉ định phần mở rộng của tệp.

Nhập khẩu đơn giản

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

Nhập mảnh

@import "tiêu đề" @import "thanh bên" @import "chân trang"

Các tệp phân đoạn có thể có các phần mở rộng sau: *.sass, *.scss hoặc *.css. Ví dụ, tập tin chính có thể với phần mở rộng *.sass và tiêu đề trang web, ví dụ: với phần mở rộng *.scss. Nghĩa là, tệp chính của bạn có phần mở rộng nào không quan trọng. Cần lưu ý rằng khi nhập, tất cả các biến và mixin (chúng ta sẽ nói về chúng bên dưới) sẽ được chuyển vào tệp chính nơi quá trình nhập diễn ra.

Bạn cũng có thể chỉ định việc nhập một số tệp được phân tách bằng dấu phẩy: @import “header”, “sidebar”, “footer”.

Hãy nhớ rằng quá trình nhập diễn ra ở nơi bạn đã chỉ định lệnh @nhập khẩu. Điều này thường được thực hiện ở phần đầu của tài liệu.

@at-root

chỉ thị @at-root tự nó nói lên và nếu được dịch sang tiếng Nga, nó sẽ nghe như thế này - "từ gốc". Nói cách khác, chúng ta di chuyển bộ chọn về gốc, hoàn tác chuỗi bộ chọn gốc. Tất nhiên, ở đây bạn có thể đặt câu hỏi: "Tại sao lại cần lệnh này nếu bạn có thể di chuyển bộ chọn về thư mục gốc theo cách thủ công?" Câu trả lời rất đơn giản - sự tiện lợi của việc viết mã mà không phá vỡ cấu trúc. Khi bạn học cách làm việc với Sass ở mức tối đa, bạn sẽ hiểu điều này.

Kích thước phông chữ & tiêu đề chính: 30px màu: #444 @at-root .main__icon màu: #444 chiều rộng: 20px

Tiêu đề chính ( font-size: 30px; color: #444; ) .main__icon ( color: #444; width: 20px; )

Chỉ thị và biểu thức kiểm soát

chỉ thị @if

Lệnh này thực thi các kiểu nếu biểu thức kèm theo nó trả về bất kỳ giá trị nào ngoại trừ SAI Và vô giá trị.

$color: xanh .header @if $color == màu nền xanh: xanh @else if $color == màu nền xanh: xanh @else màu nền: #f6f6f6

Tiêu đề ( màu nền: xanh; )

Những người đã quen thuộc với ít nhất những điều cơ bản về ngôn ngữ lập trình (ví dụ: javaScript hoặc Php) sẽ không cảm thấy khó hiểu. Bản chất ở đây là như nhau, cái chính là phải biết cú pháp viết code.

@for chỉ thị

Trong ngôn ngữ lập trình (lại bằng Javascript hoặc Php) bằng cách sử dụng Vì bạn có thể thiết lập một chu kỳ. Trong Sass, lệnh này thực hiện điều tương tự - nó tạo ra một vòng lặp. Đối với mỗi lần lặp lại, một biến đếm được sử dụng để thay đổi dữ liệu đầu ra.

Lệnh này có 2 dạng viết: 1. @for $var from<начало>bởi vì<конец>và 2. @for $var từ<начало>ĐẾN<конец>. Nếu bạn muốn đưa chữ số cuối cùng vào vòng lặp, hãy sử dụng " bởi vì". Hãy xem một ví dụ:

@for $i từ 1 đến 6 .elem-item-#($i) hình nền: url("images/image-#($i).jpg")

Elem-item-1 ( hình nền: url("images/image-1.jpg"); ) .elem-item-2 ( hình nền: url("hình ảnh/hình ảnh-2.jpg"); ) . elem-item-3 ( hình nền: url("images/image-3.jpg"); ) .elem-item-4 ( hình nền: url("hình ảnh/hình ảnh-4.jpg"); ) . elem-item-5 ( hình nền: url("images/image-5.jpg"); )

Để chỉ ra giá trị cuối cùng Tôi đã sử dụng từ khóa " ĐẾN". Trong trường hợp này, chu kỳ kết thúc ở số - 5 . Lưu ý mã Sass trông nhỏ gọn như thế nào.

@each chỉ thị

chỉ thị @mỗi giống như @for, nó hiển thị các giá trị trong một vòng lặp và rất thuận tiện vì ngoài các số, bạn có thể lặp lại các giá trị cụ thể. Hãy lấy vòng lặp trên và thay đổi nó thành một số giá trị.

@each $bgItem trong động vật, hồ nước, biển, phong cảnh, thiên nhiên .elem-item-#($bgItem) hình nền: url("images/image-#($bgItem).jpg")

Elem-item-animal ( hình nền: url("images/image-animal.jpg"); ) .elem-item-lake ( hình nền: url("images/image-lake.jpg"); ) . elem-item-sea ( hình nền: url("images/image-sea.jpg"); ) .elem-item-landscape ( hình nền: url("images/image-landscape.jpg"); ) . elem-item-nature ( hình nền: url("images/image-nature.jpg"); )

Trong trường hợp này, biến đếm không được tạo và số lần lặp phụ thuộc vào số giá trị được tạo sau từ khóa " TRONG". Các giá trị được xuất ra thông qua một biến (trong ví dụ này - $bgItem), tên của biến này có thể tùy ý.

Mixin (chức năng)

Mixins (mixins) là một loại hàm, giống như trong ngôn ngữ lập trình, được thiết kế để loại bỏ mã lặp đi lặp lại. Mixins có thể chứa toàn bộ đoạn mã định kiểu được phép trong Sass. Chúng ta hãy xem một ví dụ để hiểu rõ hơn.

@mixin vị trí căn giữa: trên cùng tuyệt đối: 50% còn lại: biến đổi 50%: dịch(-50%, -50%) .container @include căn giữa

Một mixin được tạo bằng lệnh @mixin, theo sau là khoảng trắng được phân tách bằng tên của mixin, cũng như các tham số được truyền tùy chọn. Hãy để tôi lưu ý ngay rằng dấu gạch ngang (-) và dấu gạch dưới (_) trong tên mixin có thể hoán đổi cho nhau. Một mixin không chỉ có thể chứa các quy tắc mà còn có thể chứa các bộ chọn. Ở trên tôi đã đưa ra một ví dụ về mixin cơ bản không có tham số.

Mixin được gọi bằng lệnh @include và sau đó, cách nhau bằng dấu cách, chúng tôi cho biết tên của mixin đã tạo. Trong ví dụ trên, đây là việc căn giữa khối dọc theo trục X và trục Y bằng cách sử dụng định vị tuyệt đối. Nếu bạn phải sử dụng điều này thường xuyên thì bạn sẽ đồng ý rằng việc gọi một mixin sẽ dễ dàng hơn là viết đi viết lại các kiểu căn giữa.

Bây giờ chúng ta hãy xem một mixin có các tham số (đối số).

@mixin border($width, $color) border: width: $width style: Solid color: $color .square @include border(2px, #ccc)

Hình vuông ( chiều rộng đường viền: 2px; kiểu đường viền: rắn; màu đường viền: #ccc; )

Như bạn có thể thấy, sau tên của mixin trong ngoặc đơn, chúng ta chỉ định các đối số, trong trường hợp này là chiều rộng và màu sắc của đường viền. Đây là mixin đơn giản nhất mà tôi đã cung cấp cho rõ ràng. Trong thực tế, bạn có thể tìm thấy các mixin phức tạp hơn bằng cách sử dụng điều kiện khác nhau và các biến. Nhưng bây giờ chúng ta đừng phức tạp hóa mọi thứ; chúng ta nên luôn bắt đầu từ những điều nhỏ nhặt và đơn giản, sau đó tiến dần lên khi chúng ta tiến lên.

Với điều này tôi muốn kết thúc đánh giá ngắn của tôi. Bộ tiền xử lý Sass. Tại sao lại nhỏ? Vâng, bởi vì đây không phải là tất cả những gì tôi đã nói với bạn. Nói chung, bằng cách sử dụng cách trên, bạn có thể bắt đầu sử dụng Sass thay vì Css một cách an toàn ngay bây giờ. Bạn có thể tìm hiểu thêm về Sass bằng cách tham khảo tài liệu tôi cung cấp ở trên.

Vâng, cảm ơn tất cả các bạn đã quan tâm! Như mọi khi, hãy đặt câu hỏi trong phần bình luận và đăng ký kênh telegram hoặc bản tin email (biểu mẫu ở thanh bên bên phải) để không bỏ lỡ bất kỳ điều gì thú vị.

Hẹn gặp lại các bạn ở những bài viết khác của tôi...