Cùng nhau tìm hiểu về Sass (Syntactically Awesome StyleSheets)

Là 1 lập trình web,chắc hẳn ai trong chúng ta cũng đều đã biết tới và sử dụng CSS (ít nhiều) để style lại UI cho các module View vì đó là 1 trong những kiến thức cơ bản nhất mà web developer phải nắm được.Và có lẽ cũng đã có nhiều người thắc mắc về việc viết CSS nhiều khi có những đoạn lặp đi lặp lại, không có tính tái sử dụng được,khó nhìn, vì CSS không có quy tắc cụ thể nào cho việc đặc tả.Nhưng chúng ta không thể làm gì được hơn mà chỉ có thể cố gắng viết CSS sao cho dễ hiểu,flexible nhất đối với những ai sẽ phải đọc qua đoạn code đó.Đơn giản như chính tôi khi đọc những đoạn CSS mình viết còn thấy rườm rà,phức tạp và không nhất quán dẫn tới việc maintaince lại UI hay upgrade lên rất rối và mệt.(haiz).Nhưng những thứ đó không còn là khó khăn,vướng bận nữa từ khi 1 libs tool mới ra đời,cho phép chúng ta có thể tái sử dụng, clear code CSS,thậm chí là kế thừa,gọi function,thao tác với các expression.v.v...

CSS COMPATIBLE FEATURE RICH MATURE INDUSTRY APPROVED LARGE COMMUNITY FRAMEWORKS

• Ở trên là những thứ mà Sass đã đạt được, bây giờ chúng ta sẽ cùng nhau xem Sass hoạt động như thế nào,trước tiên các bạn cần tìm hiểu để install Sass theo guide sau : http://sass-lang.com/install

Preprocessing

Sass sẽ cho phép chúng ta các tính năng phức tạp,đa năng hơn rất nhiều mà CSS không có như là : variables, nesting, mixins (function), inheritance và rất nhiều các tính năng hữu dụng khác nữa giúp việc viết CSS trở nên rất dễ dàng và clear.Một khi bạn tìm hiểu và sử dụng Sass,nó sẽ tạo các Sass file và lưu lại như 1 file Css bình thường và bạn có thể sử dụng bình thường ở trên website.Cách thường được dùng nhất để tạo nên điều này là trong terminal của bạn.Một khi Sass được cài đặt, bạn có thể run lệnh sass input.scss output.css để compile sass file sang css file.

Trong trường hợp bạn muốn Sass luôn trong trạng thái theo dõi sự thay đổi của 1 sass file nào đó để đảm bảo nó luôn thay đổi liên tục nội dung hay modifies file đó có gì sai xót không.Chúng ta sẽ run : sass --watch app/sass:public/stylesheets và ngay lập tức sass file đó sẽ trong trạng thái watched.

Variables

Sass mở rộng thêm tính năng cho phép dev có thể sử dụng các biến,nhăm mục đích cho phép chúng ta có thể lưu trữ những thông tin css mà có thể được tái sử dụng xuyên suốt stylesheets.Ở đây bạn có thể lưu trữ những thứ như colors,fonts,hoặc bất kỳ các thuộc tính nào của CSS.Sass sử dụng $ symbol để tạo nên các biến.For example :

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Khi Sass xử lý,nó sẽ tham chiếu tới các biến được dùng và lấy ra các thứ đã lưu trữ trong các biến mà nó tham chiếu tới và trả ra output là các giá trị CSS như bình thường

Output :

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting

Thêm 1 tính năng có thể nói là rất hay của Sass, đó là Nesting,nó giúp cho việc viết các class CSS lồng nhau từ khó hiểu trở nên đơn giản và flexible hơn nhiều.Điều này có thể nhìn thấy đáng kể khi mà chúng ta vào maintaince 1 đống các class plain CSS.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Output :

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Partials

Trong việc xây dựng các lớp Views bằng HTML cho 1 web apps,chúng ta thường có 1 kỹ thuật nhỏ là sử dụng các Partials,nó giống như các phần có thể sử dụng chung giữa nhiều Views hoặc là các thành phần tạo nên 1 Views.Bạn có thể định nghĩa ra các component của 1 Views bằng HTML tường ứng với các stylesheet với các component đó.Và khi gộp lại chúng ta sẽ sử dụng include của Sass để include các file Sass vào trong 1 file main.Tính năng này được xây dựng cũng để tăng hiệu năng khi maintaince và tái sử dụng mà Sass chú trọng tới.

In view A file sass :

1. @include _header.scss
2. @include _content.scss
3. @include _footer.scss

Import

1 tính năng giống như require của PHP hay include của Java,cho phép bạn nhúng thêm các sass đã được xây dựng cho các module và gọi tới sử dụng ngay trên sass file chứa file import này.

in reset.scss :

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

in base.scss :

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Chú ý là chúng ta đang sử dụng reset file bên trong base file.Khi bạn import 1 file không cần thiết trong file extension.Sass sẽ tự đọng filter và bỏ qua các dư thừa đó cho chúng ta