Bộ tiền xử lý Sass. Hướng dẫn đầy đủ và lý do bạn cần nó. Khái niệm cơ bản về Sass
Cần thiết để biên dịch mã trên bộ tiền xử lý SASS và LESS. Hãy xem cách làm việc với bộ tiền xử lý 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.
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ỳ thứ gì khác trong các biến Giá trị CSS mà bạn muốn sử dụng. Để 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ụ:
$font-stack: Helvetica, sans-serif; $màu chính: #333; nội dung ( phông chữ: 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á mức 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:
Đ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ó; ) )
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? Đây là một 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; đệ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; đệm: 6px 12px; trang trí văn bản: không; )
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.
// _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; )
Lưu ý rằng chúng tôi 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, nội dung, ul, ol ( lề: 0; phần đệm: 0; ) nội dung ( 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:
@mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; ) .box ( @include bán kính đường viền(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:
Hộp ( -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; bán kính đường viền: 10px; )
Di sản
Đâ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.
Tin nhắn ( border: 1px Solid #ccc; đệm: 10px; color: #333; ) .success ( @extend .message; border-color: green; ) .error ( @extend .message; border-color: red; ) . cảnh báo ( @extend .message; border-color: yellow; )
Đoạn mã trên cho phép bạn lấy các thuộc tính CSS từ .message và áp dụng chúng cho .success, .error và .warning. Có một phép thuật hoạt động trong quá trình biên dịch tệp CSS sẽ giúp bạn tránh viết các lớp không cần thiết trong phần tử HTML. Kết quả trông như thế này:
Tin nhắn, .success, .error, .warning ( border: 1px Solid #cccccc; đệm: 10px; color: #333; ) .success ( border-color: green; ) .error ( border-color: red; ) .warning ( màu viền: 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 thực hiện đơn giản Tính toán toán họcđể tính chiều rộng của một bên và bài viết.
Vùng chứa ( width: 100%; ) bài viết ( float: left; width: 600px / 960px * 100%; ) sang một bên ( float: right; width: 300px / 960px * 100%; )
Chúng tôi đã tạo ra một ứng dụng thích ứng đơn giản lưới mô-đun, 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:
Vùng chứa ( width: 100%; ) bài viết ( float: left; width: 62,5%; ) sang một bên ( float: right; width: 31,25%; )
Ví dụ thực tế:
Trong tệp HTML của chúng tôi, chúng tôi chỉ cần mã rất đơn giản và một liên kết đến tệp CSS trong thư mục CSS của dự án.
Đó là tất cả HTML chúng ta cần! Bây giờ hãy chuyển sang Sass. Đăng nhập vào mục yêu thích soạn thảo văn bản và tạo một tệp mới, lưu nó vào thư mục sass và gọi nó là style.scss. Để dễ dàng hơn, chúng tôi sẽ viết mọi thứ bằng SCSS, Sass cũng có thể xử lý được và SCSS không quá khắt khe với người mới bắt đầu. Ở phần đầu của tệp, chúng tôi sẽ viết cài đặt lại cơ bản cho HTML, nhập cho La bàn và viết các biến màu cho nút.
@import "la bàn"; // Đặt lại đơn giản nội dung, div, a ( lề: 0; đệm: 0; viền: 0; ) a (text-trang trí: none;) a:focus (outline: 0;) // Biến màu $button-color: #2e6bc6; $bắt đầu bằng nút: #37a0dc; $button-stop: #2068a6; $biên giới: #163861; $text-shadow: #06304b; // Màu di chuột $button-hover-color: #2e7dc6; $button-hover-start: #3f9ff0; $button-hover-stop: #2874a9; $focus-shadow: #0b3c5f; // Các kiểu nội dung cơ bản ( họ phông chữ: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; )
Ở đầu tệp, chúng tôi gọi La bàn để đưa nó vào tệp và sử dụng các lớp trừu tượng sau này. Ngoài ra, chúng tôi đã viết một lệnh thiết lập lại đơn giản và đã sử dụng một thuộc tính: biến. Điều này mang lại cho chúng tôi khả năng lưu trữ các giá trị mà chúng tôi sẽ sử dụng trong toàn bộ CSS của mình, bao gồm màu sắc, giá trị phông chữ và nhiều giá trị khác! Ở đây tôi sử dụng chúng để lưu trữ các màu được sử dụng trong nút và để đơn giản hóa mục nhập cũng như sử dụng lại nó trong biểu định kiểu.
Gán kiểu cho một nút
.button ( chiều rộng: 158px; chiều cao: 30px; lề: tự động 120px; cỡ chữ: 16px; độ dày phông chữ: in đậm; căn chỉnh văn bản: giữa; hiển thị: khối; màu: #fff; phần đệm: 7px 0 0; đường viền : 1px đường viền đặc $; bóng văn bản: 0 -1px 0 vị trí bóng văn bản $: tương đối)Hãy tạo kiểu cho nút này! Chúng ta sẽ bắt đầu bằng cách áp dụng các kiểu cơ bản cho thẻ lớp nút. Tôi đã đặt một số kiểu nút cơ bản ở đây và lưu ý cách tôi sử dụng các biến.
Bây giờ chúng ta hãy đến phần thú vị! Bạn có nhớ phần nhập La bàn được đặt ở đầu biểu định kiểu không? Chúng ta sẽ sử dụng nó ở đây vì Compass có một thư viện lớn gồm các lớp dựng sẵn bao gồm tiền tố CSS3 cho những trình duyệt vẫn cần hỗ trợ tiền tố.
Nút ( chiều rộng: 158px; chiều cao: 30px; lề: tự động 120px; cỡ chữ: 16px; trọng lượng phông chữ: in đậm; căn chỉnh văn bản: giữa; hiển thị: khối; màu: #fff; phần đệm: 7px 0 0; đường viền: 1px đường viền đặc $; bóng văn bản: 0 -1px 0 vị trí bóng văn bản: tương đối; // Các lớp la bàn @include nền($button-color tuyến tính-gradient(top, $button-start 20%, $button- stop)); @include border-radius(3px); @include box-shadow(inet 0 1px 0 rgba(#fff, 0.8));
Sau khi xác định các kiểu ban đầu, chúng ta có thể bao gồm một số lớp trừu tượng cho màu nền, độ dốc tuyến tính, bán kính đường viền và chuyển tiếp. Điều tốt nhất là mọi thứ sẽ được biên dịch chỉ với các tiền tố cần thiết và sẽ giúp chúng ta tiết kiệm thời gian viết chúng! Lớp hiện sẽ biên dịch trong tệp style.css thành như sau:
Nút ( chiều rộng: 158px; chiều cao: 30px; lề: tự động 120px; cỡ chữ: 16px; trọng lượng phông chữ: in đậm; căn chỉnh văn bản: giữa; hiển thị: khối; màu: #fff; phần đệm: 7px 0 0; đường viền: 1px rắn #163861; bóng văn bản: 0 -1px 0 #06304b; vị trí: tương đối; nền: #2e6bc6 -webkit-gradient(tuyến tính, 50% 0%, 50% 100%, dừng màu (20%, #37a0dc ... 37a0dc 20%, #2068a6); nền: #2e6bc6 -o-ographic-gradient(top, #37a0dc 20%, #2068a6); nền: #2e6bc6 tuyến tính-gradient(top, #37a0dc 20%, #2068a6); -bán kính đường viền: 3px; -moz-bán kính đường viền: 3px; -o-bán kính đường viền: 3px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, -moz-box); -shadow: inet 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: inet 0 1px 0 rgba(255, 255, 255) , 0.8); -chuyển tiếp: tất cả đều dễ dàng 0,3 giây; chuyển tiếp: tất cả đều dễ dàng 0,3 giây; )
Kiểu viết với các phần tử lồng nhau
Một tính năng tuyệt vời khác của bộ tiền xử lý như Sass là khả năng lồng các phần tử và đính kèm các lớp với phần tử cha mà bạn gán kiểu. Điều này sau đó được biên dịch thành CSS cần thiết để hoạt động.
Nút ( &:hover ( @include nền($button-hover-color tuyến tính-gradient(top, $button-hover-start 20%, $button-hover-stop)); @include box-shadow(inset 0 1px 1px rgba(#fff, 0.95)); &:active ( @include nền(tuyến tính-gradient(bottom, $button-start 20%, $button-stop)); bóng văn bản: 0 1px 0px $text-shadow; @ bao gồm box-shadow(inet 0 2px 8px $focus-shadow) )
Sau các kiểu nút chính, bạn có thể lồng các bộ chọn lớp giả cho các trạng thái :hover và :active của phần tử, sử dụng ký hiệu và cho Sass biết rằng đây là một lớp lồng nhau được gắn vào phần tử cha. Trạng thái di chuột có thể thêm phần kịch tính vào độ dốc và bóng bên trong bằng cách sử dụng các lớp La bàn trừu tượng, trong khi trạng thái hoạt động đảo ngược độ dốc và thay đổi bóng hộp để làm cho nó trông giống như một nút đã được nhấn.
Nút: di chuột ( nền: #2e7dc6 -webkit-gradient(tuyến tính, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9)); nền: #2e7dc6 -webkit-Linear-gradient(top, #3f9ff0 20%, #2874a9); nền: #2e7dc6 -moz-Linear-gradient(top, #3f9ff0 20%, #2874a9); -gradient(top, #3f9ff0 20); %, #2874a9); nền: #2e7dc6 độ dốc tuyến tính (trên cùng, #3f9ff0 20%, #2874a9); -webkit-box-shadow: chèn 0 1px 1px rgba(255, 255, 255, -moz- box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); hoạt động ( nền: -webkit-gradient(tuyến tính, 50% 100%, 50% 0%, color-stop(20%, #37a0dc) , color-stop(100%, #2068a6)); nền: -webkit-Linear -gradient(bottom, #37a0dc 20%, #2068a6); nền: -moz-Linear-gradient(bottom, #37a0dc 20%, # 2068a6); nền: -o-Linear-gradient(bottom, #37a0dc 20%, #2068a6); nền: Linear-gradient(bottom, #37a0dc 20%, #2068a6); -webkit-box-shadow: chèn 0 2px 8px #0b3c5f; -moz-box-shadow: chèn 0 2px 8px #0b3c5f; box-shadow: inset 0 2px 8px #0b3c5f; )
Phần trên cho thấy điều gì xảy ra sau khi trạng thái :active và :hover được biên dịch trong Sass; chúng được viết dưới dạng bộ chọn lớp giả cho phần tử gốc trong CSS có thể thực hiện được, cũng như CSS mà chúng ta cần, cùng với các lựa chọn thay thế, để hoàn thành nút ba trạng thái của chúng ta.
tệp style.scss và biểu định kiểu đã biên dịch
Đó là tất cả những gì có trong toàn bộ tệp style.scss của chúng ta, vì nó được tổ chức, viết đơn giản và chứa các lớp và biến trừu tượng thực hiện một số công việc cho chúng ta và sau đó được biên dịch thành tệp biểu định kiểu cuối cùng, style.css.
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- ngôn ngữ kim loại trong Dựa trên CSS, tên của họ 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 tạo kiểu CSS, giúp việc phát triển và duy trì mã sau đó dễ dàng hơn nhiều.
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ề nguyên tắc, mã SASS tương tự như CSS, nhưng đặc điểm phân biệt chính khiến bạn chú ý ngay lập tức là không có dấu chấm phẩy sau mỗi cặp thuộc tính-giá trị và không có dấu ngoặc nhọn.
Hãy lấy đoạn mã CSS sau 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;
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 ta sử dụng khai báo thuộc tính cha, phông chữ thuộc tính chung: và hơn thế nữa trên 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 cần thiết. ( *KHÔ- “Đừng lặp lại chính mình” - “Đừng lặp lại chính mình.” Những tình huống khi định dạng CSS một số yếu tố nhất định kiểu của chúng được lặp lại và/hoặc được xác định lại ở nơi khác, khiến mã khó đọc và duy trì).
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, 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 thứ gì đó dành riêng trong SASS từ khóa@mixin , theo sau là tên mixin bạn đã chọn. Nếu cần có đối số thì hãy liệt kê chúng trong 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 mixin rất đơn giản - sau từ khóa @include, hãy chỉ định tên của mixin mong muốn và liệt kê các tham số cần thiết, 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 liền khối #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 đó, thêm bộ chọn thứ hai 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ó, bạn không thể làm gì nếu không cài đặt trước nền tảng và trình quản lý gói của ngôn ngữ lập trình RubyGems này. 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ả.)
Ngày nay, các nhà phát triển có một danh sách khổng lồ các công cụ trợ lý. Một trong số đó là Sass. Trong bài đăng này, tôi sẽ mô tả chi tiết nó là gì, nó được sử dụng để làm gì và cá nhân bạn có thể bắt đầu sử dụng nó như thế nào.
Nếu bạn đã quen thuộc với Sass/Scss, đã cài đặt nó và sẵn sàng bắt đầu sử dụng nó, thì bạn có thể đọc mục này - “”. Trong đó tôi mô tả tất cả những điều phức tạp của bộ tiền xử lý, cũng như cách sử dụng nó một cách chính xác.
Sass là gì?
Sass là một loại bộ tiền xử lý sẽ giúp bạn trong quá trình phát triển front-end. Thực tế là các tệp CSS ngày càng lớn hơn và sau một thời gian, chúng trở nên khó làm việc hơn.
Sass được tạo ra để giải quyết vấn đề này. Nó sử dụng cú pháp đơn giản (gần như giống hệt CSS thông thường), nhưng vẫn bổ sung nhiều tính năng khác nhau.
Ví dụ: để không chỉ định cùng một thuộc tính nhiều lần, bạn có thể tạo một phần tử và sau đó kết nối phần tử này với các lớp khác, cũng như nhiều phần tử khác. Đây chỉ là một phần nhỏ của những gì có thể làm được.
Làm cách nào để cài đặt Sass?
Để bắt đầu sử dụng Sass, bạn cần tải xuống và cài đặt Ruby từ trang web chính thức, nhập một lệnh vào bảng điều khiển (để cài đặt Sass) và thế là xong. Dưới đây toàn bộ quá trình được mô tả từng bước.
- Cài đặt Ruby. Truy cập trang web chính thức trong phần tải xuống, chọn bản dựng Windows (phiên bản) và tải xuống. Ví dụ: tôi đang sử dụng Windows 7 (64 bit) nên tôi sẽ tải xuống Ruby 2.2.4 (x64).
- Thực hiện theo tất cả các hướng dẫn từ trình cài đặt.
- Sau khi cài đặt thành công Ruby, hãy mở Bảng điều khiển Windows và viết gem install sass và sau đó quá trình sẽ bắt đầu Cài đặt Sass. Nếu trong quá trình cài đặt bạn gặp lỗi, hãy thử đổi gem thành sudo và cuối cùng bạn sẽ nhận được dòng sau: sudo gem install sass .
Kiểm tra
Sau khi cài đặt Sass, bạn cần đảm bảo thực hiện mọi thứ một cách chính xác. Điều này có thể được thực hiện trong hai bước đơn giản.
- Mở dấu nhắc lệnh của Windows
- Viết sass -v ở đó. Nếu bạn đã cài đặt mọi thứ chính xác, bạn sẽ thấy dòng này giống như dòng này Sass 3.4.19 (Steve chọn lọc) .
Tái bút. Nếu bạn không thấy gì, có thể bạn đã vào không đúng thư mục. Đầu tiên, bạn cần ghi cd và sau đó là đường dẫn đến nơi bạn đã cài đặt Ruby. Trong trường hợp của tôi, nó sẽ giống như thế này cd D:\Programs\Ruby22\bin\ . Khi bạn nhận được chỉ thị này, bạn cần viết sass -v . Nếu bạn vẫn không thấy gì, hãy lặp lại quá trình cài đặt từ đầu và sau đó quay lại đây một lần nữa.
Sử dụng Sass tại nơi làm việc
Đầu tiên, hãy tạo một tệp đơn giản có tên style.scss và bên trong chúng ta sẽ viết như sau:
Main-wrapper ( width: 1024px; Margin: 0 auto; .sidebar ( float: left; width: 30%; ) . container ( width: 67%; float: right; ) )
Xin lưu ý rằng định dạng tệp là .scss, không phải .css. .scss sử dụng cú pháp hơi khác một chút, nhưng nó cơ bản và khá dễ hiểu ngay từ đầu (nếu bạn đã từng sử dụng css trước đây). Và nếu bạn đang đọc bài viết này, tôi hy vọng rằng bạn đã quen thuộc với nó.
Và vì vậy chúng ta tiếp tục với style.css:
Như bạn có thể thấy, Sass đã lấy tất cả nội dung của tệp style.scss và biến nó thành tệp CSS thông thường.
Cũng lưu ý rằng trong scss, tất cả các kiểu đều được viết dưới dạng cây (nghĩa là một lớp trong một lớp).
Ví dụ thế này:
Trình bao bọc chính ( display: block; .sidebar ( float: left; width: 30%; .block ( display: none; ) ) )
Trở thành:
Main-wrapper ( display: block; ) .main-wrapper .sidebar (float: left; width: 30%;) .main-wrapper .sidebar .block (display: none; )
Tất nhiên SCSS thuận tiện hơn nhiều.
Dưới đây là một số ưu điểm của SCSS:
- Nhóm các phong cách
- Khả năng nhanh chóng tìm thấy lớp/id cần thiết
- Sử dụng cùng một phong cách ở nhiều nơi
Bạn có thể hỏi --watch là gì? Lệnh này buộc Sass phải theo dõi mọi thay đổi đối với style.scss. Nghĩa là, mỗi khi bạn lưu một bản sao mới của tệp này, Sass sẽ ghi lại điều này và biên dịch một phiên bản CSS mới.
Tái bút. Nếu bạn đã có phiên bản CSS đã biên dịch trong cùng thư mục với style.scss, nó sẽ ghi đè chúng bằng phiên bản mới hơn.
Điểm quan trọng
Trong phần này, tôi muốn đưa ra một số lời khuyên có thể hữu ích cho bạn.
Để tạo tệp CSS, trước tiên bạn cần tạo tệp SCSS trong đó bạn chỉ định các kiểu để biên dịch CSS.
Nếu bạn gặp lỗi trong quá trình biên dịch, rất có thể bạn đã sai cú pháp Sass. Hãy kiểm tra tệp cẩn thận và thử biên dịch lại.
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-colorKhi 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á mức 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à một ví dụ điển hình về kiểu điều hướng trên 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ôngBạ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? Đây là một 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 : #efefefLư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 : bọc ; ) %message-shared ( border : 1px Solid #ccc ; phần đệ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á;).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% ; )
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: dưới dạng dòng lệnh, dưới dạng mô-đun Ruby độc lập và dưới dạng 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 scssmộ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 “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. Điều này rất hiệu quả đối với các 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 (phông chữ: 10px/8px; // CSS thuần túy không chia $width: 1000px; chiều rộng: $width/2; // Sử dụng các biến trong chiều rộng phép chia: round(1.5)/2; // Sử dụng hàm và chia độ cao: (500px/2); // Sử dụng dấu ngoặc và chia lề trái: 5px + 8px/2px; // Sử dụng font chữ cộng chia: (in nghiêng đậm 10px/8px); // Trong danh sách, dấu ngoặc trên đượ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ị kiểm soát
@nếu như
p (@if 1 + 1 == 2 ( border: 1px Solid; ) @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 mixins SCSS 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: in đậm; ) màu: #ff0000; ) .page-title ( @include văn bản lớn; phầ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; đệ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( Margin:10px; color:black; width:200px; Height:100px; Background:blue; ) .btn-red( Margin:10px; color:black; width:200px; Height:100px nền: màu đỏ;
