- vừa được xem lúc

SCSS là gì ? Sự khác biệt của SCSS và CSS

0 0 25

Người đăng: Tuấn Kiệt

Theo Viblo Asia

Mức độ có thể tìm hiểu :

  • 30' đọc docs có thể tìm hiểu

Có cần thiết :

  • RẤT CẦN THIẾT

Ưu điểm :

  • Quản lí css chưa bao giờ dễ như này
  • Dễ bảo trì , mở rộng dự án
  • Làm việc nhóm dễ dàng , tránh xung đột code
  • Code nhanh hơn 10000%

Nhược điểm :

  • Cần dev phải có kinh nghiệm để dựng cấu trúc hợp lí ( khắc phục = cách lên github lấy của dev khác)
  • Gặp 1 số trường hợp ko nên có khi code

Bắt đầu thôi !!


  1. Mục tiêu đề ra ?
  2. SCSS là gì ?
  3. Các sử dụng nó trong dự án thực tế

1.Mục tiêu đề ra

[*] Bài viết này mục đích nhầm giới thiệu qua SCSS cho những người mới bắt đầu nên ở bài viết này sẽ hạn chế đề cập tới code mà chỉ là chia sẽ của mình về cách mình dùng SCSS như thế nào thôi . Gets go !!

2.SCSS

Link trang chủ : https://sass-lang.com/guide

[*] Scss là trình biên dịch trước khi biến code của bạn ra CSS . Nhờ điều này nó làm cho SCSS có những sức mạnh hơn CSS nhiều

[*] Bạn có thể tưởng tượng :

  • CSS : Ví CSS là viên đá quý bạn sẽ bán cho khách hàng, việc bạn code trên css giống như không qua máy móc mà bạn trực tiếp đè viên đá đó mà chỉnh sửa vậy , đẹp thì không sao chứ xấu thì thôi rồi ..

  • SCSS : Còn SCSS như bộ khung máy bạn dựng lên để chỉnh sửa viên đá quý đó ra 1 cách đẹp nhất khi đến tay sản phầm

[*] Bạn cảm thấy khó hiểu để mình đưa ra 1 ví dụ nhé 😉

Oh ! theo ví dụ trên bạn có thể thấy khi bạn viết SCSS nó sẽ tự động sinh ra 1 file CSS cho chúng ta và chúng ta sử dụng nó mà khoan có phải bên SCSS chúng ta có thểm làm phép cộng không

3.Cách sử dụng SCSS trong dự án

[*] Tuỳ trường hợp chúng ta sẽ có những cách dùng khác nhau như sử dụng SCSS với HTML/JS, trong các ReactJS/VueJS

Ở bài viết tiêp theo mình sẽ giới thiệu qua các bạn cấu trúc file SCSS để bạn có thể kéo về và sử dụng 1 cách sướng nhất có thể 😄

Bình luận

Bài viết tương tự

- vừa được xem lúc

Căn giữa các phần tử HTML theo chiều dọc (phần 1)

Bài viết được dịch từ bài Vertical centering of elements in HTML xuất bản ngày 18/01/2015 trên trang Web++. .

0 0 79

- vừa được xem lúc

Căn giữa phần tử trong CSS

1. Theo chiều ngang. Đó có phải là phần tử inline hay inline-* (như text hay links). .

0 0 66

- vừa được xem lúc

99% không biết đến mẹo này khi sử dụng Flexbox CSS

Hello lại là mình đây. Bài viết hôm nay mình sẽ giới thiệu tới mọi người một trick khá hay khi dùng CSS flexbox nhé. 1. Chia layout với flexbox.

0 0 62

- vừa được xem lúc

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 72

- vừa được xem lúc

1 số UI component và layout hữu ích với Frontend

Giới thiệu. Hôm nay mình xin chia sẻ 1 số Layout và UI component quen mà có lẽ là quen thuộc với nhiều người khi làm dự án, hay bắt gặp trên mạng.

0 0 65

- vừa được xem lúc

Style text css

Giới thiệu. Chào 2021, mình sẽ giới thiệu vài kiểu style cho text màu mè chút cho rực rỡ .

0 0 44