GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 14/08/2013 | 00:00 GMT+7

Cách thiết lập Sass trên VPS của bạn đang chạy trên Ubuntu

Giới thiệu

Sass là một bộ tiền xử lý CSS cho phép bạn tạo các bảng định kiểu theo cách hiệu quả và thông minh hơn nhiều so với việc sử dụng CSS phẳng đơn giản. Nó cung cấp một số thành phần động sẽ làm cho mã của bạn nhỏ hơn, tái sử dụng nhiều hơn và có thể mở rộng hơn. Cú pháp của nó khá dễ hiểu và thay vào đó nó được bổ sung thêm CSS thông thường hơn là thay thế nó.

Trong hướng dẫn này, ta sẽ xem cách bạn có thể cài đặt Sass và bắt đầu sử dụng nó. Đối với điều này, nó giả sử bạn đang chạy VPS của riêng mình với Ubuntu và một web server được cài đặt trên đó nếu bạn muốn xem nội dung nào đó trong trình duyệt (nhưng không cần thiết ở cấp độ này).

Xin lưu ý bạn cũng có thể cài đặt Sass trên các hệ điều hành khác như Windows và OS X.

Bạn có thể xem bài viết này để giúp bạn cài đặt và chạy với VPS của bạn .

Cài đặt Sass

Để cài đặt Sass, trước tiên ta cần có Ruby trên hệ thống, vì vậy ta sẽ phải cài đặt nó trước. Ngoài ra, ta sẽ phải cài đặt rubygems (hệ thống quản lý gói cho Ruby). Hãy thực hiện cả hai tác vụ này bằng các lệnh sau:

sudo apt-get update
sudo apt-get install ruby-full rubygems

Tiếp theo, ta có thể sử dụng lệnh gem để cài đặt Sass:

sudo gem install sass

Bây giờ Sass đã được cài đặt, ta có thể bắt đầu.

Sử dụng Sass

Hãy tạo một bảng định kiểu để chơi cùng. Điều hướng đến folder root của web server của bạn (đối với Apache thì phải là / var / www ) và tạo một file có tên style.scss :

cd /var/www
nano style.scss

Bên trong file này, hãy dán luật css sau:

.box {
  padding:20px;
  background-color:red;
}

Như bạn thấy , đây là một số css cơ bản. Lưu file và thoát. Bây giờ, ta cần yêu cầu Sass dịch file này thành file định dạng css thông thường (kết thúc bằng phần mở rộng .css):

sass --watch style.scss:style.css

Với lệnh này, Sass sẽ tạo file .css và giám sát file .scss để biết bất kỳ thay đổi nào. Nếu chúng xảy ra, file .css sẽ được cập nhật tự động.

Khi chạy lệnh này lần đầu tiên, bạn gặp lỗi sau:

[Listen warning]:
  Missing dependency 'rb-inotify' (version '~> 0.9')!
  Please run the following to satisfy the dependency:
    gem install --version '~> 0.9' rb-inotify

Bạn có thể chạy lệnh sau để đáp ứng dependencies :

gem install --version '~> 0.9' rb-inotify

Điều này sẽ làm lừa. Bây giờ, nếu bạn đang xử lý nhiều file Sass, bạn có thể chạy lệnh --watch và làm cho nó biên dịch toàn bộ folder gồm các file .scss:

sass --watch stylesheets/sass:stylesheets/css

Điều này sẽ làm cho nó theo dõi tất cả các file .scss trong folder stylesheets / sass , tự động biên dịch chúng và biến chúng thành file tương đương trong folder stylesheets / css . Tuy nhiên, khi bạn chạy một trong những lệnh này, Sass sẽ ở "chế độ xem" này cho đến khi bạn yêu cầu nó dừng lại.

Bạn có thể nhấn Ctrl + C để ngừng xem qua các file . Sau đó, những thay đổi bạn thực hiện đối với (các) file .scss sẽ không được tự động phản ánh trong (các) file .css cho đến khi bạn chạy lại lệnh --watch .

Vậy thỏa thuận là gì? Tất cả những gì ta đã làm là viết một số css vào một file và sau đó sao chép nó vào một file khác. Nhưng còn nhiều thứ hơn nữa đối với Sass và đây là lý do tại sao bạn nên sử dụng nó. Vì vậy, hãy xem những gì khác bạn có thể làm.

Làm tổ

Lồng là một cách tốt để tránh phải viết đi viết lại cùng một bộ chọn. Ví dụ, bạn có 3 bộ chọn bắt đầu bằng cùng một thứ: " .box ul ", " .box li " và " .box li a ". Thông thường, bạn phải tạo ba luật khác nhau cho những điều này:

.box ul {
  ...
}
.box li {
  ...
}
.box li a {
  ...
}

Nhưng với Sass, bạn có thể lồng chúng như vậy:

.box {
  padding:20px;
  background-color:red;
  ul {
    margin:10px;
  }
  li {
    float:left;
    a {
      color:#eee;
    }
  }
}

Như bạn thấy , bằng cách này, bạn tránh phải viết lại phần .box của bộ chọn cả 3 lần. Ngoài ra, nó trông rất đơn giản và hợp lý. Bây giờ nếu bạn sử dụng lệnh --watch để tạo .css tương đương, nó sẽ tự động tạo tất cả 3 khối css đó cho bạn:

