Hướng dẫn scss in js - scss in js

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học SCSS
• Biên dịch SCSS sang CSS

Biên dịch SCSS sang CSS

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

• Cài đặt SCSS
• Ví dụ: biên dịch SCSS sang CSS
• 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, ...

Cài đặt SCSS

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

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, ... (Báo gì kệ nó, chưa cần quan tâm ^^):

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

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

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.
• 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ổ

  scss style.scss style.css

  2 (nhấn tổ hợp phím

  scss style.scss style.css

  3, gõ

  scss style.scss style.css

  2, 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 ^^):

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

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

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

Tạo file

scss style.scss style.css

5 bên trong thư mục

scss style.scss style.css

6.

Thêm nội dung thử nghiệm cho file

scss style.scss style.css

5.

scss style.scss style.css

• Chạy lệnh biên dịch SCSS sang CSS.

Tạo file

scss style.scss style.css

5 với nội dung sau:

Từ cửa sổ

scss style.scss style.css

2 ta trỏ tới thư mục

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

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

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

• Trỏ tới ổ đĩa

  section {
    background-color: #f1f1f1;
  }
  section h2 {
    color: blue;
  }
  
  /*# sourceMappingURL=style.css.map */

  1:

Hướng dẫn học SCSS, nội dung bài học đơn giản, khoa học giúp bạn cài đặt, tự động thực thi file CSS chỉ với thao tác save, giúp bạn làm quen với các nội dung của SCSS một cách nhanh chóng và dễ hiểu nhất.

• SCSS là gì? - giúp bạn hiểu được SCSS có thể làm gì.
• Biên dịch SCSS sang CSS - hướng dẫn cài đặt từ con số 0.
• SCSS auto compile - hướng dẫn cài đặt tự động biên dịch SCSS sang CSS.
• Cú pháp viết SCSS - hướng dẫn cách viết cấu trúc.
• SCSS - biến (variable) - khai báo và xử lý biến.
• SCSS - toán tử (oparator) - tính toán.
• SCSS - Nesting - cách viết phân cấp.
• SCSS - @extend - kế thừa thuộc tính.
• SCSS - @mixin & @include - khai báo và kế thừa kết hợp đối số.
• SCSS - Placeholders - khá giống @mixin, tuy nhiên sẽ gom các thành phần có cùng Placeholders lại với nhau.
• SCSS - @function - hướng dẫn tạo và gọi hàm.
• SCSS - câu lệnh @if @else - hướng dẫn cách viết câu lệnh if.
• SCSS - vòng lặp @for - hướng dẫn cách viết vòng lặp for.
• SCSS - vòng lặp @while - hướng dẫn cách viết vòng lặp while.
• SCSS - vòng lặp @each - hướng dẫn cách viết vòng lặp each.
• SCSS - @import - kết hợp các file SCSS.

Bắt đầu học SCSS thôi

Chúng ta có nhiều cách để setup (install) SASS trên máy tính của mình. Cũng có một vài công cụ open source giúp bạn bắt đầu với SASS chỉ trong vài phút. Bạn cũng có thể sử dụng Command line hoặc sử dụng  GitHub repository.... Tuy nhiên chúng ta sẽ chọn phương án tốt nhất để thực hiện, phương án đó là gì? hãy cùng mình đi tìm hiểu ngay bây giờ nhé. GitHub repository.... Tuy nhiên chúng ta sẽ chọn phương án tốt nhất để thực hiện, phương án đó là gì? hãy cùng mình đi tìm hiểu ngay bây giờ nhé.

Chuẩn bị

Bạn phải chắc chắn là đã cài Node Js và NPM ở trên máy của mình rồi nhé. Nếu bạn chưa cài Node Js và NPM thì xem hướng dẫn tại đây (thông thường sau khi cái NodeJs thì NPM cũng được cài cùng luôn)Node Js và NPM ở trên máy của mình rồi nhé. Nếu bạn chưa cài Node Js và NPM thì xem hướng dẫn tại đây (thông thường sau khi cái NodeJs thì NPM cũng được cài cùng luôn)

