- Trang chủ
- Hướng dẫn học
- Hướng dẫn học SCSS
- SCSS @import
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@import 'base'; .list { color: red; li { font-size: 14px; } }
0 và định dạng file@import 'base'; .list { color: red; li { font-size: 14px; } }
1.
- File import sẽ có dạng dấu gạch dưới ở trước tên file
Ví dụ về SCSS @import
_base.scssbase.scss.box { padding: 20px; line-height: 0; } style.scss@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
@import 'base'; .list { color: red; li { font-size: 14px; } }
2 đã được import vào@import 'base'; .list { color: red; li { font-size: 14px; } }
3.
SCSS @import nhiều file
_reset.scssreset.scssp, div { padding: 0; margin: 0; } _base.scssbase.scss.box { padding: 20px; line-height: 0; } style.scss@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
@import 'base'; .list { color: red; li { font-size: 14px; } }
2 đã được import vào@import 'base'; .list { color: red; li { font-size: 14px; } }
3. - SCSS @import nhiều file
hieu nguyen
Yêu cầu thg 1 4, 2020 4:49 SA
Yêu cầu thg 1 4, 2020 4:49 SA• 266 0 1• 266 0 1
- 266 0 1 0 1
0
SCSSCSSWordpress
clip
- 266 0 1 0 1
SCSSCSSWordpress
clip @hieuhumg
chào các bác, e có folder file scss ở dưới. Bây giờ map thế nào để tất cả vào file main.css ở trên. Cảm ơn các bác giúp đỡ! 0 26 1
Thêm một bình luận
hieu nguyen
Yêu cầu thg 1 4, 2020 4:49 SA
Yêu cầu thg 1 4, 2020 4:49 SA• 266 0 1
Yêu cầu thg 1 4, 2020 4:49 SA• 266 0 1
+4
- 266 0 1
@import "mystyle.css";
@import url["mystyle.css"];
- SCSSCSSWordpress
Bạn có thể tham khảo dùng node-sass. Có vẻ nó sẽ convert ở bước trung gian luôn, nên mình có thể dùng cú pháp @import cho scss.
Các bước hướng dẫn cài đặt, sử dụng bạn xem ở 2 link sau.
//create-react-app.dev/docs/adding-a-sass-stylesheet/ //stackoverflow.com/questions/31448114/how-to-compile-or-convert-sass-scss-to-css-with-node-sass-no-ruby
Hi vọng là nó giải quyết được vấn đề của bạn!
Nghiem Xuan Hien @nghiem.xuan.hien@nghiem.xuan.hien
943 39 0 3 39 0 3
thg 1 5, 2020 3:27 CH
Cảm ơn bác, mình dùng koala để compine nhưng khả năng thiếu file gì đó nên nó báo đường dẫn sai, mặc dù đường dẫn đúng
Thêm một bình luận