Những điều bạn cần biết về SCSS nếu muốn trở thành lập trình viên chuyên nghiệp

SCSS hay SASS đều là những kiến thức vô cùng quan trọng đối với người học IT. Để phát triển công việc hiệu quả đòi hỏi bạn cần biết cách sử dụng những công cụ này. Bài viết dưới đây giới thiệu SCSS là gì và các tính năng cơ bản của nó. Hãy cùng FPT Shop khám phá để trau dồi kiến thức cho bản thân nhé!

Giới thiệu một vài khái niệm cần biết

CSS Preprocessor là gì?

CSS Preprocessor là một công cụ hỗ trợ người viết CSS vô cùng hiệu quả bằng cách sử dụng cú pháp mở rộng và các tính năng mạnh mẽ hơn so với CSS thuần túy. Các CSS Preprocessor phổ biến nhất hiện nay bao gồm Sass, Less và Stylus.

• Sass: Sass (Syntactically Awesome Stylesheets) cho phép sử dụng biến, lồng ghép, mixins, kế thừa, và nhiều tính năng khác giúp tạo CSS dễ đọc, tái sử dụng và bảo trì.
• Less: Less là một ngôn ngữ mở rộng của CSS, hỗ trợ biến, lồng ghép, mixins, và các tính năng khác để tạo ra mã CSS dễ quản lý hơn.
• Stylus: Stylus sử dụng cú pháp linh hoạt với rất ít dấu ngoặc và dấu phẩy, cung cấp tính linh hoạt cao trong việc viết CSS.

Lợi ích của việc sử dụng CSS Preprocessor bao gồm:

• Viết mã CSS linh hoạt, dễ đọc và bảo trì hơn.
• Tăng tốc độ phát triển CSS bằng cách sử dụng biến, lồng ghép, mixins.
• Tích hợp các tính năng mới và cú pháp ngắn gọn hơn.
• Tạo CSS tối ưu và hiệu quả hơn.

SASS/SCSS là gì?

SASS (Syntactically Awesome Stylesheets) và SCSS (Sassy CSS) đều là thành phần CSS preprocessor mạnh mẽ. SASS ban đầu sử dụng cú pháp có dấu cách và có cú pháp riêng. Trong khi đó, SCSS sử dụng cú pháp tương tự như CSS được đánh giá là dễ học và dễ đọc hơn.

Bằng cách sử dụng SASS hoặc SCSS, bạn có thể tận dụng các tính năng mạnh mẽ như biến, lồng ghép, mixins... Mục đích nhằm tạo ra mã CSS linh hoạt, dễ bảo trì và tái sử dụng. Quá trình sử dụng Sass/SCSS giúp tối ưu hóa kỹ thuật phát triển CSS và cải thiện hiệu suất của mã CSS của bạn.

Vậy SCSS là gì?

SCSS là viết tắt của "Sassy CSS" và nó là một phần của Sass (Syntactically Awesome Stylesheets). SCSS là một cú pháp mở rộng của CSS có tác dụng hỗ trợ quá trình viết mã CSS trở nên dễ dàng và linh hoạt hơn. 

SCSS sử dụng cú pháp tương tự CSS. Tuy nhiên, nó cung cấp các tính năng mạnh mẽ như biến, lồng ghép, mixins và nhiều tính năng khác giúp tạo ra mã CSS dễ đọc, tái sử dụng và bảo trì.

Một điểm mạnh của SCSS là tích hợp hoàn hảo với CSS. Điều này có nghĩa là bất kỳ mã CSS nào đã tồn tại có thể được sử dụng trong các tập tin SCSS mà không cần bất kỳ sửa đổi nào. Tiện ích làm cho việc chuyển đổi từ CSS thông thường sang SCSS trở nên dễ dàng và không đòi hỏi quá nhiều thời gian.

Những tính năng quan trọng của SCSS

Xếp chồng – Nested Rules

Tính năng xếp chồng (Nested Rules) của SCSS cho phép lồng các quy tắc CSS bên trong nhau. Từ đó tạo ra mối quan hệ cấu trúc tương tự như cách các phần tử HTML được nhóm chồng lên nhau.

• Ví dụ, sử dụng Nested Rules trong SCSS, bạn có thể viết mã như sau:

.container {

  width: 100%;

  .heading {

    font-size: 24px;

    color: #333;

  }

  .content {

    padding: 20px;

    p {

      line-height: 1.5;

    }

    a {

      text-decoration: none;

      &:hover {

        text-decoration: underline;

      }

    }

  }

}

Trong đoạn mã trên, .heading và .content là các lớp con của .container, và chúng được lồng bên trong quy tắc của .container. Việc này giúp tạo ra một cấu trúc rõ ràng và dễ đọc hơn, tương tự như cấu trúc thẻ HTML được lồng nhau.

Tính năng này giúp tạo ra mã nguồn CSS có tổ chức hơn, dễ bảo trì và tái sử dụng hơn so với việc viết CSS thuần túy.

Chế độ Biến – biến

