STDIO
Tìm kiếm gần đây
    Nội dung
    0
    0
    Chia sẻ
    Nội dung
    0
    0
    Chia sẻ

    SASS và Các Cú Pháp Cơ Bản

    Sass - Syntactically Awesome Style Sheets là 1 mở rộng của CSS, là 1 trong các cách để tiền xử lý CSS, giúp tổ chức và phát triển code CSS gần gũi như những ngôn ngữ lập trình cơ bản. Nó cho phép sử dụng các biến, hàm và một số syntax khác như: nested rules, mixins, inline imports, ... Sass hỗ trợ 2 loại cú pháp SASS và SCSS với những ưu điểm và nhược điểm nhất định tùy thuộc vào dự án đang phát triển.
    06/01/2015 26/08/2020 2 phút đọc
    SASS và Các Cú Pháp Cơ Bản

    SCSS và định nghĩa biến

    SCSS cho phép định nghĩa 1 biến theo cú pháp:

     $<variable-name>: <data>
    • variable-name: tên biến
    • data: giá trị của biến

    Sass hỗ trợ 8 kiểu dữ liệu:

    • Kiểu số: số nguyên, số thực, px (1.5; 27; 16px)
    • Kiểu chuỗi: có thể đặt trong dấu nháy đơn, nháy kép hoặc không ("abc", 'xyz', mno)
    • Màu sắc: blue, #ff8800, rgba(255, 0, 0, 0.5)
    • Booleans: true, false
    • Nulls: null
    • Danh sách các giá trị được phân cách bởi khoảng trắng hoặc dấu phẩy
    • Hàm phụ thuộc

    Ví dụ:

    $main-color: #ff8800;
    $main-font: 'Arial';
    
    h1.title {
       font: $main-font;
       color: $main-color;
    }
    

    Khi chuyển sang CSS

    h1.title {
       font: 'Arial';
       color: #ff8800;
    }
    

    Toán tử

    • Toán tử so sánh: ==, !=, <, >, <=, >=
    • Toán tử tính toán: +, -, *, /, %

    Để sử dụng biến trong Sass, có thể sử dụng #{} để thêm biến vào phép tính như một toán hạng. 

    Ví dụ:

    p {
      $font-size: 12px;
      $line-height: 30px;
      font: #{$font-size}/#{$line-height};
    }

    Sau khi chuyển đổi được được CSS như sau:

    p {
      font: 12px/30px; 
    }

    Quy tắc lồng nhau

    Khi viết HTML, bạn có thể nhận thấy rằng nó có 1 hệ thống phân cấp rõ ràng và trực quan. Với SASS chúng ta có thể đặt CSS cho các một đối tượng được nằm bên trong đối tượng cha của nó.

    Ví dụ:

    #main div {
      background-color: #ff8800;
      width: 100%;
    
      .redbox {
        background-color: #ff0000;
        color: #000000;
      }
    }

    Sẽ được chuyển thành

    #main div {
      background-color: #ff8800;
      width: 100%; 
    }
    
     #main div .redbox {
        background-color: #ff0000;
        color: #000000; 
    }
    

    Khi sử dụng quy tắc lồng nhau, có thể chỉ ra đối tượng parent của selector hiện tại bằng cách sử dụng ký hiệu: &, ví dụ:

    #main {
      color: black;
      p {
        font-weight: bold;
        &:hover { color: red; }
      }
    }

    Sau khi chuyển đổi thì & sẽ được thay thế bởi selector bên ngoài.

    #main {
      color: black; 
    }
    
    #main p {
      font-weight: bold; 
    }
    
    #main p:hover {
      color: red; 
    }

    Function

    Sass cung cấp 1 số hàm định nghĩa chức năng thông dụng trong CSS. Có thể tra cứu danh sách đầy đủ các hàm tại đây.

    Mixins

    Mixins cho phép định nghĩa 1 style và sử dụng lại nhiều lần trong suốt stylesheet.

    Kế thừa với extends

    Extends cho phép kế thừa các thuộc tính CSS của 1 selector, ngoài việc tăng tính tái sử dụng như mixins, extends còn giúp tạo ra 1 kết nối hợp lý giữa các class một cách cụ thể hơn trong HTML.

    Tích hợp thêm file .scss với inline imports

    Sass hỗ trợ CSS @import nhưng khác với CSS3, Sass kết hợp tất cả các file import ra thành một file duy nhất, hạn chế số lượng HTTP request đến server. Ngoài ra, các biến và mixins được định nghĩa trong những file được import đều có thể sử dụng trong file chính.

    0 Bình luận
    Khi bạn nhấn vào sản phẩm do chúng tôi đề xuất và mua hàng, chúng tôi sẽ nhận được hoa hồng. Điều này hỗ trợ chúng tôi có thêm kinh phí tạo nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO

    Trang chính

    Công ty TNHH STDIO

    • 30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
      +84 28.36205514 - +84 942.111912
      developer@stdio.vn
    • 383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
      Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012
    ©STDIO, 2013 - 2021