Cải tiến phát triển CSS với Sass

Kết hợp linh hoạt lập trình với các tính năng

Cú pháp định kiểu tuyệt vời (Sass - Syntactically awesome stylesheets) là một siêu ngôn ngữ và bộ tiền xử lý CSS . Hiểu biết các nguyên tắc của Sass chính là chìa khóa giúp phát trển CSS nhanh hơn và hiệu quả hơn. Sass cung cấp cú pháp CSS đơn giản, gọn nhẹ và mạnh mẽ để tạo ra các stylesheet có thể quản lý được. Bài giới thiệu này cung cấp cho bạn những điều cơ bản của việc sử dụng Sass để cải thiện các stylesheet cho website.

Alex Starostin, Kỹ sư bảo đảm chất lượng, IBM

Photo of Alexander StarostinAlex Starostin là một kỹ sư đảm bảo chất lượng ở phòng thí nghiệm IBM Australia Development. Công việc trọng tâm của ông là kiểm thử phần mềm và đảm bảo chất lượng cho đội ngũ phát triển trong môi trường phương pháp Agile. Bên cạnh việc phải có trách nhiệm thường xuyên, Alex thích dành trọn thời gian còn lại của mình để học những công nghệ và ngôn ngữ lập trình mới.



20 08 2013

Nếu bạn phát triển các stylesheet này, Syntactically Awesome Stylesheets (Sass) có thể cải thiện rất lớn các kinh nghiệm vốn có. Sass là ngôn ngữ định kiểu đồng thời là bộ tiền xử lý CSS có thêm các thuộc tính lập trình truyền thống để phát triển CSS. Sass cung cấp một số tính năng lập trình, bao gồm các biến, bộ các stylesheet, sự kết hợp giữa chúng, câu lệnh và tính chất kế thừa của chúng. Sass đơn giản hóa công việc phát triển stylesheet cho website bằng cách chuyển đổi từ Sass sang CSS theo chuẩn.

Nội dung bài viết này sẽ cung cấp các nguyên tắc cơ bản của Sass, bao gồm cả những ví dụ thực tiễn để minh họa cách sử dụng Sass giúp phát triển CSS nhanh hơn và hiệu quả hơn.

Sassy CSS (SCSS) là một tập hợp của CSS3. Rất nhiều bộ mã SCSS là mã CSS hợp lệ. Các mã ví dụ trong bài viết này là SCSS.

Tại sao lại sử dụng Sass

Các cú pháp Sass

  • SCSS: Cú pháp phổ biến nhất, là một tập cha của cú pháp CSS.
  • Sass: Cú pháp căn lề - ra đời trước và sử dụng việc căn lề để xác định các khối.

Sass là một giải pháp đa năng, mạnh mẽ và có thể cấu hình được dành cho việc phát triển CSS. Nó sử dụng một phương pháp cấu trúc động thay cho các quy ước CSS cũ. Để thực hiện theo phong cách lập trình hàng ngày của bạn, cùng sự tiếp cận với những cấu trúc của ngôn ngữ lập trình thì Sass là sự lựa chọn tốt nhất. Sass sẽ làm bạn ngạc nhiên với sự linh hoạt và đầy tính năng của nó.

Các bộ tiền xử lý CSS rất cần thiết cho tất cả các môi trường phát triển web. Chúng sẽ:

  • Giảm thời gian phát triển.
  • Áp dụng nguyên tắc "Đừng lặp lại chính bản thân - Don't Repeat Yourself (DRY)" để phát triển CSS.
  • Làm cho mã nguồn trở nên tường minh và dễ đọc hơn.

Hiện tại có nhiều bộ tiền xử lý CSS. Bài viết này sử dụng Sass vì nó linh động và đa năng.

Cài đặt Sass

Sass chủ yếu được triển khai trên Ruby, mặc dù vẫn tồn tại những bản triển khai khác. Bước đầu tiên là cài đặt Sass thông qua các thành phần Ruby của nó.

  1. Tải về và cài đặt Ruby nếu hệ thống của bạn chưa có:
    • Đối với Windows: Bộ cài đặt Ruby cho Windows
    • Mac OS X: Ruby đã được cài đặt sẵn trong hệ điều hành của bạn.
    • Linux: Cài đặt Ruby thông qua trình quản lý gói ứng dụng yêu thích của bạn.
  2. Cài đặt gói ứng dụng (gem) Sass cho Ruby với câu lệnh sau: gem install sass

