STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    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
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích.. Tìm hiểu thêm.

    Đề xuất

    Các Thao Tác Cơ Bản Quản Lý Project Với Git
    Giới thiệu khái niệm và ưu điểm của Git. Hướng dẫn cài đặt và các thao ...
    05/08/2015
    Ruler - Công Cụ Đo Khoảng Cách Trên Windows
    Đối với ngành công nghiệp phần mềm, đặc biệt là trong kiến trúc, thiết ...

    Khám phá

    Định Dạng Ảnh Bitmap - Giới Thiệu và Các Thao Tác Cơ Bản
    Trong đời thường, bạn sẽ gặp các file ảnh có định dạng .PNG, .JPG, .TGA, ...
    Cơ Bản Về XML
    Giới thiệu XML. Cách biểu diễn dữ liệu trong XML, các lỗi cú pháp thường ...
    03/09/2015
    Thỏa Thuận Sử Dụng Dịch Vụ STDIO
    Thỏa thuận này quy định về điều kiện giao kết hợp đồng, quyền lợi, nghĩa ...
    Đọc và Ghi File trong Python
    Đọc và ghi file text với Python thông qua code ví dụ với các mode cơ bản ...
    28/03/2015
    Các Vấn Đề về Debug Cơ Bản
    Lập trình viên chính là các công cụ sinh ra Bugs nhiều nhất vì họ lập ...
    Đánh Dấu và Kiểm Tra Bản Quyền Tài Liệu Số
    Hướng dẫn 1 trong những phương pháp để đánh dấu bản quyền và kiểm tra ...
    LINQ to SQL - Giới Thiệu
    Giới thiệu LINQ to SQL, ý nghĩa và cú pháp cơ bản sử dụng LINQ to SQL ...
    Đọc Ghi File Cơ Bản Trong C#
    Hướng dẫn đọc và ghi file cơ bản sử dụng đối tượng File trong C#. Nhờ có ...
    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 - 2020