Học Sass trong 15 phút

Bài đăng này đã không được cập nhật trong 2 năm

Nếu bạn viết một lượng rất lớn về CSS, một bộ xử lý có thể làm giảm mức độ căng thẳng của bạn và giúp bạn tiết kiệm rất nhiều thời gian quý báu. Sử dụng các công cụ như Sass , less , Stylus hoặc PostCS . Làm stylesheets lớn , phức tạp dễ hiểu hơn và dễ dàng hơn để duy trì. Nhờ tính năng giống như các biến, function và mixins các mã sẽ trở nên có tổ chức hơn, cho phép các nhà phát triển web làm việc nhanh hơn và phạm sai lầm ít hơn.
Lần này chúng tôi sẽ giải thích cho bạn về Sass và một số tính năng chính của nó.

1. Bắt đầu

file Sass không được hiểu bởi trình duyệt, vì vậy ta cần phải biên dịch sang CSS trước khi đặt vào web. Đó là lý do tại sao bạn cần một số công cụ để giúp bạn biên dịch .scss thành .css. Ở đây bạn có một vài lựa chọn:
- Các giải pháp đơn giản là một công cụ trình duyệt để viết và biên soạn Sass ngay tại chỗ - SassMeister (http://www.sassmeister.com/)
- Sử dụng một ứng dụng trên máy tính như : CodeKit (Paid) ,Compass.app (Paid, Open Source), Koala (Open Source), Prepros (Paid)... . Cả hai phiên bản miễn phí và trả tiền có sẵn. Bạn có thể tìm hiểu thêm ở đây http://sass-lang.com/installCodeKit
- Ngoài ra, Sass cung cấp hai cú pháp riêng biệt - Sass và SCSS. Cả hai đều làm những điều tương tự, chỉ được viết bằng những cách khác nhau. SCSS là một phiên bản mới hơn và thường được coi là tốt hơn, vì vậy chúng ta sẽ tìm hiểu về nó. Nếu bạn muốn biết thêm thông tin về sự khác biệt giữa hai, hãy kiểm tra ở bài viết này http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better.

2. Biến

Các biến trong Sass làm việc trong một phong cách tương tự như những ngôn ngữ lập trình khác, bao gồm cả data types và scope. Khi định nghĩa một biến chúng ta lưu trữ bên trong nó một giá trị nhất định, thường là một cái gì đó mà thường sẽ tái xuất hiện trong CSS như một bảng màu, font, hoặc toàn bộ thông số kỹ thuật cho một box-shadow.
Dưới đây bạn có thể thấy một ví dụ đơn giản.

        $title-font: normal 24px/1.5 'Open Sans', sans-serif;
        $cool-red: #F44336;
        $box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

        h1.title {
          font: $title-font;
          color: $cool-red;
        }

        div.container {
          color: $cool-red;
          background: #fff;
          width: 100%;
          box-shadow: $box-shadow-bottom-only;
        }

khi chuyển sang css

        h1.title {
          font: normal 24px/1.5 "Open Sans", sans-serif;
          color: #F44336;
        }

        div.container {
          color: #F44336;
          background: #fff;
          width: 100%;
          box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
        }

Ý tưởng đằng sau tất cả điều này là chúng ta sau này tái sử dụng cùng một giá trị nhanh hơn, hoặc nếu sự thay đổi là cần thiết, chúng tôi có thể cung cấp giá trị mới chỉ trong một nơi , thay vì áp dụng nó một cách thủ công ở khắp mọi nơi.

3. mixins

Bạn có thể nghĩ mixins như một phiên bản đơn giản của các lớp xây dựng trong ngôn ngữ lập trình
bạn có thể lấy một nhóm toàn bộ CSS và tái sử dụng nó bất cứ nơi nào bạn muốn cho và tập hợp các yếu tố cụ thể.
Mixins thậm chí có thể chấp nhận đối số với các tùy chọn để thiết lập các giá trị mặc định.
Trong ví dụ dưới đây, chúng tôi xác định một square mixin, và sau đó sử dụng nó để tạo ra square kích thước và màu sắc khác nhau

        @mixin square($size, $color) {
          width: $size;
          height: $size;
          background-color: $color;
        }

        .small-blue-square {
          @include square(20px, rgb(0,0,255));
        }

        .big-red-square {
          @include square(300px, rgb(255,0,0));
        }

khi chuyển sang css

        .small-blue-square {
          width: 20px;
          height: 20px;
          background-color: blue;
        }

        .big-red-square {
          width: 300px;
          height: 300px;
          background-color: red;
        }

Một cách hiệu quả để sử dụng mixins là khi một thuộc tính yêu cầu phải làm việc trong tất cả các trình duyệt. Xem vd sau:

        @mixin transform-tilt() {
          $tilt: rotate(15deg);

          -webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
              -ms-transform: $tilt; /* IE 9 */
                  transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
        }

        .frame:hover {
          @include transform-tilt;
        }

chuyển sang css

        .frame:hover {
          -webkit-transform: rotate(15deg);  /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
          -ms-transform: rotate(15deg);  /* IE 9 */
          transform: rotate(15deg);  /* IE 10, Fx 16+, Op 12.1+ */
        }

4. Extend

Các tính năng tiếp theo chúng ta sẽ xem xét là @extend , cho phép bạn để kế thừa các thuộc tính CSS của một selector. Điều này hoạt động tương tự như hệ thống mixins, nhưng là ưa thích khi chúng ta muốn tạo ra một kết nối hợp lý giữa các yếu tố trên một trang.
Extend nên được sử dụng khi chúng ta cần các yếu tố kiểu tương tự, mà vẫn có sự khác biệt ở một số chi tiết. Ví dụ, chúng ta hãy làm cho hai nút thoại - một cho đồng ý và một cho hủy.

        .dialog-button {
          box-sizing: border-box;
          color: #ffffff;
          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
          padding: 12px 40px;
          cursor: pointer;
        }

        .confirm {
          @extend .dialog-button;
          background-color: #87bae1;
          float: left;
        }

        .cancel {
          @extend .dialog-button;
          background-color: #e4749e;
          float: right;
        }

 Chuyển sang css

        .dialog-button, .confirm, .cancel {
          box-sizing: border-box;
          color: #ffffff;
          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
          padding: 12px 40px;
          cursor: pointer;
        }

        .confirm {
          background-color: #87bae1;
          float: left;
        }

        .cancel {
          background-color: #e4749e;
          float: right;
        }

Nếu bạn kiểm tra phiên bản CSS của mã này, bạn sẽ thấy rằng Sass kết hợp các selector thay vì lặp lại những phần tương tự tiết kiệm bộ nhớ quý giá.

5. Nesting (lồng nhau)

HTML thường theo một cấu trúc lồng nhau (Nesting) chặt chẽ trong khi ở CSS nó thường là hỗn loạn. Với Sass bạn có thể tổ chức các stylesheet của bạn trong một cách tương tự như HTML chặt chẽ hơn, do đó làm giảm nguy cơ xung đột CSS.
xét ví dụ sau cho phép tạo một danh sách có chứa một số liên kết:

        ul {
          list-style: none;

          li {
            padding: 15px;
            display: inline-block;

            a {
              text-decoration: none;
              font-size: 16px;
              color: #444;
            }

          }
        }

khi ở css

        ul {
          list-style: none;
        }

        ul li {
          padding: 15px;
          display: inline-block;
        }

        ul li a {
          text-decoration: none;
          font-size: 16px;
          color: #444;
        }

6. Functions

Sass cung cấp rất nhiều danh sách trong các hàm. Họ cung cấp tất cả các loại mục đích bao gồm các chuỗi thao tác, các hoạt động liên quan đến màu sắc, và một số phương pháp toán học thuận tiện như random() và round().
chúng ta sẽ tạo ra một đoạn mã nhanh chóng mà sử dụng draken ($color, $amount) để làm cho một hiệu ứng khi di chuột.

        $awesome-blue: #2196F3;

        a {
          padding: 10 15px;
          background-color: $awesome-blue;
        }

        a:hover {
          background-color: darken($awesome-blue,10%);
        }

khi chuyển sang css

        a {
          padding: 10 15px;
          background-color: #2196F3;
        }

        a:hover {
          background-color: #0c7cd5;
        }

Ngoại trừ các danh sách lớn( http://sass-lang.com/documentation/Sass/Script/Functions.html) của các function có sẵn,bạn cũng có các tùy chọn để định nghĩa của riêng bạn. Sass hỗ trợ kiểm soát luồng tốt, vì vậy nếu bạn muốn, bạn có thể tạo ra những thứ phức tạp hơn.

kết luận

Tới đây thì mình nghĩ bạn đã nắm được cơ bản SASS rồi, và thực ra SASS cũng chỉ có vậy và thêm nhiều lệnh code khác nữa mà bạn có thể đọc thêm ở phần documentation của nó. Một lần nữa, nếu bạn đã có kinh nghiệm sử dụng CSS rồi thì mình khuyên bạn nên ứng dụng SASS vào việc viết code ngay.
Tôi đã giới thiệu sơ qua những ý chính về sass, nhưng vẫn còn nhiều hơn nữa để Sass. Nếu bạn muốn làm quen nhiều hơn với tất cả mọi thứ nó đã cung cấp, hãy làm theo những liên kết này:
- Tài liệu Sass http://sass-lang.com/documentation/file.SASS_REFERENCE.html
- Danh mục đầy đủ các chức năng của Sass http://sass-lang.com/documentation/Sass/Script/Functions.html
- Các hướng dẫn về Sass http://thesassway.com/

Một chút quảng cáo về design. mình thấy site này hướng dẫn làm Bootstrap Studio rất hay các bạn có thể tham khảo https://bootstrapstudio.io/