## Giới thiệu

Xin chào các bạn, ngày nay HTML hay Hypertext Markup Language đã trở thành một ngôn ngữ phổ biến và rộng rãi hơn với tất cả mọi người. Nếu các bạn muốn tìm hiểu về lập trình web, việc biết đến HTML là điều cần phải có, bởi vì dù trang web có đơn giản hay phức tạp thì đều có phần HTML làm khung xương, khung xương vững chắc thì những thành phần khác mới xây lên một cách dễ dàng được. Vậy thì hôm nay mình sẽ cùng các bạn tìm hiểu về một số thẻ cơ bản và thông dụng nhất trong HTML nhé.

## Phân loại thẻ trong HTML

### Phân loại theo cấu trúc

Ở trong HTML, các bạn sẽ dễ dàng nhận ra được cấu trúc khác nhau cơ bản của 2 loại thẻ chính: thẻ có thẻ mở và thẻ đóng, và thẻ tự đóng.

```html
<p>Welcome to GDSC-HUST</p>
```

Ở trên mình có thẻ p với `<p>` là thẻ mở sau đó đến nội dung là `Welcome to GDSC-HUST` rồi đến thẻ đóng là `</p>`, các bạn thấy thẻ đóng nó giống thẻ mở nhưng có dấu `/` phía trước nhé. Ngoài ra các bạn sẽ thường gặp những thẻ tự đóng có cấu trúc như sau:

```html
<img src="" alt=""/>
```

Những thẻ có cấu trúc như trên gọi là thẻ tự đóng nghĩa là chúng ta không thể truyền nội dung vào giữa như thẻ đóng mở ở chỗ thẻ p mình nói ở trên. Các bạn cần lưu ý những thẻ nào là thẻ có thẻ mở và thẻ đóng và những thẻ nào tự đóng để code chuẩn hơn và tránh gặp lỗi nhé.

### Phân loại theo tính chất

Khi làm quen với HTML, chúng ta có thể thấy được có những thẻ có tính chất, đặc điểm, hành vi trên web khác với thẻ khác, vì vậy dựa trên điều này chúng ta có 2 loại thẻ chính là: **thẻ block** và **thẻ inline**.

Thẻ inline và thẻ block có những điểm khác nhau chính mà các bạn cần lưu ý

- Thẻ inline sẽ bị hạn chế về CSS như margin-top margin-bottom, padding-top, padding-bottom… khi sử dụng thẻ inline thì nên biết mà tuỳ trường hợp mà sử dụng, có thể dùng CSS để biến thẻ inline thành block hoặc inline block
- Khi các thẻ inline nằm cùng nhau thì nó sẽ nằm trên một hàng như tên gọi của nó là inline
- Thẻ inline sẽ có độ rộng bằng nội dung mà nó chứa
- Thẻ block sẽ có độ rộng full 100% phần tử cha chứa nó
- Thẻ block không bị hạn chế về CSS
- Vì thẻ block full 100% phần tử cha chứa nó cho nên khi dùng thẻ block cùng với nhau thì các phần tử đó sẽ rớt xuống hàng
- Thẻ inline và thẻ block có thể sử dụng cùng với nhau, điển hình là thẻ a nằm trong thẻ p khi các bạn đọc bài viết có gắn link vào để các bạn nhấn vô được

```html
<p>You can<a href="google.com">click here</a></p>
```

- Khi sử dụng CSS biến thẻ thành inline-block thì nó là sự kết hợp giữa thẻ inline và thẻ block, tức là nó sẽ có độ rộng theo nội dung nó chứa mà thôi(đặc điểm của thẻ inline), và không bị hạn chế về CSS(đặc điểm của thẻ block), nằm gần nhau thì nằm trên 1 hàng(đặc điểm của thẻ inline)

## Các thẻ HTML hay dùng nhất

### Thẻ div

