SCSS @import

• SCSS cung cấp một quy tắc @import thông qua quá trình biên dịch, không như @import của CSS yêu cầu request HTTP từ trình duyệt.
• Việc import SCSS sẽ đồng thời kết hợp các công thức nhận được để biên dịch thành file CSS.
• Việc import SCSS tuân thủ một số quy tắc:
  • File import sẽ có dạng dấu gạch dưới ở trước tên file _name.scss.
  • Nội dung import chỉ chứa name mà không có dấu gạch _ và định dạng file .scss.

Ví dụ về SCSS @import

.box {
    padding: 20px;
    line-height: 0;
}

@import 'base';
.list {
    color: red;
    li {
        font-size: 14px;
    }
}

.box {
    padding: 20px;
    line-height: 0;
}
.list {
    color: red;
}
.list li {
    font-size: 14px;
}

• Nhìn vào kết quả CSS, ta thấy nội dung file _base.scss đã được import vào style.scss.

SCSS @import nhiều file

p, div {
    padding: 0;
    margin: 0;
}

.box {
    padding: 20px;
    line-height: 0;
}

@import 'reset','base';
.list {
    color: red;
    li {
        font-size: 14px;
    }
}

p, div {
    padding: 0;
    margin: 0;
}
.box {
    padding: 20px;
    line-height: 0;
}
.list {
    color: red;
}
.list li {
    font-size: 14px;
}

• Nhìn vào kết quả CSS, ta thấy nội dung file _reset.scss và _base.scss đã được import vào style.scss.
• Tới đây ta đã kết thúc chuỗi bài học về SCSS, hi vọng sẽ giúp các bạn hiểu được phần nào nội dung của SCSS, tất nhiên SCSS vẫn còn nhiều điều khám phá, các bạn có thể vô trang chính thức của SCSS để tìm hiểu thêm nhé.