Biên dịch SCSS sang CSS

Biên dịch SCSS sang CSS

Có nhiều cách biên dịch (compile) từ SCSS sang CSS khác nhau. Trong bài bày, tôi sẽ liệt kê một số cách mà bạn có thể sử dụng để chuyển code từ scss sang css.

updated July 05, 2024348 views

Có nhiều cách biên dịch (compile) từ SCSS sang CSS khác nhau. Dưới đây, tôi sẽ liệt kê một số cách mà bạn có thể sử dụng để chuyển code từ scss sang css.

Sử dụng VSCode dịch SASS sang CSS

Nếu bạn đang sử dụng Visual Studio Code thì bạn có thể sử dụng extensions của VSCode:

  1. Cài đặt và sử dụng tiện ích mở rộng Live Sass Compiler.

  2. Mở Setting (Ctrl+, chọn Live Sass Compiler và chọn Edit in settings.json) và thêm đoạn code sau:

     "liveSassCompile.settings.formats": [
   {
     "format": "expanded",
     "extensionName": ".css",
     "savePath": "/",
   }
 ],

  3. Click vào Watch Sass ở thanh dưới cùng (thanh trạng thái) của VSCode.

  4. Mỗi khi bạn lưu hoặc thực hiện một số thay đổi /sass/style.scss thì /style.css sẽ tự động được cập nhật.

Sử dụng Gulp dịch SASS sang CSS

Sử dụng gulp

npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js
gulp --help

# then use
sass --watch <scss folder>:<css folder>

Sử dụng Ruby dịch SASS sang CSS

  1. Cài đặt ruby

  2. Cập nhật ruby ​​(nếu bạn đã cài đặt nó rồi) và cài đặt compass.

    gem update --system
gem install compass

  3. cd đến thư mục bạn làm việc.

  4. Tạo một thư mục có tên là sass trong thư mục gốc.

  5. Tạo một file config.rb và copy đoạn mã sau vào:

    http_path = "/" #root level target path
css_dir = "." #targets our default style.css file at the root level of our theme
sass_dir = "sass" #targets our sass directory
images_dir = "images" #targets our pre existing image directory
javascripts_dir = "js" #targets our JavaScript directory

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions.
# note: this is important in wordpress themes for sprites

relative_assets = true

  6. Bên trong thư mục sass, tạo một thư mục có tên _partials và các file.scss sẽ nằm trong thư mục này.

  7. Bên trong thư mục sass, tạo một file có tên style.scss, sau mỗi lần sửa đổi, file này sẽ được compass và ghi đè lên file style.css trong thư mục gốc. Trong nội dung của file này, bạn đặt:

    @import "compass";
@import "_partials/font"; //font là font.scss trong thư mục _partials
    Cấu trúc thư mục như sau
    file.scss
    config.rb
    style.css

  8. Sử dụng Terminal và chạy lệnh sau:

    compass watch

    Từ bước này, mỗi khi bạn sửa đổi style.scss hoặc các file trong thư mục _partials , compass sẽ tự động cập nhật các thay đổi và ghi đè lên file style.css trong thư mục gốc.