Chuẩn bị môi trường Sass

Sử dụng một trình soạn thảo mà bạn thích, tạo một tập tin với phần mở rộng .scss. Các trình soạn thảo có nhiều mức độ hỗ trợ cho Sass. Xem phần Tài nguyên để lấy danh sách các trình soạn thảo với những mức độ hỗ trợ cú pháp Sass khác nhau.

Sao chép và dán đoạn mã từ ví dụ 1 vào tập tin .scss bạn vừa tạo.

Liệt kê 1. Mã nguồn Sass mẫu
#blueBar {
position: relative;
height: 37px;
left: 0;
right: 0;
top: 0;
}

Ngôn ngữ Sass là một tập cha của CSS3. Trong Sass phiên bản 3.2.1, tất cả những cú pháp CSS hợp lệ thì đều hợp lệ với Sass. Đoạn mã từ Liệt kê 1 là một CSS hợp lệ và cũng Sass hợp lệ. Tuy vậy, bạn vẫn phải chuyển đoạn mã Sass từ Liệt kê 1 sang CSS. Nếu không, các trình duyệt web sẽ không thể thông dịch stylesheet của bạn một cách chính xác. Bạn không cần phải liên tục chuyển mã Sass sang CSS với lệnh sass-convert, mà chỉ cần thiết lập Sass để tự động chuyển đổi tập tin của bạn thành CSS bất cứ khi nào bạn lưu. Để Sass tự động giám sát tập tin của bạn, chạy lệnh ở Liệt kê 2 trong ứng dụng dòng lệnh của bạn.

Liệt kê 2. Giám sát một tập tin
sass --watch
style.scss:style.css

Bạn cũng có thể sử dụng Sass để giám sát cả một thư mục bằng việc sử dụng lệnh trong Liệt kê 3.

Liệt kê 3. Giám sát một thư mục
sass --watch
stylesheets/sass:stylesheets/compiled

Framework của bạn đã được tạo, và Sass tự động chuyển đổi mã của bạn thành mã CSS hợp lệ bất cứ khi nào bạn lưu tập tin Sass. Ngay bây giờ, bạn đã có thể bắt đầu.


Biến

Một tính năng quan trọng còn thiếu trong tệp css là biến. Stylesheets có xu hướng sử dụng sự lặp lại. Một giải pháp hữu ích là viết một giá trị hữu ích một lần và tái sử dụng nó thông qua bí danh của nó. Ví dụ, giả sử bạn có một stylesheet như một trong các mục ở Liệt kê 4.

Liệt kê 4. Các thành phần và màu sắc CSS
#someElement { color: #541B32; }
#anotherElement { color: #541B32; }
#yetAnotherElement { color: #541B32; }

Các lệnh theo chuẩn CSS mà bạn viết các giá trị một cách rõ ràng nhất sẽ gây ra dư thừa trong Liệt kê 4. Tuy nhiên với Sass,bạn có thể đạt được hiệu quả trong Liệt kê 5.

Liệt kê 5. Các thành phần và màu sắc Sass
$purplishColor: #541B32;
#someElement { color: $purplishColor; }
#anotherElement { color: $purplishColor; }
#yetAnotherElement { color: $purplishColor; }

Những lợi ích của nó rất rõ ràng. Bây giờ bạn có thể thay đổi màu sắc của các thành phần chỉ ở một vị trí. Trong Liệt kê 5$purplishColor là một biến, vì vậy bạn có thể thay đổi nó bất kì lúc nào trong tệp Sass. Biến Sass không có kiểu, bạn có thể gán kiểu cho nó là string (chuỗi), integer (số nguyên) hoặc thậm chí là một màu cho biến tương tự.


Modules

Bạn có thể dễ dàng chia mã CSS vào các mdules riêng cho các công cụ Sass liên kết với nhau. Với chỉ thị @import, bạn có thể import modules, như ở Liệt kê 6. Chỉ thị này lấy tên một tệp (file name), một liên kết (hyperlink), hoặc bất kỳ một đường dẫn nào (path). Cả tập tin CSS và SCSS được tải và kết hợp lại với nhau thành một tài liệu.

