Biên dịch 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ể:

  1. Cài đặt 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 của VSC.
  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 thu mục như sau:

    Folder
       |
       |__ sass
       |    |__ _partials
       |    |       |__ file.scss //các file scss
       |    |___style.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.

© 2019-2020 Phan Nhật Chánh