Là **thẻ block** và là thẻ được sử dụng rộng rãi nhất hiện nay. Thẻ div thường được dùng cho một khối nào đó lớn, bên trong khối đó có thể có nhiều khối nhỏ(cũng là thẻ div) hoặc các thẻ p, và nhiều thẻ khác, chính vì vậy, thẻ div là viết tắt của division tức là sự phân chia các mục. Có thể nói thẻ div là thẻ chung nhất và có thể đảm nhận nhiều chức năng của các thẻ khác, khi chưa có những thẻ đặc biệt tạo bố cục trang web, thì thẻ div sẽ được dùng để thay cho các thẻ đó. Ngoài ra, thẻ div cũng có thể chứa văn bản tương tự với thẻ văn bản(thẻ p), tuy nhiên chúng ta nên dùng thẻ p như sẽ được giới thiệu tiếp theo đây.

```html
<div class = "container">
    <div class = "inside-container">
        <div>This is div tag</div>
    </div>
</div>
```

### Thẻ văn bản

Thẻ văn bản hay trong html là thẻ p, là **thẻ block** đặc trưng cho văn bản(paragraph) và theo mình cũng là thẻ cơ bản nhất trong html. Thẻ p có các thuộc tính hay dùng là class và id, nội dung thẻ p là các đoạn văn bản bất kì. Trên các trang web, các bạn có thể thấy rằng hầu hết các đoạn văn bản đều được chứa trong các thẻ p. Vì vậy, khi muốn viết một đoạn văn bản trên web, các bạn hãy ưu tiên bọc nó bằng thẻ p nhé.

```html
<p>Đây là một đoạn văn bản bất kì</p>
```

### Các thẻ tiêu đề

Các thẻ tiêu đề là những thẻ `h1,h2,h3,h4,h5,h6` là **thẻ block** và thường đại diện cho các tiêu đề từ to cho đến nhỏ và có cách sử dụng khác nhau (h1 là to nhất tới h6 là nhỏ nhất). Thẻ **h1** là thẻ thường được sử dụng cho một tiêu đề to nhất của trang web và lưu ý trong một trang web thì chỉ có **tối đa một thẻ h1** mà thôi, vì nó ảnh hưởng tới SEO cho nên nếu các bạn sử dụng nhiều hơn một thẻ h1 thì không tốt đâu nhé.

```html
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
```

Như tên gọi của nó thì nó được dùng cho cấu trúc có tiêu đề ví dụ như tiêu đề khối, tiêu đề bài viết, tiêu đề blog. Bên trong nó có thể chứa thẻ a, hoặc các thẻ inline khác, hay thẻ block… Và các bạn lưu ý các đoạn văn bản dài như ở thẻ p thì nên dùng thẻ p hoặc thẻ div chẳng hạn chứ đừng dùng những thẻ tiêu đề này cho một đoạn văn bản quá dài nhé.

### Thẻ liên kết

Thẻ a là **thẻ inline**, dùng cho các liên kết, bạn có thể dùng thẻ này để liên kết đến các trang web khác hoặc liên kết đến các mục khác trong chính trang web hiện tại với điều kiện mục đó **phải có id** và trong **thuộc tính href** của thẻ a phải bắt đầu bằng **dấu #** 

```html
<a href = "link">Đây là liên kết đến trang web khác</a>
<a href = "#main">Liên kết đến nội dung chính trong trang này</a>
<div id = "main">Đây là nội dung chính</div>
```

Trong thẻ a có 2 thuộc tính quan trọng đó chính là `href và target`, **href** sẽ truyền vào đường dẫn, hoặc **id** mục khác sau dấu #, **target** thì có 2 giá trị thường được sử dụng nhất là `_self` và `_blank`, **_self** thì nó sẽ mở trong tab hiện tại luôn(dễ hiểu hơn nó sẽ thay thế tab hiện tại trên trình duyệt bằng link các bạn nhấn vào), còn **_blank** nó sẽ mở ra một tab mới trên trình duyệt. Nội dung của thẻ a sẽ là văn bản hiện ra trực tiếp với người dùng mà khi bấm vào sẽ dẫn tới đường link trong thuộc tính **href**, vì vậy các bạn nên đặt nội dung thẻ a tường minh, rõ ý nhé.