Liệt kê 6. Import các module Sass
@import "colors.scss"
@import "links.scss"

Làm thế nào mà bạn phá vỡ đoạn mã trong CSS và SCSS cơ bản là khác nhau.Khi bạn phá vỡ mã CSS thành những stylesheet nhỏ hơn,mỗi stylesheet sẽ có một địa chỉ HTTP riêng khi có yêu cầu tải trang. Chỉ thị Sass @import sẽ kéo trực tiếp các mã module, vì thế mà bạn luôn có một tệp tin CSS cuối cùng.


Chuỗi (string) và phép nội suy

Sass hỗ trợ các chuỗi và các biến nội suy. Thay vì chỉ sử dụng biến cho thuộc tính của các giá trị, bạn cũng có thể trực tiếp chèn các giá trị vào các thuộc tính và tên selector như trong Liệt kê 7.

Liệt kê 7. Chuỗi Sass và hoạt động của biến
$image_dir: 'images/web/';
$page: 10;

.button
{
background-image: url( $image_dir + 'image.gif' );
:before { content: "Page #{ $page }"; }
}

Đoạn mã trong Liệt kê 7 đã được chuyển đồi sang CSS ở Liệt kê 8.

Liệt kê 8. Chuỗi Sass và hoạt động của biến
.button {
background-image: url("images/web/image.gif"); }
.button:before {
content: "Page 10"; }

Tính Toán

Sass hỗ trợ các phép toán cơ bản để làm việc với các con số như ở Liệt kê 9. Bạn có thể tính toán đơn giản với giá trị của các biến.

Liệt kê 9. Phép tính toán số học của Sass
.block {
$block_width: 500px;
width: $block_width - ( 10px * 2 ) - ( 1px * 2 );
}

Mã CSS trong Liệt kê 9 được chuyển đổi thành CSS để hiển thị trong Ví dụ 10.

Liệt kê 10. Phép toán số học trên CSS
.block {
width: 478px; }

Các phép toán đối với màu sắc cũng được Sass hỗ trợ, xem Liệt kê 11.

Liệt kê 11. Phép toán màu sắc của Sass
.block {
$color: #010203;
color: $color;
border-color: $color - #010101;
}

Đoạn mã CSS trong Liệt kê 11 được chuyển đổi thành CSS như Liệt kê 12.

Liệt kê 12. Phép toán màu sắc trong CSS
.block {
color: #010203;
border-color: #000102; }

Thuộc tính và các bộ chọn (Selectors) lồng nhau

Một trong những tính năng được mong đợi nhất của CSS là lồng các nhóm thuộc tính (tức là áp dụng một nhóm thuộc tính khác trong chính nhóm thuộc tính đó cho đối tượng). Để lồng các Selector trong CSS, bạn cần xác định một danh sách các Seclector cha của các Selector con. Để đơn giản hóa quá trình này trong Sass, bạn lồng các Selector như Liệt kê 13.

Liệt kê 13. Lồng các Selector trong Sass
#some {
border: 1px solid red;
.some { background: white; }
}

Đoạn mã trong Liệt kê 13 có thể chuyển đổi thành CSS như Liệt kê 14.

Liệt kê 14. Lồng các Selector trong CSS
#some { border: 1px solid red; }
#some .some { background: white; }

Các chỉ thị điều khiển

Sass cung cấp các luồng và logic để kiểm soát các điều khiển trong CSS. Các chỉ thị điều khiển cơ bản được nêu trong phần này bao gồm @if, @for, and @each.

@if

Sass hỗ trợ hàm if/else cơ bản và biên dịch chúng sang CSS. Ví dụ: Trong Liệt kê 15, bạn muốn màu của tất cả liên kết là màu đen, ngoại trừ những nơi đã là màu đen. Nếu đã là màu đen thì đặt màu liên kết đó là màu trắng.

Liệt kê 15. Ví dụ về @if trong Sass
$color: black;

.link {
@if $color == black {
color: white;
} @else {
color: black;
}
}

Đoạn mã trong Liệt kê 15 được dịch sang CSS như Liệt kê 16.

Liệt kê 16. Ví dụ về @if trong CSS
.link {
color: white; }

