Cài đặt Sass

Khi bạn cài đặt Sass bằng dòng lệnh thì bạn sẽ có thể chạy thực thi sass đẻ biên dịch các file .sass và .scss thành các file .css. Ví dụ:

sass source/stylesheets/index.scss build/stylesheets/index.css

Đầu tiên bạn cài Sass sử dụng một trong những tùy chọn dưới đây sau đó chạy lệnh sass --version để kiểm tra quá trình cài đặt được hay chưa. Nếu được thì sẽ đưa vào bản 1.16.0. Bạn cũng có thể chạy lệnh sass --help để lấy thêm thông tin về giao diện dòng lệnh (command-line).

Sau khi cài đặt bạn sẽ được thiết lập một số tài nguyên giúp bạn học Sass nhanh.

Học Sass

Dùng trực tiếp

Bạn có thể cài đặt Sass trên Windows, Mac, hoặc Linux bằng cách download gói tương ứng với hệ điều hành từ from GitHub và thêm nó vào PATH. Đơn giản chỉ có vậy, không có bất kỳ một dependency ngoài nào và cũng không phải cài đặt (install) bất kỳ thứ gì.

Cài đặt với npm

Nếu bạn sử dụng Node.js thì bạn cài đặt Sass sử dụng câu lệnh sau:

npm install -g sass

Tuy nhiên, xin lưu là điều này sẽ cài đặt JavaScript thuân triển khai Sass, dẫn đến tốc độ chạy chậm hơn so với tùy chọn cài đặt khác. Tất nhiên là nó có giao diện tương tự, vậy nó dễ dàng chuyển đổi sang các thực thi khác nếu bạn cần tăng tốc.

Cài đặt trên Windows (Chocolatey)

Nếu bạn sử dụng trình quản lý gói Chocolatey cho Windows thì bạn có thể cài đặt Dart Sass bằng cách chạy lệnh sau:

choco install sass

Cài đặt trên Mac OS X (Homebrew)

Nếu bạn sử dụng trình quản lý gói Homebrew cho Mac OS X thì bạn có thể cài đặt Dart Sass bằng lệnh sau:

brew install sass/sass/sass

Sass cơ bản

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ẻ ulli, 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
SCSS:
// _reset.scss

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}
// base.scss

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

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property

.box
  +transform(rotate(30deg))

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

Sass:
/* CSS này sẽ in vì %message-shared được dẫn xuất. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// CSS sẽ không in vì %equal-heights không được dẫn xuất.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

Kết quả CSS:

/* CSS này sẽ in vì %message-shared được dẫn xuất. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

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:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

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.