Hướng dẫn import file scss - nhập tệp tin

  • 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.

Ví dụ về SCSS @import

SCSSCSS

_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

SCSSCSS

_reset.scssreset.scss

p, 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

    1. 266 0 1
    @import "mystyle.css";
    @import url["mystyle.css"];
    
    1. 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

    hieu nguyen @hieuhumg @hieuhumg

    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

    Bài Viết Liên Quan

    Chủ Đề