Việc sử dụng các @if ở đây hoạt động tương tự như trong các ngôn ngữ lập trình khác. Trong câu lệnh @if có thể sử dụng nhiều câu lệnh @else if và một câu lệnh @else. Nếu kết quả logic của câu lệnh @if là sai, các câu lệnh @else if sẽ thử điều khiện theo thứ tự cho đến khi thỏa điều kiện hoặc đến một câu lệnh @else.

@for

Chỉ thị @for để lặp một tập hợp kiểu kết quả đầu ra. Đối với một lần lặp, biến điều khiển (biến đếm) được sử dụng để điều chỉnh đầu ra như Liệt kê 17.

Liệt kê 17. Ví dụ về @for trong Sass
@for $i from 1 through 5 {
.button-#{$i} { width: 1px * $i; }
}

Đoạn mã trong Liệt kê 17 được dịch sang CSS như trong Liệt kê 18.

Liệt kê 18. Ví dụ về @for trong CSS
.button-1 {
width: 1px; }
.button-2 {
width: 2px; }
.button-3 {
width: 3px; }
.button-4 {
width: 4px; }
.button-5 {
width: 5px; }

@each

Mỗi chỉ thị @each lấy phần tử từ danh sách và kiểu đầu ra với giá trị tương ứng như trong Liệt kê 19.

Liệt kê 19. Ví dụ về @each trong Sass
@each $company in IBM, Motorola, Google {
.#{$company}-icon {
background-image: url('/images/#{$company}.jpg');
}
}

Đoạn mã trong Liệt kê 19 dịch sang CSS như Liệt kê 20.

Liệt kê 20. Ví dụ về @each trong CSS
.IBM-icon {
background-image: url("/images/IBM.jpg"); }
.Motorola-icon {
background-image: url("/images/Motorola.jpg"); }
.Google-icon {
background-image: url("/images/Google.jpg"); }

Hàm

Bạn có thể áp dụng các hàm vào Sass. Cấu trúc lại và trừu tượng các phương thức để có thể sử dụng lại cho các dự án tiếp theo.

Sass có một danh sách dài các hàm tích hợp. Ví dụ, bạn có thể sử dụng phương thức rgb()darken(), như Liệt kê 21, để thao tác với màu sắc. Bạn có thể thay đổi màu sắc, độ bão hòa, độ sáng, độ mờ, tính mềm mại và nhiều khía cạnh khác. Bạn cũng có thể định nghĩa lại các chức năng riêng và sử dụng lại khi cần thiết.

Liệt kê 21. Hàm trong Sass
#someElement {
color: rgb(150, 50, 100);
}
#someDarkYellowElement {
color: darken(yellow, 33%);
}

Đoạn mã trong Liệt kê 21 được dịch sang CSS như Liệt kê 22.

Liệt kê 22. Hàm trong CSS
#someElement {
color: #963264; }
#someDarkYellowElement {
color: #575700; }

Sass bao gồm các hàm thao tác với biểu thức toán học, chuỗi, danh sách, kiểu tự định nghĩa và nhiều kiểu dữ liệu khác. Xem phần Tài nguyên để biết danh sách hàm đầy đủ cho Sass.


Mixins

Một mixin, có tác dụng tái sử dụng mã CSS, được xác định với chỉ thị @mixin, như Liệt kê 23. Với mixins, bạn xác định được mô hình của các cặp giá trị thuộc tính mà bạn đã tái sử dụng trong khi thiết lập sử dụng cho nó ở vị trí khác. Mixins rất hữu ích cho việc đơn giản hóa stylesheet và cải thiện khả năng đọc mã. Về cơ bản, @mixin là một hàm mà người dùng tự định nghĩa. Mixins lấy những tham số, nghĩa là bạn có thể tạo ra rất nhiều các kiểu khác nhau chỉ với một vài mixin.

Liệt kê 23. Sass mixins
@mixin rounded-corners($radius: 5px) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}

#header {
@include rounded-corners;
}
#footer {
@include rounded-corners(10px);
}

Đoạn mã trong Liệt kê 23 dịch sang CSS ở Liệt kê24.

Liệt kê 24. CSS mixins
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px; }

#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px; }

Hàm và mixin là tương tự nhau. Cả hai đều chấp nhận biến, nhưng chúng khác nhau là trong một hàm luôn có giá trị trả về và đầu ra của mixin là những dòng mã lệnh.


Compass