Về chương trình viết code bạn có thể sử dụng Sublime text hoăc VS Code tùy theo thói quen của mỗi người.Sublime text hoăc VS Code tùy theo thói quen của mỗi người.

Cài đặt SASS

Chúng ta sẽ sử dụng NodeJs và cài qua NPM command. Vì hầu hêt các bạn đều sử dụng window nên hướng dẫn này mình thực hiện trên window.NPM command. Vì hầu hêt các bạn đều sử dụng window nên hướng dẫn này mình thực hiện trên window.

Step 1: Mở command line Mở command line

Step 2: Cài sass global: Cài sass global

npm install -g sass

Chạy lệnh sau để kiểm tra version của Sass

sass --version

Kết quả

Chạy chương trình Sass đầu tiên

Trong thư mục

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

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

8 của ổ C. Các bạn tạo một thư mục

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

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

9 như sau ổ C. Các bạn tạo một thư mục

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

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

9 như sau

Mở Sublime text lên và thêm thư mục

npm install -g sass

0vào phần quản lý project của Sublime text như sau

Kết quả

Chạy chương trình Sass đầu tiên

File index.htmlindex.html

<html>
<head>
	<title>Giáo trình Sass tại suntech.edu.vntitle>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
head>
<body>
	<nav>
		<ul>
			<li><a href="#">Homea>li>
			<li><a href="#">Abouta>li>
			<li><a href="#">Newsa>li>
			<li><a href="#">Producta>li>
			<li><a href="#">Contacta>li>
		ul>
	nav>
body>
html>

File app1.scssapp1.scss

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

File app2.sassapp2.sass

nav
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block
  a
    display: block
    padding: 6px 12px
    text-decoration: none

Các bạn thấy, chúng ta chưa hề có file css/style.css. File đó sẽ được tạo ra sau khi chúng ta sử dụng câu lệnh sass để compile file

npm install -g sass

2 hoặc

npm install -g sass

3 sang file

npm install -g sass

4css/style.css. File đó sẽ được tạo ra sau khi chúng ta sử dụng câu lệnh sass để compile file

npm install -g sass

2 hoặc

npm install -g sass

3 sang file

npm install -g sass

4

"stylesheet" type="text/css" href="./css/style.css" />

Bây giờ chúng ta sẽ compile lần lượt các file

npm install -g sass

5 và

npm install -g sass

6 để chạy thử nhé

Truy cập vào thư mục demo1
cd demo1

Compile file app1.scssapp1.scss

Thự hiện lệnh

scss style.scss style.css

0

Sau khi compile xong các bạn sẽ thấy có 2 file được sinh ra là style.css và

npm install -g sass

7style.css và

npm install -g sass

7

Chạy file

npm install -g sass

8 lên các bạn được kết quả như sau

Compile file app2.sassapp2.sass

Trước khi tiến hành

npm install -g sass

9các bạn xóa thư mục css trong demo1 đicss trong demo1 đi

Sau đó thực hiện lệnh

scss style.scss style.css

1

Chúng ta được kết quả tương tự

Chạy file

npm install -g sass

8

Tổng kết

Qua bài này các bạn có cái nhìn rõ hơn về cơ chế hoạt động của SASS và nắm được câu lệnh compile code khi dùng SASS. Mặc dù hai định dạng file khác nhau .scss hay .sass thì câu lệnh compile là như nhau.SASS và nắm được câu lệnh compile code khi dùng SASS. Mặc dù hai định dạng file khác nhau .scss hay .sass thì câu lệnh compile là như nhau.

Trong thực tế chúng ta chỉ lựa chọn 1 trong hai định dạng file tùy thuộc vào thói quen của từng bạn hay quy định của từng project. Nếu muốn code ngắn gọn thì dùng

sass --version

1 nếu muốn code có style giống CSS thuần thì chọn

sass --version

2

Mình sẽ dừng bài viết ở đây, có bất kỳ câu hỏi nào các bạn hãy comment xuống dưới hoặc chat trực tiếp lên Fanpage của SUNTECH VIỆT NAM. Ở bài tiếp theo chúng ta sẽ tìm hiểu về Các cú pháp cơ bản trong SASS