Giới thiệu về Sass

Rất nhiều người có nhu cầu tìm hiểu vể Sass  (Syntactically Awesome Stylesheets). Trong khi có rất nhiều cuộc thảo luận trên mạng là có hay không hoặc   sử dụng Sass như thế nào là tốt hơn. Cả hai đều có vị trí của mình, cả hai đều đạt được mục tiêu tổng thể giống nhau, và cả hai có thể làm cho việc mã hóa của bạn trở nên đơn giản hơn nhiều và dễ dàng hơn.Giới thiệu về Sass sẽ cung cấp cho các bạn những kiến thức cơ bản nhất về Sass.

Sass là gì?

Sass, viết tắt của Syntactically Awesome Stylesheets, là một “siêu ngôn ngữ trên đầu trang của CSS được dùng để mô tả phong cách của một tài liệu sạch và có cấu trúc, mạnh hơn CSS. Sass cả cung cấp một cú pháp thanh lịch đơn giản hơn cho CSS và thực hiện các tính năng khác nhau rất hữu ích cho việc thiet ke website và tạo kiểu quản lý.

Có nhiều cách khác nhau để khai thác sức mạnh thực sự của Sass, mỗi cách lại sử dụng những phương pháp riêng. Nhưng về cơ bản, nó thường nghĩ rằng Sass là một phía máy chủ ngôn ngữ biên dịch sử dụng Ruby (như trái ngược với LESS, mà là một thư viện JavaScript và do đó biên soạn phía khách hàng). Tuy nhiên Sass có thể được biên dịch tại địa phương và sau đó tải lên máy chủ của bạn hoặc trang web của bạn thông qua FTP bạn sẽ giống như bất kỳ CSS stylesheet khác. Nhiều người sử dụng CodeKit cho biên dịch này, và chúng tôi sẽ nói về điều này trong một bài sau.

Cài đặt Sass

Sass chạy trên Ruby. Nếu bạn đang sử dụng Mac OS X, bạn đã có Ruby cài đặt. Nếu bạn đang ở trên một máy tính Windows, bạn có thể cài đặt nó bằng cách sử dụng Windows Installer. Tôi sẽ tiếp tục hướng dẫn này là nếu bạn đang chạy Mac OS X.

Đầu tiên, khởi động Terminal. Nếu hộp này màu đen nhỏ sợ hãi bạn, đừng lo lắng. Tôi đã luôn luôn rất sợ làm việc trong Terminal, nhưng sau khi làm theo một số hướng dẫn, làm việc với Ruby và Git, bạn có thể thoải mái hơn.

Lệnh đầu tiên bạn sẽ muốn gõ vào dòng lệnh để kiểm tra và xem những gì phiên bản của Ruby bạn đang chạy. Để kiểm tra, chạy lệnh này

ruby-v
Một khi bạn bấm Enter, Terminal sẽ cho bạn biết phiên bản của Ruby bạn đang chạy. Nếu bạn nhìn thấy một cái gì đó như thế này, bạn đã sẵn sàng để đá với Sass.

1_sass_running

Bây giờ bạn đang lên và chạy với Sass, bạn có thể bắt đầu viết một số mã xược. Trong bài sau, tôi sẽ hướng dẫn bạn thông qua cú pháp và quá trình suy nghĩ đằng sau kế hoạch ra mã của bạn là cực kỳ hiệu quả, và cũng có thể giới thiệu CodeKit (thay cho nhu cầu làm việc trong Terminal) khi sử dụng Sass. Chúng tôi cũng sẽ đi sâu vào Compass là tốt. Bạn có thể thấy, tính đến bài viết này, phiên bản của Ruby là 1.8.7, mà sẽ chỉ làm việc tốt cho Sass. Bây giờ chúng ta biết chúng ta có Ruby, chúng ta hãy cài đặt Sass.

Bạn có thể cài đặt Sass bằng cách chạy lệnh này

