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": "/", } ],
-
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>
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.
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
-
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
Cấu trúc thư mục như saufile.scssconfig.rbstyle.css -
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 filestyle.css
trong thư mục gốc.