Hướng dẫn config scss

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học SCSS
• Cài đặt SCSS tự động biên dịch code CSS

Cài đặt SCSS tự động biên dịch code CSS

• Sau khi cài đặt SCSS biên dịch được CSS như bài trước đã trình bày, bài học này sẽ giúp các bạn cài đặt tự động biên dịch SCSS sang CSS mà không cần mỗi lần save phải chạy lại câu lệnh thực thi.

Cấu hình SCSS tự động biên dịch CSS

• Để mỗi lần save file SCSS thì chương trình sẽ tự động biên dịch sang file CSS mà không cần chạy lại lệnh biên dịch, ta lần lược làm các bước sau:
  • Tạm thời xóa 2 file style.css và style.css.map đi, vì khi biên dịch sẽ tự động tạo file mới.
  • Cài đặt npm bên trong thư mục scss-project.
  • Cài đặt node-sass
  • Tạo file package.json
  • Chạy lệnh biên dịch tự động
• Cấu trúc thư mục hiện tại như sau:

scss-project

• 
  style.scss

Cài đặt npm bên trong thư mục scss-project:

• Khi này bên trong thư mục scss-project sẽ tự động tạo file package-lock.json là ta đã cài đặt thành công.

Cài đặt node-sass

• Khi này chương trình sẽ tự động tạo folder node_modules, nơi đây chứa các modules cần cho việc biên dịch.
• Ta có cấu trúc thư mục như sau:

scss-project

• node_modules

  • ...
• package-lock.json
• style.scss

Tạo file package.json

Cách tạo đơn giản nhất là copy từ file package-lock.json đặt lại tên package.json, sau đó thay đổi nội dung bên trong như sau:

{
  "dependencies": {
    "node-sass": "^4.7.2"
  },
  "scripts": {
    "scss": "node-sass --watch style.scss -o css"
  }
}

• style.scss tên file, hoặc nếu file bên trong thư mục thì ghi rõ luôn thư mục, ví dụ scss/style.scss.
• css tên thư mục sẽ được tạo tự động, file sẽ được lưu tại đây.

Chạy lệnh biên dịch tự động

• Tới đây ta đã hoàn thành cài đặt biên dịch tự động SCSS sang CSS, các bạn có thể thử bằng cách thay đổi code của file style.scss, save lại, ta sẽ thấy chương trình tự động biên dịch nội dung của file /css/style.css, mỗi lần thay đổi thì nội dung file style.css cũng thay đổi theo.
• Lưu ý: mỗi khi thay đổi nội dung file package.json, ví dụ như chỉnh lại tên thư mục lưu file css, thì ta cần chạy lệnh biên dịch, muốn vậy ta cần thoát mode cmd đang chạy bằng cách nhấn tổ hợp phím Ctrl + C, gõ y, sau đó chạy lại lệnh biên dịch tự động là được.
• Từ giờ, mỗi khi bạn muốn chạy lệnh tự động biên dịch, bạn cần trỏ tới scss-project và chạy lệnh biên dịch npm run scss.

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

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)

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.

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.

Step 1: Mở command line

Step 2: 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 hoc-sass của ổ C. Các bạn tạo một thư mục demo1 như sau

Mở Sublime text lên và thêm thư mục demo1 vào phần quản lý project của Sublime text như sau

Kết quả

Tiếp theo, trong thư mục demo1 chúng ta tạo các file sau:

File index.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.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.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 .sass hoặc .scss sang file .css

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

Bây giờ chúng ta sẽ compile lần lượt các file app1.scss và app2.sass để chạy thử nhé

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

Compile file app1.scss

Thự hiện lệnh

sass app1.scss css/style.css

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

Chạy file index.html lên các bạn được kết quả như sau

Compile file app2.sass

Trước khi tiến hành compile các bạn xóa thư mục css trong demo1 đi

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

sass app2.sass css/style.css

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

Chạy file index.html

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.

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 nếu muốn code có style giống CSS thuần thì chọn .scss

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