.box {
  padding: 20px;
  background-color: red;
}
.box ul {
  margin: 10px;
}
.box li {
  float: left;
}
.box li a {
  color: #eee;
}

Ngoài ra, bạn có thể lồng các propen bằng cách sử dụng cùng một logic. Ví dụ, bạn có thể viết thông tin như sau:

.box {
  padding: {
    top:20px;
    right:10px;
    bottom:15px;
    left:10px;
  }
}

Điều này giúp bạn tiết kiệm thời gian phải viết gấp 4 lần từ "padding".

Biến

Một tính năng tiết kiệm thời gian và đơn giản là tuyệt vời khác của Sass là sử dụng các biến. Tương tự như các ngôn ngữ lập trình như PHP hoặc javascript, điều này cho phép bạn khai báo một biến một lần và sử dụng nó sau này trong mã của bạn nhiều lần tùy thích. Ví dụ, bạn có thể làm điều gì đó như sau:

$color: #eee;

a {
  color: $color;
}

Sau đó, Sass sẽ thay thế tất cả các trường hợp của biến $ color trong toàn bộ file bằng mã màu thực tế mà bạn đã khai báo một lần: #eee .

Mixin

Đây có lẽ là tính năng Sass mạnh mẽ nhất và chúng hoạt động về cơ bản giống như các hàm. Bạn có thể sử dụng lại toàn bộ khai báo kiểu và thậm chí chuyển chúng đối số. Tương tự như một hàm, trước tiên bạn khai báo chúng. Vì vậy, hãy khai báo 2 mixin hơi khác nhau.

@mixin box-size {
  width:200px;
  height:200px;
  padding:10px;
  margin:0px;
}

@mixin border($width) {
  border: $width solid #eee;
}

Như bạn thấy , cái đầu tiên không có bất kỳ đối số nào. Ta có thể tận dụng nó như vậy:

.box {
  @include box-size;
}

Điều này sẽ xuất ra css sau:

.box {
  width:200px;
  height:200px;
  padding:10px;
  margin:0px;
}

Mixin thứ hai mà ta có thể sử dụng bằng cách chuyển cho nó một đối số:

.box2 {
  @include border(1px);
}

Điều này sẽ sử dụng luật được xác định trong mixin và chuyển cho nó đối số kích thước để có độ linh hoạt cao hơn nữa. Điều này sẽ xuất ra css sau:

.box2 {
  border: 1px solid #eee;
}

Đây là một số nhưng không phải tất cả các tính năng làm cho Sass trở nên tuyệt vời. Bạn có thể thực hiện các phép tính khác nhau trên một số giá trị có thể và những thứ tuyệt vời khác. Để tìm hiểu thêm thông tin và ví dụ về cách sử dụng nó, bạn có thể xem trang web của Sass .

Kiểu kết quả

Chạy lệnh --watch mà ta đã thấy ở trên sẽ làm cho Sass xuất CSS kết quả trong file .css theo cách mặc định: lồng nhau. Có 4 kiểu kết quả khác nhau mà bạn có thể chọn:

  • Lồng nhau: phản ánh cấu trúc của các kiểu CSS và trang HTML mà chúng đang tạo kiểu.
  • Đã mở rộng: với mỗi thuộc tính và luật chiếm một dòng
  • Thu gọn: mỗi luật CSS chỉ chiếm một dòng, với mọi thuộc tính được xác định trên dòng đó.
  • Đã nén: không có khoảng trắng ngoại trừ khoảng trắng cần thiết để tách các bộ chọn và một dòng mới ở cuối file .

Bạn có thể đọc thêm về các phong cách khác nhau này tại đây . Nhưng một cách dễ dàng để chuyển đổi giữa chúng là trong chính lệnh --watch bằng cách thêm cờ vào cuối. Ví dụ, nếu ta muốn sử dụng kiểu mở rộng , ta chạy lệnh như sau:

sass --watch style.scss:style.css --style=expanded

Kết luận

Sass rất mạnh mẽ và một khi bạn đã quen với nó, bạn sẽ có trải nghiệm giao diện user dễ dàng hơn nhiều. Nó bổ sung thêm tính thông minh cho cách nghĩ của CSS và cung cấp các công cụ để làm cho nó hoạt động hiệu quả hơn.

Bài viết gửi bởi: Danny
Tags:

Các tin liên quan

Cách cài đặt Cassandra và chạy một cụm node đơn trên VPS Ubuntu
2013-08-08
Cách cài đặt CouchDB từ nguồn trên VPS Ubuntu 13.04 x64
2013-08-06
Cách quản lý gói trong Ubuntu và Debian với Apt-Get & Apt-Cache
2013-08-06
Bắt đầu với LXC trên VPS Ubuntu 13.04
2013-08-06
Cách cài đặt Go and Revel trên VPS Ubuntu 13.04 x64
2013-07-31
Cách thiết lập chứng chỉ SSL với PhpMyAdmin trên VPS Ubuntu 12.04
2013-07-30
Cách cài đặt và quản lý trình giám sát trên Ubuntu và VPS Debian
2013-07-23
Cách tạo ứng dụng Node.js bằng Sails.js trên VPS Ubuntu
2013-07-16
Cách cài đặt Chef và Ruby với RVM trên VPS Ubuntu
2013-07-15
Cài đặt và sử dụng Ranger, Trình quản lý tệp đầu cuối, trên VPS Ubuntu
2013-07-12