Giải Cứu Đống Đổ Nát CSS Với Phương Pháp SASS

Giải Cứu Đống Đổ Nát CSS Với Phương Pháp SASS

Nếu bạn là một lập trình viên front-end và đã từng được vào maintain hoặc support một dự án viết CSS 'chay' thì chắc bạn cũng đã gặp tình trạng chán nản, muốn bỏ cuộc với những mớ hỗn độn đó.

Vậy có cách nào viết để chuyên nghiệp hơn, dễ dàng cho quá trình maintain sau này, người mới vào có thể nắm bắt được code ngay không? Câu trả lời là có! Cùng mình tìm hiểu tới khái niệm về CSS Preprocessor thôi nào!

CSS Preprocessor

CSS Preprocessors là ngôn ngữ tiền xử lý CSS. Nó giúp bạn viết một cú pháp CSS gần nhau với một ngôn ngữ lập trình rồi compile nó ra CSS thuần. Có rất nhiều CSS Preprocessor như SASS, LESS, Stylus... Ở bài viết này mình sẽ giới thiệu cho các bạn về SASS.

SASS

SASS - Syntactically Awesome StyleSheets là một CSS Preprocessor giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng. Với SASS, bạn có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn, các class dùng chung hay có thể tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng.

SASS được thiết kế và viết bởi các lập trình viên Ruby. Bởi vậy, Sass stylesheets sử dụng cú pháp giống như Ruby với việc không có các dấu ngoặc nhọn {}, dấu chấm phẩy, việc viết CSS như vậy không 'gần' CSS thuần nên việc hiểu và đọc code SASS khá khó hiểu.

Ví dụ:

SASS:

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

body
  font: 100% $font-stack
  color: $primary-color

CSS:

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

SCSS

Vào tháng 5/2010 phiên bản 3.0 được phát hành, cú pháp mới được giới thiệu SCSS(Sassy CSS). Cú pháp này nhằm thu hẹp khoảng cách giữa Sass và CSS bằng cách mang tới một cú pháp thân thiện với CSS. Hiểu 1 cách đơn giản, SCSS là một bản nâng cấp của SASS giúp chúng ta viết CSS một cách dễ dàng và dễ hiểu hơn.

SCSS:

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

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

CSS:

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

Nested Rule

Ví dụ về 1 đoạn HTML:

<div class="container">
  <div class="row">
    <div class="navbar">
      <a class="brand">CodeLearn</a>
      <ul class="menu">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
      </ul>
    </div>
  </div>
</div>

Nếu bạn chỉ muốn CSS cho thẻ ul với class `menu`, với CSS thuần bạn viết:

.navbar ul.menu {
  list-style: none;
  display: inline-block;
}

Nếu bạn tiếp tục muốn CSS cho thẻ `li` trong thẻ `ul` (có class là menu) thì sẽ viết:

.navbar ul.menu li {
  padding: 10px;
}

Tiếp theo, muốn style cho thẻ `a` trong cái `ul` `li` kia thì phải viết:

.navbar ul.menu li a {
  font-family: Helvetica, sans-serif;
  font-size: 14px;
}

Bạn phải lặp đi lặp lại rất, rất nhiều lần các selector ".navbar ul.menu", nó sẽ làm file style của bạn ngày một rối lên, việc sửa chữa ngày một phức tạp và khó khăn. Nested Rule của SASS sẽ giúp bạn xử lý tình huống trên một cách đơn giản mà không phải lặp lại gì cả.

.navbar {
  ul.menu {
    list-style: none;
    display: inline-block;
    li {
      padding: 10px;
      a {
        font-family: Helvetica, sans-serif;
        font-size: 14px;
      }
    }
  }
}

Sau khi code SASS được compile ra CSS thuần sẽ như sau:

.navbar ul.menu {
  list-style: none;
  display: inline-block;
}
.navbar ul.menu li {
  padding: 10px;
}
.navbar ul.menu li a {
  font-family: Helvetica, sans-serif;
  font-size: 14px;
}

Trong các dự án thực tế mình đã làm thì quy tắc Nested Rule được sử dụng rất nhiều.

Variable

