Làm cách nào để thiết lập tệp scss?

Nếu bạn ở đây, tôi sẽ cho rằng bạn đã biết Sass là gì và chỉ muốn làm điều chết tiệt đó

Hướng dẫn này cũng dành riêng cho cú pháp .scss của Sass

• Điều này giả định rằng bạn đã có tệp package.json. Nếu không, hãy chạy npm init và nhập thông qua các giá trị mặc định

• Chạy

    "scripts": {
      "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
    },
  

  0 để cài đặt node-sass

Thiết lập cấu trúc tệp của bạn ⚙

• Trong thư mục gốc của bạn, tạo một thư mục

    "scripts": {
      "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
    },
  

  1 với một thư mục

    "scripts": {
      "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
    },
  

  2 và một thư mục

    "scripts": {
      "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
    },
  

  3

• Trong

    "scripts": {
      "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
    },
  

  4, tạo tệp

    "scripts": {
      "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
    },
  

  5

• Trong

    "scripts": {
      "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
    },
  

  6, tạo tệp

    "scripts": {
      "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
    },
  

  7
  

________số 8_______

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xem phần để biết thêm chi tiết về cấu trúc tệp được đề xuất

Xem các thay đổi đối với tệp Sass 🔍

• Trong package.json, trong phần

    "scripts": {
      "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
    },
  

  9 thêm

  @import "test/test";
  

  0 như vậy

  "scripts": {
    "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
  },

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cờ theo dõi

@import "test/test";

1 yêu cầu nút-sass xem tệp

  "scripts": {
    "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
  },

5 trong thư mục

@import "test/test";

3 để biết các thay đổi và xuất chúng trong

  "scripts": {
    "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
  },

7 trong thư mục style/css

Điều này cũng giả sử thư mục

  "scripts": {
    "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
  },

1 của bạn nằm trong thư mục gốc. Bạn có thể cần điều chỉnh các đường dẫn tệp này nếu bạn đang sử dụng thứ gì đó như React hoặc Vue và có thư mục

  "scripts": {
    "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
  },

1 của bạn trong thư mục

@import "test/test";

7 chẳng hạn

• Trong trường hợp thiết bị đầu cuối, hãy chạy

  @import "test/test";
  

  8 để theo dõi các thay đổi đối với. scss và tự động biên dịch chúng thành css

Một phần 🔸

Điều duy nhất trong thư mục

  "scripts": {
    "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
  },

Tất cả các phần bắt đầu bằng dấu gạch dưới (_)

• Tạo một thư mục khác trong thư mục

  $red: red; // declare a variable
  
  h1 {
    color: $red;
  }
  

  0 của bạn, chẳng hạn như

  $red: red; // declare a variable
  
  h1 {
    color: $red;
  }
  

  1

• thêm một. scss trong thư mục /test chẳng hạn như

  $red: red; // declare a variable
  
  h1 {
    color: $red;
  }
  

  2

• Nhập một phần tệp vào tệp

    "scripts": {
      "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
    },
  

  5 của bạn
  

@import "test/test";

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn không cần bao gồm dấu gạch dưới hoặc phần mở rộng tệp khi nhập

Kiểm tra nó ra 🧪

• Trong tệp

  $red: red; // declare a variable
  
  h1 {
    color: $red;
  }
  

  2 của bạn, hãy thêm nội dung nào đó như

$red: red; // declare a variable

h1 {
  color: $red;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

• Lưu các tập tin. Bạn sẽ không thấy bất kỳ lỗi nào trong thiết bị đầu cuối nếu sass được biên dịch thành công. Bạn sẽ thấy h1s trên trang của mình cập nhật thành màu đỏ. Nếu bạn truy cập

  $red: red; // declare a variable
  
  h1 {
    color: $red;
  }
  

  5, bạn sẽ thấy css đã biên dịch

h1 {
  color: red;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

• Nếu bạn không thấy bản cập nhật màu hoặc CSS đã biên dịch, hãy đảm bảo rằng bạn đang chạy

  @import "test/test";
  

  8 trong phiên bản đầu cuối

Sắp xếp tệp Sass 📚

Có nhiều cách để sắp xếp các tệp Sass của bạn và nó thực sự phụ thuộc vào sở thích cá nhân

Kiến trúc 7-1 là một cấu trúc phổ biến cho các dự án lớn hơn, mặc dù cá nhân tôi thấy nó hơi quá mức cần thiết cho các dự án cá nhân nhỏ hơn

Tuy nhiên, bạn sẽ cảm ơn chính mình vì đã có sẵn một kiến ​​trúc tệp vững chắc nếu dự án của bạn ngày càng phát triển hoặc mở rộng quy mô.

Làm cách nào để thiết lập SCSS trong HTML?

Làm cách nào để chuyển đổi tệp CSS thành SCSS?