Biến của SCSS là tính năng cho phép bạn định nghĩa và sử dụng biến trong mã CSS. Điều này giúp tổ chức mã nguồn và giảm sự lặp lại trong việc sử dụng các giá trị được sử dụng nhiều lần.

• Dưới đây là một ví dụ về cách sử dụng biến trong SCSS:

$primary-color: #3498db;

$font-stack: 'Arial', sans-serif;

$base-line-height: 1.5;

body {

  font: 100% $font-stack;

  color: $primary-color;

}

h1 {

  line-height: $base-line-height;

}

Trong đoạn mã trên, chúng ta đã định nghĩa các biến như $primary-color, $font-stack, và $base-line-height, sau đó sử dụng chúng trong quy tắc của các phần tử HTML. Việc sử dụng biến giúp dễ dàng thay đổi giá trị mà không cần phải thay đổi từng dòng mã một cách đồng nhất.

Tính năng này giúp làm cho mã nguồn CSS trở nên dễ bảo trì, giúp tái sử dụng và thay đổi nhanh chóng các giá trị cơ bản trong toàn bộ mã nguồn.

Mixin Quy Tắc

Mixin của SCSS cho phép bạn tạo các tập hợp các quy tắc CSS và tái sử dụng chúng trong mã nguồn. Mixin tương đương với một hàm trong ngôn ngữ lập trình, nó cho phép bạn tái sử dụng một tập hợp các quy tắc CSS trong nhiều đoạn mã khác nhau mà chỉ cần gọi chúng một lần.

• Dưới đây là một ví dụ về cách sử dụng Mixin trong SCSS:

@mixin border-radius($radius) {

  -webkit-border-radius: $radius;

  -moz-border-radius: $radius;

  border-radius: $radius;

}

.box {

  @include border-radius(10px);

}

Ở đoạn mã trên, chúng ta đã tạo một Mixin có tên là border-radius để tái sử dụng các quy tắc liên quan đến việc bo tròn góc. Khi chúng ta muốn sử dụng các quy tắc này cho một phần tử cụ thể (trong trường hợp này là .box), chúng ta gọi Mixin bằng cách sử dụng @include border-radius(10px);.

Tính năng Mixin giúp giảm sự lặp lại trong mã nguồn, giảm kích thước của mã CSS và tăng tính tái sử dụng. Nền tảng cũng cung cấp khả năng quản lý và cập nhật các tập hợp quy tắc CSS tái sử dụng một cách hiệu quả.

Kế thừa – Extends

Tính năng Kế thừa (Extends) trong SCSS cho phép bạn tái sử dụng các đoạn mã CSS từ một nguyên mẫu và áp dụng chúng vào một hoặc nhiều lớp khác.

• Dưới đây là một ví dụ về cách sử dụng chế độ Kế thừa trong SCSS:

%message {

  border: 1px solid #ccc;

  padding: 10px;

  color: #333;

}

.success {

  @extend %message;

  background-color: lightgreen;

}

.error {

  @extend %message;

  background-color: lightcoral;

}

Trong ví dụ này, chúng ta đã tạo một đoạn mã CSS nguyên mẫu với tên là %message và sau đó sử dụng chức năng kế thừa (@extend) để áp dụng các thuộc tính của %message vào các lớp .success và .error. Kết quả là các lớp .success và .error sẽ kế thừa các thuộc tính của %message.

Tính năng kế thừa có tác dụng giảm sự lặp lại trong mã nguồn, tạo ra mã CSS tối ưu hơn và giúp tái sử dụng các đoạn mã CSS một cách thông minh.

Nhập khẩu

Nhập khẩu (Import) trong SCSS cho phép bạn chia nhỏ mã nguồn CSS thành các tập tin nhỏ hơn và nhập đúng các tập tin này vào một tập tin SCSS chính. Điều này sẽ giúp người dùng quản lý mã nguồn một cách cố định, tăng tính tái sử dụng và dễ dàng bảo trì.

• Dưới đây là một ví dụ về cách sử dụng tính năng nhập khẩu trong SCSS:

// _base.scss

body {

  font-family: Arial, sans-serif;

  font-size: 16px;

}

// main.scss

@import 'base';

.container {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

}

Trong ví dụ trên, chúng ta đã tạo một tập tin _base.scss chứa các quy tắc cơ bản cho trang web, và sau đó nhập tập tin này vào tập tin main.scss bằng cú pháp @import 'base';. Khi biên dịch main.scss, các quy tắc từ cả hai tập tin này sẽ được tổng hợp lại thành một file CSS duy nhất.

Tiện ích nhập khẩu góp phần tạo cấu trúc tổ chức cho mã nguồn của bạn. Hệ thống giảm sự trùng lặp và tạo điều kiện cho việc tái sử dụng mã nguồn một cách hiệu quả.

Vòng lặp

Chế độ vòng lặp của SCSS (Sass) cho phép bạn lặp lại các quy tắc CSS dựa trên một tập hợp dữ liệu, giúp tạo ra mã CSS linh hoạt và giảm sự lặp lại trong mã nguồn. 

• Dưới đây là một ví dụ cơ bản về cách sử dụng vòng lặp trong SCSS:

