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

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

• Điều này giả định rằng bạn đã có tệp

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

  2. Nếu không, hãy chạy

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

  3 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 Tổ chức tệp Sass để 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

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

  2, trong phần

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

  9, hãy thêm

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

  00 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

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

01 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

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

03 để 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 kiểu/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

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

07 chẳng hạn

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

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

  08 để 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

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

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

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

  11

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

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

  12

• 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
  

  "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

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

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

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

  "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

• 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

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

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

  "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

• 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 có

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

  08 đang chạy 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 để đưa tệp SCSS vào HTML?

Làm cách nào để biên dịch tệp SCSS thành CSS?

Làm cách nào để cài đặt SCSS trong vscode?

Làm cách nào để kết nối Sass với CSS?