gem install sass
Nhấp chuột vào và Sass cài đặt sẽ bắt đầu. Quá trình này sẽ chỉ mất một hoặc hai phút. Nếu tất cả mọi thứ đi thành công, bạn sẽ thấy thông báo này.

 

2_sass_running

 

Sass giờ được cài đặt trên máy tính của bạn và bạn đã sẵn sàng để bắt đầu viết một số Stylesheets Cú pháp Awesome. Chúng ta cũng có thể tạm dừng một phút để chỉ cần nhìn vào cách tuyệt vời của một từ “cú pháp” là gì?

Viết tập tin Sass đầu tiên

Phần mở rộng tiêu chuẩn cho phiên bản mới nhất của Sass là .scss (đây là tính Sass 3). Phần mở rộng .scss là hoàn toàn hợp lệ CSS (giống như là LESS), do đó bạn có thể viết CSS tiêu chuẩn trong khi trộn trong Sass của riêng bạn là tốt. Mở trình soạn thảo mã của bạn và chúng ta hãy viết một số Sass (tôi sử dụng Coda 2 trong đó có một hồ sơ màu mặc định cho cú pháp .scss và nó có ích).

Mã này cho thấy một số biến và tuyên bố đoạn. Đừng lo lắng về cú pháp bây giờ là chúng tôi sẽ bao gồm các biến, mixins, làm tổ, chọn kế thừa và nhiều hơn nữa trong các bài viết sau. Hiện tại, chúng tôi vẫn tập trung vào việc Sass để làm việc với các tập tin .scss và Terminal.

/* Sample Sass */
$blue: #00214D;
$font-size: 16px;

p {
color: $blue;
font-size: $font-size;
}

Trông khá đơn giản cho đến nay, phải không? Bây giờ hãy nhảy trở lại vào thiết bị đầu cuối và nhận được Sass để xem các tập tin. Hãy chắc chắn rằng bạn đang ở trong cùng thư mục với tập tin bạn vừa lưu (tôi đã cứu tôi vào máy tính của tôi). Để kiểm tra và xem thư mục những gì bạn đang ở trong, chỉ cần gõ

ls
Trong dòng lệnh và nó sẽ liệt kê tất cả các tập tin và thư mục của bạn.

Để thay đổi thư mục, chỉ cần gõ

cd
Và sau đó bắt đầu gõ vị trí của bạn và nhân tab. Thiết bị đầu cuối sẽ tự động hoàn thành các thư mục. Chạy lệnh, sau đó gõ

ls
Một lần nữa để xác nhận bạn đang ở trong thư mục chính xác.

Một khi bạn đang ở trong cùng thư mục với tập tin .scss bạn vừa tạo ra, chúng tôi sẽ cho Sass để xem các tập tin và chuyển nó thành một tập tin css. Khi Sass đang theo dõi các tập tin, bất kỳ thay đổi bạn thực hiện cho các tập tin .scss sẽ tự động được cập nhật trong stylesheet css. Lệnh để nhận Sass để xem các tập tin

sass –watch sample-sass.scss:sample-sass.css
Sass sau đó sẽ cho bạn biết rằng nó đang theo dõi các thay đổi và tự động tạo một file CSS ở vị trí tương tự như tập tin .scss của bạn

Xu hướng

Bây giờ bạn đang lên và chạy với Sass, bạn có thể bắt đầu viết một số mã xược. Trong bài sau, công ty thiết kế website chuyên nghiệp sẽ hướng dẫn bạn thông qua cú pháp và quá trình suy nghĩ đằng sau kế hoạch ra mã của bạn là cực kỳ hiệu quả, và cũng có thể giới thiệu CodeKit (thay cho nhu cầu làm việc trong Terminal) khi sử dụng Sass. Chúng tôi cũng sẽ đi sâu vào Compass là tốt.

Summary
Reviewer
Hoàng Thùy Dương
Review Date
Reviewed Item
Bài viết rất hữu ích
Author Rating
5

Comments

Bình luận