@for $i from 1 through 3 {

  .item-#{$i} {

    width: 100px * $i;

  }

}

Trong ví dụ này, chúng ta sử dụng vòng lặp @for để tạo ra ba lớp CSS có tên là .item-1, .item-2, và .item-3, mỗi lớp có độ rộng tăng dần theo công thức 100px * $i, với $i là biến của vòng lặp.

Tính năng vòng lặp có vai trò tạo ra mã CSS một cách tự động và linh hoạt dựa trên các tập hợp dữ liệu. Từ đó giảm sự lặp lại và tối ưu hóa mã nguồn.

Mệnh đề điều kiện IF

SCSS hỗ trợ mệnh đề điều kiện IF, cho phép bạn áp dụng các điều kiện vào việc tạo ra các quy tắc CSS. Dưới đây là một ví dụ cơ bản về cách sử dụng mệnh đề IF trong SCSS:

$background: true;

@if $background {

  body {

    background-color: #f2f2f2;

  }

} @else {

  body {

    background-color: #ffffff;

  }

}

Trong ví dụ này, chúng ta sử dụng mệnh đề IF để kiểm tra giá trị biến $background. Nếu biến này là true, thì quy tắc background-color: #f2f2f2; sẽ được áp dụng cho thẻ <body>. Ngược lại, nếu biến là false thì quy tắc background-color: #ffffff; sẽ được áp dụng.

Mệnh đề IF giúp kiểm soát việc áp dụng quy tắc CSS dựa trên các điều kiện logic, tạo ra mã CSS linh hoạt và dễ dàng điều chỉnh.

Trình biên dịch

Trình biên dịch SCSS được sử dụng để chuyển đổi mã nguồn SCSS sang mã CSS, giúp website hoặc ứng dụng web hiển thị đúng định dạng trên trình duyệt. Có nhiều trình biên dịch SCSS phổ biến, bao gồm:

• Node-sass: Được viết bằng JavaScript và dựa trên Node.js, là một trong những trình biên dịch SCSS nhanh và mạnh mẽ.
• Dart-sass: Được Google phát triển, hiện nay là trình biên dịch chính thức và được giải thích bằng Dart, đem lại hiệu suất tốt và hỗ trợ các tính năng mới nhất của SCSS.
• Ruby Sass: Là trình biên dịch SCSS được viết bằng ngôn ngữ lập trình Ruby. Mặc dù đã bị các phiên bản mới hơn thay thế nhưng vẫn được sử dụng trong một số dự án legacy.

Trình biên dịch SCSS thường chuyển đổi mã nguồn SCSS thành CSS thông qua câu lệnh hoặc quy trình tự động. Hệ thống cung cấp tính năng tối ưu hóa mã, xử lý lỗi một cách thông minh và hỗ trợ nhiều tùy chọn tùy chỉnh.

Ví dụ minh họa

Đây là một ví dụ về việc sử dụng trình biên dịch SCSS, cụ thể là sử dụng Node-sass để biên dịch mã nguồn SCSS:

- Đầu tiên, cài đặt Node.js và npm (Node Package Manager) nếu chưa có trên máy tính của bạn.

- Tiếp theo, bạn cần tạo một tệp tin SCSS, ví dụ styles.scss, và viết mã SCSS bên trong:

$primary-color: #3F51B5;

body {

  font-family: Arial, sans-serif;

  background-color: #f2f2f2;

  color: $primary-color;

}

button {

  background-color: $primary-color;

  color: #fff;

  padding: 10px 20px;

  border: none;

  border-radius: 5px;

  cursor: pointer;

}

- Sau đó, mở terminal và sử dụng npm để cài đặt Node-sass:

npm install -g node-sass

- Tiếp theo, sử dụng lệnh sau để biên dịch tệp tin SCSS thành CSS:

node-sass styles.scss styles.css

- Kết quả là trình biên dịch Node-sass sẽ tạo ra một tệp tin styles.css chứa mã nguồn CSS tương ứng với mã SCSS được xác định.

Qua ví dụ này, bạn có thể thấy cách sử dụng trình biên dịch SCSS để chuyển đổi mã nguồn SCSS thành mã CSS sử dụng Node-sass.

Tạm kết

Như vậy là FPT Shop đã giúp bạn đọc cập nhật rất nhiều kiến thức thú vị về SCSS. Đây đều là những thông tin quan trọng mà người học lập trình nên biết để phục vụ công việc của mình.

Xem thêm:

• Tổng hợp các kiểu dữ liệu trong SQL đầy đủ, chi tiết, chuẩn xác cho người muốn tìm hiểu
• IDS là gì? Bật mí sự khác biệt giữa IDS và IPS, Tường lửa qua những kiến thức hữu ích

Sử dụng các loại thiết bị điện tử chất lượng sẽ giúp công việc của bạn trở nên thuận lợi hơn. Tại FPT Shop cung cấp nhiều dòng máy tính, điện thoại, phụ kiện và linh kiện giá tốt. Bạn hãy ghé thăm cửa hàng để mua về cho mình các loại thiết bị chính hãng và cao cấp nhé!

• Điện thoại Samsung