```html
<a href="https://google.com" target = "_blank">google.com</a>
```

Bên trong thẻ a có thể chứa nhiều thẻ khác luôn nhé như thẻ block khác, thẻ inline… Sau này các bạn code giao diện mà có cho người dùng nhấn vào một khối nào đó thì chắc chắn các bạn sẽ dùng thẻ a bao lại hết chúng.

### Thẻ img

Là **thẻ inline** và là **thẻ tự đóng** nên không truyền nội dung vào giữa như các thẻ đóng mở khác được. Thẻ này sử dụng rất nhiều trong trang web để hiển thị hình ảnh, thẻ img có 2 thuộc tính chính mà các bạn cần nắm đó là `src` và `alt` trong đó **src** truyền vào đường dẫn hình ảnh để hiển thị hình ảnh lên trang web, còn thẻ **alt** thì là liên quan tới SEO một chút, khi hình ảnh đường dẫn sai sẽ không hiển thị được thì nội dung trong thẻ alt sẽ hiển thị lên.

```html
<img src = "google_image.png" alt = "google_image">
```

Ngoài ra, như đã nói ở thẻ liên kết, bạn hoàn toàn có thể bọc thẻ img trong một thẻ a nếu muốn khi người dùng nhấp vào hình ảnh sẽ dẫn đến một trang khác.

### Thẻ danh sách

Thẻ danh sách thì có 2 thẻ chính với cấu trúc hay dùng là `ul li` và `ol li`. Trong đó **ul** nghĩa là **unorderedlist** nghĩa danh sách không có thứ tự, tức là khi dùng nó sẽ hiển thị dưới dạng như này với các chấm tròn mặc định hoặc vuông dựa vào CSS sẽ nói sau này.

- a
- b

Còn **ol** là **orderedlist** nghĩa là danh sách có thứ tự tức được đánh số như mục lục vậy 1 2

1. a
2. b

Thẻ danh sách được sử dụng nhiều để liệt kê các nội dung hoặc ở trường hợp để làm các mục của menu trang web

```html
<p>Things cats like:</p>
<ul class = "cat-hobbies">
    <li>Milk</li>
    <li>Fish</li>
    <li>Sleeping</li>
</ul>
```

### Các thẻ semantic

Với nhu cầu code web ngày càng phổ biến và rỗng rãi hơn, các thẻ semantic được tạo ra nhằm để giúp cho trang web có cấu trúc mạch lạc, khoa học hơn, nhất là những trang web về các bài báo hay các bài blog. Điều này là hoàn toàn hợp lý bởi vì lượng người dùng trang web càng ngày càng nhiều và chúng ta không chỉ sử dụng web trên các thiết bị nhìn mà còn có cả các thiết bị nghe. Chính vì vậy, cấu trúc web rõ ràng, mạch lạc các phần là điều rất quan trọng để các thiết bị này có thể phân biệt và truyền tải nội dung đến người dùng. Một số thẻ semantic có thể kể đến như: `thẻ header, thẻ footer, thẻ aside, thẻ article, thẻ main, thẻ section,...`

Chúng ta có thể nhận thấy rằng tên các thẻ semantic hiển thị rõ ý nghĩa và chức năng của từng thẻ. Trước khi có các thẻ này người ta thường dùng thẻ div kèm với id hay class để chia các thành phần trang bởi vì tính chất của các thẻ này là như nhau. Mặc dù vậy, các bạn mới làm quen với HTML nên học dùng các thẻ này luôn để có cái nhìn tổng quát về cấu trúc trang web.