Biến chứa các giá trị mà bạn sử dụng nhiều lần: mã màu, font, kiểu chữ, ... Để khai báo 1 biến trong SASS, mình sẽ sử dụng cú pháp $ và tên biến.

Ví dụ:

$whiteColor: #FFFFFF;
$fontSize: 14px;

.navbar {
  ul.menu {
    list-style: none;
    li {
      padding: 10px;
      a {
        text-decoration: none;
        color: $whiteColor
        font-size: $fontSize;
      }
    }
  }
}

Dễ hiểu phải không các bạn?

Mixin

Mixin là một cơ chế khá phổ biến trong SASS. Công dụng của nó là mang nhiều thuộc tính mà bạn đã quy ước trong một mix nào đó rồi @include vào một thành phần bất kỳ mà không cần phải viết lại các thuộc tính đó.

Ví dụ:

@mixin colorFont {
  color: #FFFFFF;
  font-size: 20px;
}

.navbar {
  ul.menu {
    list-style: none;
    li {
      padding: 10px;
      a {
        text-decoration: none;
        @include colorFont;
      }
    }
  }
}

Hoặc có thể truyền tham số vào, bạn có thể hình dung giống như cách truyền params vào method.

Ví dụ:

@mixin colorFont($color, $fontSize) {
  color: $color;
  font-size: $fontSize;
}

.navbar {
  ul.menu {
    list-style: none;
    li {
      padding: 10px;
      a {
        text-decoration: none;
        @include colorFont(#000000, 20px);
      }
    }
  }
}

Extends

Bạn sẽ định nghĩa ra các class, rồi chỗ nào cần sử dụng nó thì extend vào. Việc này sẽ tối ưu rất nhiều những đoạn code thừa, code lặp đi lặp lại đó bạn.

Ví dụ:

$whiteColor: #FFFFFF;
$blackColor: #000000;

.title {
  color: $whiteColor;
  text-shadow: 1px 1px 1px $blackColor;
  display: inline-block;
  text-transform: uppercase;
}
.navbar {
  ul.menu {
    list-style: none;
    li {
      padding: $padding_5;
      a {
        text-decoration: none;
        @extend .title;
      }
    }
  }
}

Import

Nếu bạn là dev hay sử dụng bootstrap chắc rằng bạn sẽ biết tới cú pháp import này của SASS. Các thành phần trên website sẽ được bóc tách thật nhỏ, mỗi file .sass or .scss sẽ style cho những đối tượng cụ thể. Ví dụ: _buttons.scss, _ads.scss, _colors.scss,...

Những thành phần được bóc tách ở dạng common, sau đó sẽ được import vào 1 file chính.

Ví dụ:

@import 'buttons';
@import 'ads';
@import 'colors';

// code sass here

Compile SASS

Sau khi viết được những dòng code ngắn gọn và đẹp như vậy bạn cần compile ra .css or .min.css để chạy trên browser. Việc compile này sẽ cần phần mềm để compile. Mình thì thường sử dụng: Koala và Extensions của Visual Studio Code - Easy Sass

1. Koala

  • Đây là phần mềm dùng để compile CSS Preprocessor như SASS, LESS... mình khá thường dùng nó khi viết SASS.
  • Bạn có thể tải và cài đặt nó tại đây: http://koala-app.com/

2. Extensions Easy Sass

  • Nếu bạn sử dụng Visual Studio Code thì có thể tìm và cài đặt Easy Sass trong phần Extensions. Khi bạn viết sass or scss chỉ cần thực hiện lưu file là nó tự động compile sang .css và .min.css
  • Install package SASS này rất đơn giản trong Terminal của VSCode: npm install -g sass

Quá đơn giản phải không nào các bạn?

Kết luận

Những phần mình giới thiệu cho các bạn là những cú pháp cơ bản nhất để viết CSS bằng SASS/SCSS, nếu có thời gian và muốn tìm hiểu sâu hơn các bạn tìm hiểu về những CSS Preprocessor. Hy vọng những phần chia sẻ nhỏ này của mình sẽ giúp được phần nào cho các bạn trong quá trình gỡ rối với css. Bắt đầu luôn với SASS/SCSS nha các bạn, để có những dòng code chuyên nghiệp!

Chúc các bạn thành công!