Biên dịch SCSS sang CSS

Biên dịch SCSS sang CSS

Phan Nhật Chánh

Chánh / 30 tháng 08, 2020

3 min read
·
views
·
likes

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.

    Terminal
    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:

    Cấu trúc thư mục
    folder
    sass
    _partials
    file.scss
    config.rb
    style.css
  8. Sử dụng Terminal và chạy lệnh sau:

    Terminal
    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.

Bạn cần phảiđể tiếp tục!

Đăng ký nhận thông báo qua Email

Tôi sẽ gửi email cho bạn khi tôi tạo ra một cái gì đó mới và tất nhiên là sẽ không có thư rác! 🙅‍♂️

subscribers· issues