Biên dịch SCSS sang CSS – Phan Nhật Chánh

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:

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

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": "/",
   }
 ],

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

Click vào Watch Sass ở thanh dưới cùng (thanh trạng thái) của VSCode.
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>

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

Cài đặt ruby
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
```
Terminal
```
gem update --system
gem install compass
```
cd đến thư mục bạn làm việc.
Tạo một thư mục có tên là sass trong thư mục gốc.

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

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

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.
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
```
```
@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
Sử dụng Terminal và chạy lệnh sau:
Terminal
```
compass watch
```
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.

•••