Sass: Sass cơ bản
Giải phóng thời gian, khai phóng năng lực
Mục lục bài viết
Trước khi ta có thể sử dụng Sass thì ta cần cài đặt nó trong project của ta. Nhấn đây nếu bạn muốn tìm hiểu cách thức cài đặt Sass.
Tiền xử lý
Bản thân CSS đã là rất thú vị rồi, nhưng stylesheet ngày một lớn hơn, phức tạp hơn, và khó bảo trì hơn. Đây là lý do cần đến một bộ tiền xử lý. Sass giúp ta sử dụng các đặc tính không có sẵn trong CSS như biến, lồng, mixin, thừa kế và các tính năng tiện lợi khác giúp giải quyết những nhược điểm vốn có của CSS.
Một khi ta làm việc với Sass thì nó sẽ lấy file Sass đã thực thi tiền xử lý và lưu nó như một file CSS thông thường và ta có thể sử dụng nó trong website.
Cách tốt nhất là sử dụng terminal. Sau khi Sass được cài đặt thì ta có thể biên dịch Sass thành CSS sử dụng lệnh sass
. Ta sẽ cần cho Sass biết file nào cần build và nơi lưu trữ output file CSS. Ví dụ chạy lệnh sass input.scss output.css
từ terminal thì sẽ thực thi file Sass input.scss
và biên dịch file đó thành output.css
.
Bạn cũng có thể xem các file hoặc thư mục riêng bằng cách dùng cờ --watch
. Cờ watch cho Sass biết file source cần thay đổi và biên dịch lại CSS mỗi khi ta lưu Sass. Nếu ta muốn xem (thay vì build thủ công) file input.scss
thì ta thêm cờ watch như sau:
sass --watch input.scss output.css
Ta có thể watch và sau đó output đến thư mục bằng cách sử dụng folder path giống như input và output, và phân tách bằng dấu : . Ví dụ:
sass --watch app/sass:public/stylesheets
Sass sẽ watch tất cả các file vào thư mục app/sass
và biên dịch file CSS vào thư mục public/stylesheets
.
Biến
Biến là một cách lưu trữ thông tin và ta muốn tái sử dụng trong stylesheet. Ta có thể lưu trữ color, font hoặc một giá trị CSS bất kỳ mà ta muốn tái sử dụng. Sass sử dụng ký pháp $ để tạo biến. Đây là một ví dụ:
Sass:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
SCSS:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Kết quả CSS:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Khi Sass được xử lý, nó sẽ lấy giá trị trong các biến ta đã định nghĩa $font-stack
và $primary-color
để output ra CSS với các giá trị biến được thay thế trong CSS. Điều này trở lên rất mạnh mẽ khi làm việc với các màu và giữ cho chúng được nhất quán trên toàn trang.
Lồng nhau
Khi viết HTML ta được quyền đặt thẻ này nằm trong thẻ kia, nhưng với CSS thì không làm được điều đó.
Sass sẽ giúp ta làm được điều đó, nó cho phép lồng các bộ chọn CSS với nhau, nhưng lưu ý là không được lạm dụng để thiết lập việc lồng quá nhiều mức sẽ dẫn đến kết quả là khó bảo trì và tạo ra một sản phẩm tồi.
Đây là ví dụ về một số style phổ biến cho điều hướng trang:
Sass:
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
SCSS:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Kết quả CSS:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Bạn sẽ thấy các bộ chọn thẻ ul
, li
, và a
được lồng trong bộ chọn nav
. Đây là cách rất hay để tổ chức CSS và làm nó trở lên dễ đọc hơn.
Cô lập
Ta có thể tạo các file Sass độc lập và chứa một đoạn CSS nhỏ và có thể đưa nó vào các file Sass khác. Đây là một cách hay để module hóa CSS nhằm giúp mọi thứ dễ dàng chỉnh sửa hơn. File Sass độc lập bắt đầu với một ký tự gạch dưới, ví dụ _partial.scss
. Ký tự gạch dưới sẽ cho Sass biết rằng đây là file độc lập và rằng nó không cần được tạo trong file CSS. Ta sử dụng chỉ thị @import
cho các file này.
Import
CSS có một tùy chọn import giúp ta tách CSS thành những phần nhỏ hơn và dễ chỉnh sửa hơn. Nó có một nhược điểm là mỗi khi sử dụng @import
trong CSS thì nó sẽ tạo một request HTTP. Sass sẽ được build ở trên phần @import
hiện thời nhưng thay vì yêu cầu một request HTTP, Sass sẽ đem file ta muốn import kết hợp với file ta đang import nên ta chỉ cần một file CSS đưa cho trình duyệt web.
Giả sử ta có 2 file là _reset.scss
và base.scss
. Ta muốn import _reset.scss
vào base.scss
.
Sass:
// _reset.sass
html,
body,
ul,
ol
margin: 0
padding: 0
// base.sass
@import reset
body
font: 100% Helvetica, sans-serif
background-color: #efefef
Kết quả CSS:
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Lưu ý là ta sử dụng @import 'reset';
trong file base.scss
file. Khi ta import một file thì ta không cần đưa vào phần đuôi mở rộng .scss
. Sass đủ thông minh và sẽ biết được file tương ứng để cấu hình cho ta.
Mixin
Một số thứ trong CSS đôi khi khá tẻ nhạt để viết, đặc biệt là với CSS3 và nhiều tiền tố nhà cung cấp tồn tại. Mixin sẽ cho phép ta tạo một nhóm các khai báo CSS mà ta muốn tái sử dụng thông qua website. Ta cũng có thể truyền các giá trị để tạo mixin được dễ dàng hơn. Mixin rất phù hợp với tiền tố nhà cung cấp. Dưới đây là một ví dụ về transform
.
Sass:
SCSS:
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }
Kết quả CSS:
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
Để tạo mixin ta sử dụng chỉ thị @mixin
và đặt tên cho nó. Ở trên mixin được đặt tên là transform
. Ta cũng sử dụng biến có tên $property
nằm trong cặp ngoặc tròn tức là ta có thể truyền một transform mong muốn. Sau khi tạo mixin thì ta có thể sử dụng nó như một khai báo CSS bắt đầu với @include
theo sau là tên của mixin.
Dẫn xuất/Thừa kế
Đây là một trong những đặc điểm hữu dụng nhất của Sass. Sử dụng @extend
ta có thể chia sẻ tập các thuộc tính CSS từ các bộ chọn. Nó giúp Sass rất thoáng, sáng. Trong ví dụ của chúng ta chúng ta sẽ tạo một tập các thông báo lỗi, cảnh báo và thông báo thành công đơn giản sử dụng đặc tính khác đi đôi với các lớp dẫn xuất, giữ chỗ. Lớp giữ chỗ là một loại lớp đặc biệt, nó chỉ dùng để in khi nó được mở rộng, và có thể giúp giữ CSS đã biên dịch gọn gàng và sạch sẽ.
Những gì mà đoạn code trên thực hiện là bảo rằng .message
, .success
, .error
, và .warning
cư xử giống như %message-shared
. Nghĩa là ở bất kỳ đâu %message-shared
có mặt thì .message
, .success
, .error
, và .warning
cũng sẽ có mặt. Điều kỳ diệu xảy ra khi tạo CSS, ở đó mỗi một lớp sẽ tương ứng với một thuộc tính CSS dạng %message-shared
. Điều này giúp ta tránh được việc phải viết nhiều tên lớp trên các phần tử HTML.
Ta có thể dẫn xuất các bộ chọn CSS đơn giản nhất để thêm vào lớp giữ chỗ trong Sass, nhưng việc sử dụng các giữ chỗ là cách dễ nhất để đảm bảo ta không dẫn xuất một lớp đã được lồng ở đâu đó trong style, bởi điều này dẫn đến kết quả là các bộ chọn không mong muốn xuất hiện trong CSS của ta.
Lưu ý là CSS trong %equal-heights
sẽ không được tạo vì %equal-heights
không được dẫn xuất.
Phép toán
Làm toán trong CSS là thao tác rất hữu dụng. Sass có một số phép toán chuẩn như là +
, -
, *
, /
, và %
. Trong ví dụ dưới đây ta sẽ làm một số ví dụ đơn giản để tính toán độ rộng cho aside
và article
.
SCSS:
Kết quả CSS:
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}
Ví dụ trên ta đã tạo một lưới fluid đơn giản dựa trên kích thước 960px. Các hoạt động trong Sass giúp ta làm một số thứ như là mang các giá trị pixel và chuyển chúng thành % mà không cần gặp rắc rối nào.
Giải phóng thời gian, khai phóng năng lực