Hướng dẫn import trong scss

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

• 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

.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

  @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

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

  @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.
   https://create-react-app.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
   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