Chuyển SCSS sang CSS Online

Bài học này sẽ giúp bạn cài đặt SCSS biên dịch (compile) sang CSS, các bước tiến hành như sau.

• Cài đặt môi trường Node.js
• Cài đặt SCSS
• Ví dụ: biên dịch SCSS sang CSS

Cài đặt môi trường Node.js

• SCSS có nhiều cách cài đặt khác nhau, bạn có thể tạo file và nhờ các chương trình cài đặt khác hỗ trợ, tuy nhiên cách cài đặt và sử dụng với Node.js sẽ cho bạn nhiều lợi ích về sau, ví dụ như có thể cấu hình chạy trực tiếp cho môi trường thực,... sử dụng Node.js cho các ứng dụng web khác, ...
• Học Web Chuẩn sẽ giới thiệu các bạn cách làm việc của SCSS với Node.js nhé, các cách khác thì các bạn có thể tìm hiểu thêm he.
• Trước tiên bạn cần cài đặt Node.js theo các bước tại Hướng dẫn cài đặt Node.js.

Cài đặt SCSS

• Sau khi đã cài đặt xong Node.js như trên, ta tiến hành cài đặt SASS (SCSS) bằng dòng lệnh duy nhất: từ cửa sổ cmd (nhấn tổ hợp phím Window+R, gõ cmd, enter), sau đó gõ nội dung bên dưới:

Kết quả (Báo gì kệ nó, chưa cần quan tâm ^^):

• Vậy là cài xong SASS rồi đó, thử biên dịch (complile) SCSS sang CSS thôi ^^

Ví dụ: biên dịch SCSS sang CSS

Để thử nghiệm biên dịch SCSS sang CSS ta thực hiện theo các bước sau:

• Tạo file style.scss bên trong thư mục D:/scss-project/.
• Thêm nội dung thử nghiệm cho file style.scss.
• Chạy lệnh biên dịch SCSS sang CSS.

Tạo file style.scss với nội dung sau:

$color-blue: blue;
$bg-color: #f1f1f1;
section {
  background-color: $bg-color;
  h2 {
    color: $color-blue;
  }
}

• Từ cửa sổ cmd ta trỏ tới thư mục

  scss style.scss style.css

  1 bằng cách gõ lần lược các lệnh:

Trỏ tới ổ đĩa

scss style.scss style.css

2:

Di chuyển tới thư mục

scss style.scss style.css

1

Biên dịch SCSS sang CSS bằng lệnh:

scss style.scss style.css

• Khi này xem lại trong thư mục D:/scss-project/ ta sẽ thấy chương trình tự động tạo file

  scss style.scss style.css

  5 và

  scss style.scss style.css

  6, nội dung

  scss style.scss style.css

  5 chính là file CSS mà ta mong muốn xuất hiện.

Nội dung file

scss style.scss style.css

5

section {
  background-color: #f1f1f1;
}
section h2 {
  color: blue;
}

/*# sourceMappingURL=style.css.map */

• Như vậy là ta đã cài đặt và biên dịch thành công SCSS sang CSS.

Here's how you can convert your SASS files or SCSS stylesheet to precompiled CSS stylesheet using nodeJS:

1. Install SASS using npm install -g sass

Open a new terminal in your favorite code editor, for example Visual Studio Code and run the command below

npm install -g sass
    

2. Compile a SCSS string using compileString

You need to import the package using const sass = require('sass');

You can use the below code snippet to transform an SCSS string to a CSS string

var result = sass.compileString(
"my SCSS string"
);
    

Example:

var result = sass.compileString(
`
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
}
`);
    

This is going to return the result below:

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
}
    

3. Use sass.compile("Path to scss file")

If you have a scss file, save the script in step 2 in the same directory as your scss file and run the below command:

SASS to CSS Converter Online helps to convert plain SASS to CSS and helps to save and share SASS with CSS.

SASS is a dynamic stylesheet preprocessor language which converts sass code to CSS. To know more about SASS

What can you do with SASS to CSS Converter?

• This tool helps you to convert your SASS (Sassy CSS) to CSS (Cascading Style Sheets) with Ease.
• This tool allows loading the SASS URL converting to CSS. Click on the URL button, Enter URL and Submit.
• This tool supports loading the SASS File to transform to CSS. Click on the Upload button and select File.
• SASS to CSS Online works well on Windows, MAC, Linux, Chrome, Firefox, Edge, and Safari.

Example of SASS to CSS

SASS Try it.

$font-stack:    Helvetica, sans-serif
$primary-color: #123

body
  font: 100% $font-stack
  color: $primary-color

Converted CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #123; 
}

For Advanced Users

SASS External URL

Load SASS External URL in Browser URL like this https://codebeautify.org/sass-to-css-converter?url=external-url