Bao gồm scss

chào các bác, e có file scss folder ở dưới. Bây giờ bản đồ thế nào để tất cả vào tệp chính. css on. Cảm ơn các bác đã giúp đỡ. 0 26 1

Thêm một bình luận

hiêu nguyễn

---

Yêu cầu ngày 1 tháng 4 năm 2020 4. 49 SA

Yêu cầu ngày 1 tháng 4 năm 2020 4. 49 SA• 266 0 1

Yêu cầu ngày 1 tháng 4 năm 2020 4. 49 SA• 266 0 1

+4

1. 266 0 1

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

0

1. SCSSCSSWordpress
   Bạn có thể tham khảo tài liệu bằng nút-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, cách sử dụng bạn xem ở 2 liên kết sau.
   https. //tạo-phản ứng-ứng dụng. dev/docs/adding-a-sass-stylesheet/ https. // stackoverflow. com/questions/31448114/how-to-compile-or-convert-sass-scss-to-css-with-node-sass-no-ruby
   Xin chào hy vọng nó đã giải quyết được vấn đề .

Nghiêm Xuân Hiển @nghiem. xuan. hiền @nghiem. xuan. hiền

943 39 0 3 39 0 3

hieu nguyen @hieuhumg @hieuhumg •

Thg 1 5, 2020 3. 27CH

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

Giống như

/libs
/components
/views

3 nếu bạn có mã tệp SCSS có tên

/libs
/components
/views

4 thì có thể tải nội dung của nó vào tệp scss hiện tại bằng

/libs
/components
/views

5

@import '/lib/file.scss'

Bằng cách đó, bạn có thể phân chia dự án SCSS thành các tệp nhỏ, mỗi tệp chứa một mô-đun chức năng nào đó, sau đó tổng hợp lại trong một tệp SCSS chính

Lưu ý rằng, các tệp nhỏ

/libs
/components
/views

6 thông thường trong dự án, nếu đưa vào các giám sát viên thay đổi và tự động chuyển dịch SCSS thành CSS như

/libs
/components
/views

7 thì các tệp nhỏ đó cũng được chuyển dịch thành CSS như tệp chính

Nhiều trường hợp tệp nhỏ chỉ là một phần của tệp chính, nó không thể hoạt động đúng nếu sử dụng độc lập, lúc này biên dịch có thể dẫn đến lỗi. Trong trường hợp như vậy, hãy đặt tên tệp với ký tự đầu tiên là

/libs
/components
/views

8 để đảm bảo rằng tệp đó không được dịch (nó chỉ được nhập vào tệp khác)

Ví dụ có file

/libs
/components
/views

9 thì file này sẽ không tự động chuyển thành SCSS mà chỉ sử dụng để nhập vào các file khác, vẫn theo cú pháp

/libs/_reset.scss        //thiết lập mặc định cho mọi trình duyệt
/libs/_variables.scss    //khai báo các biến
/libs/_mixins.scss       //khai báo các mixin
/libs/_gridset.scss      //khai báo bố cục lưới layout

0

Tổ chức các tệp dự án SCSS

Để dễ dàng quản lý dự án, hãy thử chia nhỏ chức năng, mục đích, ý nghĩa thành các tệp theo một cách hợp lý. Ví dụ như gợi ý sau

Partition directory

Có thể gom các tệp thành các phần như thư viện trong thư mục

/libs/_reset.scss        //thiết lập mặc định cho mọi trình duyệt
/libs/_variables.scss    //khai báo các biến
/libs/_mixins.scss       //khai báo các mixin
/libs/_gridset.scss      //khai báo bố cục lưới layout

1, các tệp thành phần chức năng chuyên biệt trong thư mục

/libs/_reset.scss        //thiết lập mặc định cho mọi trình duyệt
/libs/_variables.scss    //khai báo các biến
/libs/_mixins.scss       //khai báo các mixin
/libs/_gridset.scss      //khai báo bố cục lưới layout

2, kết quả chính tại

/libs/_reset.scss        //thiết lập mặc định cho mọi trình duyệt
/libs/_variables.scss    //khai báo các biến
/libs/_mixins.scss       //khai báo các mixin
/libs/_gridset.scss      //khai báo bố cục lưới layout

3

/libs
/components
/views

Thư mục /libs

Lưu các scss sử dụng xuyên suốt dự án, ví dụ

/libs/_reset.scss        //thiết lập mặc định cho mọi trình duyệt
/libs/_variables.scss    //khai báo các biến
/libs/_mixins.scss       //khai báo các mixin
/libs/_gridset.scss      //khai báo bố cục lưới layout

Thư mục /thành phần

Lưu trữ các thành phần cơ bản của giao diện SCSS, ví dụ

/libs
/components
/views

5

Thư mục /views

Chứa kết quả tổng hợp, ví dụ

/libs
/components
/views

6

Chú thích SCSS

Chú thích là các dòng văn bản không ảnh hưởng đến mã SCSS, có hai loại. chú thích trên một dòng

/libs/_reset.scss        //thiết lập mặc định cho mọi trình duyệt
/libs/_variables.scss    //khai báo các biến
/libs/_mixins.scss       //khai báo các mixin
/libs/_gridset.scss      //khai báo bố cục lưới layout

4 và chú thích nhiều dòng

/libs/_reset.scss        //thiết lập mặc định cho mọi trình duyệt
/libs/_variables.scss    //khai báo các biến
/libs/_mixins.scss       //khai báo các mixin
/libs/_gridset.scss      //khai báo bố cục lưới layout

5

/libs
/components
/views

9

Sử dụng Media query - @media trong SCSS

Như đã biết trong

/libs
/components
/views

3,

/libs/_reset.scss        //thiết lập mặc định cho mọi trình duyệt
/libs/_variables.scss    //khai báo các biến
/libs/_mixins.scss       //khai báo các mixin
/libs/_gridset.scss      //khai báo bố cục lưới layout

7 được sử dụng để truy vấn để biết các loại thiết bị khác nhau, với mỗi loại thiết bị truy vấn được áp dụng mã

/libs
/components
/views

3 phù hợp