Compass là một framework soạn thảo CSS mã nguồn mở sử dụng ngôn ngữ định kiểu Sass. Một số design pattern (mẫu thiết kế) có thể tái sử dụng của nó (sử dụng maxin) giúp bạn tạo dựng những stylesheet tốt và mạnh mẽ. Những mã chung của thư viện Compass là công cụ không thể thiếu trong sự phát triển của Sass.

Về cơ bản, Compass là một vỏ bọc cho CSS. Nó xử lý các vấn đề CSS chung như là khả năng tương thích với trình duyệt, bố cục (layout) và tối ưu hóa stylesheet thông qua spriting và các kỹ thuật khác.

Giống như Sass, Compass được đóng gói như một Ruby gem. Để cài đặt Compass, bạn nhập vào dòng lệnh gem install compass.

Bây giờ bạn có thể sử dụng maxin (hàm) được xác định trong framework Compass. Có rất nhiều hàm, các lớp và các các hỗ trợ CSS3 gốc được xác định trước trong Compass. Để tìm hiểu thêm về Compass, hãy xem phần Tài nguyên.


Kết luận

Bài viết này giới thiệu về một số khái niệm có thể giúp bạn thực hiện cài đặt thành công Sass trên trình duyệt web. Bạn đã học về các biến, phép nội suy, tính lồng nhau, hàm và một số chỉ thị.

Sass không chỉ là bộ tiền xử lý CSS trên Internet. Đối thủ cạnh tranh gần nhất của Sass, LESS (xem phần Tài nguyên), cũng đưa ra yêu cầu cho một số thị phần. Cuối cùng sự khác biệt giữa Sass và LESS là rất nhỏ. Cái quan trọng nhất của Sass là Compass, một thành phần mở rộng còn thiếu trong LESS. Điều quan trọng là thử càng nhiều bộ xử lý càng tốt để xác định xem đâu là cái phù hợp với phong cách và nhu cầu của bạn.

Tài nguyên

Học tập

  • Sass: Tìm hiểu thêm về Sass, siêu ngôn ngữ trong top đầu CSS. Hãy cùng tìm hiểu những bài hướng dẫn, tài liệu và blog.
  • Biên tập văn bản (text editor) và hỗ trợ Sass: Hãy xem danh sách các text editor với nhiều mức độ hỗ trợ cho Sass.
  • Danh sách các hàm của Sass: Kiểm tra danh sách các hàm của Sass một cách toàn diện .
  • Compass: Tìm hiểu các framework soạn thảo CSS mã nguồn mở.
  • LESS: Lấy thêm được nhiều thông tin hơn về ngôn ngữ stylesheet LESS động.
  • Sass và LESS: Đọc bài viết này để được hướng dẫn về những bộ tiền xử lý ngôn ngữ CSS để có thể đưa ra sự lựa chọn.
  • developerWorks Web: Tìm các bài viết có nhiều các giải pháp dựa trên web. Hãy xem các thư viện kỹ thuật Web development cho hàng loạt các bài viết kỹ thuật và thủ thuật, hướng dẫn, tiêu chuẩn, và các sách Đỏ của IBM.
  • Các kỹ thuật developerWorks và webcasts: Sử dụng các công nghệ hiện tại trong các phiên làm việc này.
  • developerWorks Live! briefings: Mang đến tốc độ rất nhanh trên các sản phẩm và công cụ IBM cộng với xu hướng công nghiệp IT .
  • developerWorks on-demand demos: Xem các bản demos khác nhau từ cài đặt sản phẩm, thiết lập cho người mới bắt đầu đến các chức năng cao cấp cho các nhà phát triển có kinh nghiệm.
  • developerWorks trên Twitter: Tham gia ngay hôm nay để theo dõi developerWorks tweets.

Lấy sản phẩm và công nghệ

  • Tải về Sass và thử phát triển.
  • Tải về các sản phẩm của IBM và tiếp cận các công cụ phát triển ứng dụng và sản phẩm trung gian từ DB2®, Lotus®, Rational®, Tivoli®, và WebSphere®.

Thảo luận

  • Tham gia vào cộng đồng developerWorks. Kết nối với người sử dụng developerWorks khác như bạn khám phá những blog phát triển theo định hướng, diễn đàn, các nhóm và thư viện wiki.

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=941460
ArticleTitle=Cải tiến phát triển CSS với Sass
publish-date=08202013