![Sematic_tags](https://i.postimg.cc/NjQ1RFb7/semantic-tag.jpg)

### Các thẻ định dạng văn bản

Là các thẻ inline, có chức năng làm nổi bật các đoạn chữ ngắn hoặc căn chỉnh các thành phần theo nhu cầu của người tạo web. Một số thẻ thường dùng như thẻ `strong` và thẻ `b` làm cho chữ **in đậm**, thẻ `em` và thẻ `i` để làm chữ *in nghiêng*, thẻ `br` để xuống dòng,...

```html
<p>
    <b>Dòng này được in đậm</b>
    <br>  
    <em>Dòng này được in nghiêng</em>
</p>
```

## Tạm kết

Vậy là mình đã giới thiệu cho các bạn một số thẻ thông dụng trong HTML. Những thẻ này trông thì rất cơ bản và đơn giản nhưng lại đóng vai trò vô cùng quan trọng trong tất cả các trang web, với những thẻ này các bạn đã hoàn toàn có thể tạo riêng cho mình một trang web trình bày thông tin đơn giản rồi đấy. Cảm ơn các bạn đã đọc bài viết của mình và chúc các bạn học code vui vẻ!

Chỉ với một số thẻ HTML thông dụng, bạn đã hoàn toàn có thể tạo riêng cho mình một trang web đơn giản.

Giới thiệu các thẻ cơ bản trong HTML

## Giới thiệu

Hello các bạn, nếu các bạn có tìm hiểu hoặc đọc qua về Next.js thì sẽ biết rằng điểm đặc biệt của React framework này đó là Pre-rendering. Bài viết này mình sẽ bàn luận về Pre-rendering và Data Fetching trong Next.js, cùng với đó chúng ta sẽ tìm hiểu về Static Generation.

## Pre-rendering

Mặc định, Next.js sẽ pre-renders các trang, có nghĩa là *HTML sẽ được tạo trước cho từng trang, thay vì tất cả được thực hiện ở client-side bởi JavaScript*. Pre-rendering nâng cao hiệu năng của trang web và SEO (search engine optimization)

![img](https://nextjs.org/static/images/learn/data-fetching/pre-rendering.png)

![img](https://nextjs.org/static/images/learn/data-fetching/no-pre-rendering.png)

### Phân loại Pre-rendering

Next.js có 2 loại pre-rendering: [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) và [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering). Sự khác biệt của 2 loại là thời điểm mà HTML được tạo cho một trang.

- [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) sẽ tạo HTML tại thời điểm **build time**. Trang HTML được pre-render sau đó sẽ được tái sử dụng sau mỗi lần request.
-  [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering) là phương pháp pre-redering tạo HTML mới sau mỗi lần request.

### Khi nào sử dụng Static Generation và Server-side Rendering

Static Generation được khuyên dùng trong hầu hết trường hợp, vì trang web sẽ được build một lần và sau đó lưu trữ bởi CDN, phương pháp này giúp cho tốc độ của trang được tối ưu so với việc trang web được server render lại sau mỗi lần request. Một số trường hợp bạn có thể ứng dụng Static Generation như: `web marketing, bài đăng blog, trang sản phẩn E-commerce hay documentation`.

Tóm lại, nếu bạn cho rằng mình có thể pre-render trang web này trước request của người dùng, thì khả năng cao bạn nên dùng Static Generation. Mặt khác, nếu trang web thường xuyên cập nhật data hoặc là nội dung trang web thay đổi sau mỗi request thì chúng ta nên dùng Sever-side Rendering, điều này đảm bảo trang web sẽ luôn được cập nhật sau mỗi request. Ngoài ra, chúng ta cũng có thể sử dụng client-side rendering với JavaScript để xử lý dữ liệu cập nhật.

Ở nội dung bài viết này, chúng ta sẽ tập trung vào Static Generation, sau đó mình sẽ nói qua về fetching dữ liệu tại thời điểm Request.

## Static Generation

### Static Generation khi không có data

Với những trang web không yêu cầu tìm nạp dữ liệu từ bên ngoài, Next.js sẽ tự động thực hiện Static Generation đối với trang đấy và HTML sẽ được tạo tại thời điểm build time.

![img](https://nextjs.org/static/images/learn/data-fetching/static-generation-without-data.png)

### Static Generation có data

Tuy nhiên, đối với nhiều trang web, chúng ta mong đợi việc có thể fetch dữ liệu từ bên ngoài để render ra HTML, có thể là sử dụng API, dữ liêụ từ file systems, hoặc truy xuất cơ sở dữ liệu tại thời điểm build time,... Và Next.js cho bạn phương thức để thực hiện điều này.

![img](https://nextjs.org/static/images/learn/data-fetching/static-generation-with-data.png)

**Static Generation có Data với `` `getStaticProps` ``**

Để sử dụng getStaticProps, khi bạn export một page component, bạn có thể đồng thời export một `async` function là `getStaticProps`. Sau đó:

- `getStaticProps` chạy tại thời điểm build time trong môi trường production.
- Ở trong function này, chúng ta có thể tìm nạp data từ bên ngoài và gửi nó dưới dạng props cho page.

```js
export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}
```

Về cơ bản, getStaticProps cho phép bạn nói với Next.js rằng: *"Này, trang này đang cần một số dữ liệu từ bên ngoài, vì thế khi bạn pre-render nó ở thời điểm build time, hãy chắc chắn rằng xử lý điều đấy trước!"*

> **Lưu ý:** Ở trong môi trường development, getStaticProps khởi chạy sau mỗi request.

Ví dụ với getStaticProps: Ở trong file `pages/post/index.js`, export ra function `Posts` đồng thời export function `getStaticProps`. Trong hàm `getStaticProps`, mình lấy dữ liệu posts từ API `https://jsonplaceholder.typicode.com/posts`, hàm trả về object `props` có chứa `posts`, sau đó `posts` được truyền vào làm props của `Posts` component. Cuối cùng, `posts` dùng để render ra giao diện.

```jsx
import Link from "next/link";

export default function Posts({ posts }) {
  return (
    <>
      <h1>List of Posts</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <Link href={`posts/${post.id}`}>
            <h2>
              {post.id} {post.title}
            </h2>
          </Link>
          <hr />
        </div>
      ))}
    </>
  );
}

export async function getStaticProps() {
  let response = await fetch("https://jsonplaceholder.typicode.com/posts");
  let posts = await response.json();
  return {
    props: {
      posts,
    },
  };
}

```

## Fetching Data tại thời điểm Request

### Server-side Rendering

Nếu bạn muốn fetch dữ liệu tại **request time** thay vì **build time**, bạn có thể dùng [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering):

![img](https://nextjs.org/static/images/learn/data-fetching/server-side-rendering-with-data.png)

Để sử dụng Server-side Rendering, bạn cần export `getServerSideProps` thay vì `getStaticProps`.

**Sử dụng `` `getServerSideProps` ``**

Đoạn code export ra `async` function `getServerSideProps` được mô tả như sau:

```jsx
export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    },
  };
}
```

Bởi vì  `getServerSideProps` được gọi tại request time, tham số `context` của nó sẽ chứa các tham số cụ thể của request.

Bạn chỉ nên sử dụng `getServerSideProps` khi mà trang của bạn cần pre-render với dữ liệu được fetch tại request time. Time to first bite ([TTFB](https://web.dev/time-to-first-byte/)) hay thời gian phản hồi của máy chủ sẽ chậm hơn so với `getStaticProps` vì máy chủ cần thực hiện tính toán và trả ra kết quả với mỗi request, kết quả vì thế sẽ không được lưu vào bộ đệm bởi [CDN](https://vercel.com/docs/edge-network/overview) mà không cấu hình.

### Client-side Rendering

Nếu bạn không cần phải render trước dữ liệu, bạn có thể sử dụng [Client-side Rendering](https://nextjs.org/docs/basic-features/data-fetching#fetching-data-on-the-client-side)

- Pre-render bằng phương pháp Static Generation những phần của trang mà không yêu cầu dữ liệu từ bên ngoài.
- Trong quá trình tải trang, fetch dữ liệu từ bên ngoài từ client bằng JavaScript và hoàn tất các phần còn lại của trang.

![img](https://nextjs.org/static/images/learn/data-fetching/client-side-rendering.png)

**Client-side Rendering** có thể ứng dụng vào các trang web mang tính bảo mật, không có nhu cầu về SEO, và đặc biệt là không cần render trước (pre-render). Dữ liệu của trang cập nhật thường xuyên, yêu cầu fetch data tại request-time.

## Tổng kết

Trong bài viết này, mình đã nói về Pre-rendering và Data Fetching trong Next.js. Pre-rendering có 2 loại là Static Generation và Server-side Rendering, trong đó Static Generation được khuyên dùng và mình cũng nói về Data Fetching của phương pháp này. Ngoài ra, bạn cũng có thể lựa chọn Server-side Rendering hoặc Client-side Rendering tùy vào nhu cầu fetching data của trang web.

Cảm ơn các bạn đã theo dõi và chúc các bạn học code vui vẻ! 👋



Nguồn tham khảo: trang web chính thức của [Next.js](https://nextjs.org/)

Hello các bạn, nếu các bạn có tìm hiểu hoặc đọc qua về Next.js thì sẽ biết rằng điểm đặc biệt của React framework này đó là Pre-rendering. Bài viết này mình sẽ bàn luận về Pre-rendering và Data Fetching trong Next.js, cùng với đó chúng ta sẽ tìm hiểu về Static Generation.

Pre-rendering và Data Fetching trong Next.js

CSS là một ngôn ngữ không thể thiếu trong lập trình web, với những dự án lớn và phức tạp về mặt giao diện, code CSS có thể trở nên dài dòng, phức tạp và khó bảo trì. Chính vì vậy, chúng ta cần đến sự trợ giúp của CSS Preprocessor, và một trong những ngôn ngữ được ưa chuộng nhất là SASS.

## CSS Preprocessor là gì?

CSS Preprocessors là ngôn ngữ tiền xử lý CSS, là một chương trình giúp biên dịch những cú pháp đặc trưng của ngôn ngữ tiền xử lý thành cú pháp CSS thông thường. CSS Preprocessor sẽ có thêm một số tính năng và cách viết giúp bạn tiết kiệm thời gian viết CSS, dễ dàng bảo trì và phát triển CSS hơn. Có rất nhiều loại CSS Preprocessor trong đó bao gồm SASS, Stylus hay LESS.

## Giới thiệu về SASS

SASS là một chương trình tiền xử lý CSS (*CSS preprocessor*). So với CSS thuần thì SASS có thêm một số tính năng như `nesting, mixins, inheritance` và một số thư viện hỗ trợ đi kèm giúp bạn viết CSS nhanh hơn, dễ dàng hơn và đặc biệt là có cú pháp giống một ngôn ngữ lập trình hơn.

Để bắt đầu với SASS, bạn có thể cài đặt package vào dự án với npm:

```bash
npm install sass
```

Sau khi SASS được cài đặt, bạn có thể biên dịch SASS thành CSS bằng câu lệnh `sass`. Câu lệnh này yêu cầu 2 đối số là file nguồn và file đích, tức là file sass để biên dịch và file css nó biên dịch thành. Chẳng hạn, trong folder `styles` mình có 2 file là `input.scss` và `output.css` thì khi chạy `sass input.scss output.css`, chương trình sẽ lấy `input.scss` và biên dịch lại thành `output.css`.

Nhưng mỗi khi có sự thay đổi trong file scss, bạn cần gõ lại lệnh trên để cập nhật thay đổi với file css, thao tác này có thể hơi mất thời gian và dễ quên. Chính vì vậy, chúng ta có thể bổ sung thêm --watch flag vào câu lệnh để lắng nghe sự thay đổi, mỗi lần file scss được thay đổi và lưu lại, tự động SASS sẽ biên dịch lại file css.

```bash
sass --watch input.scss output.css
```

> 💡 **Fun fact:** SASS có hai cú pháp! Cú pháp thứ nhất là SCSS (.scss) được sử dụng phổ biến hơn. Vì nó như một phiên bản nâng cấp của CSS, mọi cú pháp hợp lệ trong CSS đều hợp lệ trong SCSS. Cú pháp thụt lề (.sass) được sử dụng ít hơn: nó sử dụng thụt lề thay vì dấu ngoặc nhọn `{}` để bao các câu lệnh và dấu xuống dòng thay cho chấm phẩy `;` để phân tách chúng. Các ví dụ trong bài viết này mình sẽ dùng cú pháp SCSS cho quen thuộc và dễ làm quen hơn.
>

## Các tính năng cơ bản trong SASS

### Variables

Trong file scss, chúng ta có thể đặt biến và sử dụng lại biến nhiều lần trong file. Điều này rất hữu dụng, vì đôi khi có nhiều nơi bạn muốn dùng chung một style hoặc muốn thay đổi style nhiều nơi một lúc thì bạn chỉ cần thay đổi giá trị của biến. Biến có thể chứa giá trị của `colors`, các `font style` hay nhiều giá trị CSS khác mà bạn muốn sử dụng lại nhiều lần. Để sử dụng biến, bạn thêm `$` trước tên biến và khai báo giá trị cho nó:

```scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
```

### Nesting

Khi viết HTML, bạn có thể thấy rằng cấu trúc code được tổ chức một cách rõ ràng, mạch lạc, các thành phần được phân cấp và lồng vào nhau. CSS được tạo ra để đi cùng với HTML, các thành phần trong CSS cũng đại diện cho các thành phần trong trang HTML tương ứng. Chính vì vậy, SASS cho phép người dùng lồng các CSS selectors lại với nhau để nó có cấu trúc rõ ràng và được phân cấp như HTML.

```scss
// input.scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

```css
/* output.css */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
```

Các bạn có thể thấy `ul`, `li` và `a` selectors được lồng vào trong nav selector. Điều này giúp tổ chức lại code CSS và khiến nó dễ đọc hơn. Nhưng bạn cũng cần lưu ý rằng, việc lạm dụng quy tắc lồng nhau có thể dẫn đến CSS trở nên thừa điều kiện và sẽ khó bảo trì sau này.

### Modules

SASS hỗ trợ modules, bạn có thể tách nhỏ các file scss và kết hợp lại trong một file với cú pháp `@use`. Các file thành phần được đặt tên với kí tự gạch dưới đằng trước (ví dụ `_partial.scss`), điều này đảm bảo SASS biết rằng các file này là thành phần nhỏ và không cần biên dịch ra CSS tương ứng. Ví dụ với modules:

```scss
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
```

```scss
// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}
```

Như ví dụ trên ta có thể thấy modules không chỉ thêm các styles từ file `_base.scss` vào file `styles.scss` mà còn thêm các biến, chúng ta có thể sử dụng biến bằng tên file (`base.$primary-color`).

> ❗ **Lưu ý:** Chúng ta sử dụng `@use '[tên file]'`, tên file không có dấu gạch chân đằng trước và không cần thêm đuôi file (.scss). Sass sẽ biết điều đấy và thực hiện cho chúng ta.

### Mixins

Như mình đã nói ở trên, Sass cho phép bạn viết CSS giống một ngôn ngữ lập trình hơn và Mixins là một tính năng thể hiện điều đấy. Mixins cho phép bạn tạo một nhóm các câu lệnh CSS và sử dụng nó ở mọi nơi như một biến vậy. Tính chất này khiến mình cảm thấy nó giống một hàm và bạn cũng hoàn toàn có thể truyền tham số vào Mixins. Đây là ví dụ về mixin theme:

```scss
// input.scss
@mixin theme($color, $background) {
  background: $background;
  color: $color;
}

.info {
  @include theme(#fff, blue);
}
.warning {
  @include theme(#000, yellow);
}
.success {
  @include theme(#fff, green);
}
```

```css
/* output.css */
.info {
  background: blue;
  color: #fff;
}

.warning {
  background: yellow;
  color: #000;
}

.success {
  background: green;
  color: #fff;
}
```

Để khai báo một mixin, bạn sử dụng cú pháp `@mixin` và đặt tên cho nó, như mình đặt tên cho mixin ví dụ trên là `theme`. Bạn cũng có thể truyền vào các tham số ở trong dấu ngoặc đơn, ở trên là `$background` và `$color`. Cuối cùng, bạn dùng cú pháp `@include` theo sau là tên mixin và các đối số ở trong thành phần bất kì để sử dụng mixin đã tạo.

### Extend/Inheritance

Trong Sass, một CSS selector có thể kế thừa styles từ một CSS selector khác nhờ sử dụng cú pháp `@extend`.

```scss
// input.scss
.btn {
    border-radius: 1rem;
    border: none;
    color: #fff;
}

.success {
    @extend .btn;
    background: green;
}

.danger {
    @extend .btn;
    background: red;
}
```

```css
/* output.css */
.btn, .success, .danger {
    border-radius: 1rem;
    border: none;
    color: #fff;
}

.success {
    background: green;
}

.danger {
    background: red;
}
```

Trong ví dụ trên, khi biên dịch ra file `output.css`, ta có thể thấy class `.success` và `.danger` đều có các thuộc tính CSS giống class `.btn` và thêm các thuộc tính đặc trưng của riêng nó. Tính năng này giúp bạn có thể hạn chế việc thêm nhiều class vào một thẻ HTML.

### Operators

Với Sass bạn có thể dễ dàng thực hiện tính toán trong CSS, Sass hỗ trợ các toán tử cơ bản như `+, -, *, math.div() và %`. Trong ví dụ dưới, mình sẽ thực hiện tính toán cơ bản chiều rộng của 2 phần tử trong 1 thẻ cha.

```scss
@use "sass:math";

.container {
  display: flex;
}

.item-1 {
  width: math.div(600px, 960px) * 100%;
}

.item-2 {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}
```

## Tạm kết

Qua bài viết trên, các bạn có thể thấy Sass là một trình tiền xử lý CSS vô cùng mạnh mẽ, nó không chỉ giúp bạn tiết kiệm thời gian khi viết CSS mà còn cấu trúc lại code rõ ràng, mạch lạc, trở nên dễ đọc và dễ bảo trì. Những tính năng mình nói đến bên trên mới chỉ là một phần ưu điểm của Sass hay rất nhiều CSS Preprocessors khác, các bạn có thể tìm hiểu nhiều hơn những tính năng khác trên trang web của [Sass](https://sass-lang.com/) hoặc mình sẽ bàn luận sâu hơn trong những bài viết khác nhé. Cảm ơn các bạn đã theo dõi.



CSS là một ngôn ngữ không thể thiếu trong lập trình web, với những dự án lớn và phức tạp về mặt giao diện, code CSS có thể trở nên dài dòng, phức tạp và khó bảo trì. Chính vì vậy, chúng ta cần đến sự trợ giúp của CSS Preprocessor, và một trong những ngôn ngữ được ưa chuộng nhất là SASS.

🏷️Posts tagged #frontend

Tags