tiktok นับยอดวิวยังไง

Sass เป็นภาษา CSS preprocessor ที่ช่วยให้คุณสามารถเขียน CSS ที่ซับซ้อนและมีประสิทธิภาพมากขึ้นได้ Next.js รองรับ Sass อยู่แล้ว ดังนั้นคุณจึงสามารถใช้ Sass กับ Next.js ได้โดยไม่จำเป็นต้องตั้งค่าอะไรเพิ่มเติม

ในการเริ่มต้นใช้งาน Sass ใน Next.js คุณจะต้องติดตั้ง Sass ลงในสภาพแวดล้อมของคุณ

npm install -D sass

เมื่อคุณติดตั้ง Sass เรียบร้อยแล้ว คุณสามารถสร้างไฟล์ Sass ใหม่ได้

touch styles.scss

ไฟล์ Sass นี้จะสามารถใช้เก็บ CSS ทั้งหมดของคุณ

// กำหนดพื้นหลังสีขาวและสีตัวอักษรเป็นสีดำ
body {
  background-color: #ffffff;
  color: #000000;
}

// กำหนดขนาดตัวอักษรของหัวเรื่องเป็น 24px
h1 {
  font-size: 24px;
}

// กำหนดขนาดตัวอักษรของย่อหน้าเป็น 16px
p {
  font-size: 16px;
}

คุณสามารถนำเข้าไฟล์ Sass ลงในไฟล์ JavaScript ได้โดยใช้ import statement

import React from 'react';
import styles from './styles.scss';

const App = () => {
  return (
    <div>
      <h1 style={styles.h1}>Hello, world!</h1>
      <p style={styles.p}>This is a paragraph.</p>
    </div>
  );
};

export default App;

เมื่อคุณ render ไฟล์ React component นี้ หน้าเว็บของคุณจะมีพื้นหลังสีขาว สีตัวอักษรเป็นสีดำ หัวเรื่องขนาด 24px และย่อหน้าขนาด 16px

คุณยังสามารถใช้ CSS Modules เพื่อเพิ่ม Sass ลงในไฟล์ JavaScript ได้อีกด้วย ในการทำเช่นนี้ คุณจะต้องเปลี่ยนนามสกุลไฟล์ Sass เป็น .module.scss

ตัวอย่างเช่น:

touch styles.module.scss

// กำหนดคลาส CSS เฉพาะตัวชื่อ `my-button`
.my-button {
  background-color: red;
  color: white;
}

import React from 'react';
import styles from './styles.module.scss';

const Button = () => {
  return (
    <button className={styles.my-button}>
      Click me!
    </button>
  );
};

export default Button;

เมื่อคุณ render ไฟล์ React component นี้ ปุ่มจะมีพื้นหลังสีแดงและสีตัวอักษรเป็นสีขาว

ต่อไปนี้เป็นคุณลักษณะบางอย่างของ Sass ที่คุณสามารถใช้ได้กับ Next.js:

• Mixins: Mixins เป็นวิธีที่ดีในการแบ่งปันโค้ด CSS ของคุณกับส่วนอื่นๆ ของแอปพลิเคชัน
• Functions: Functions เป็นวิธีที่ดีในการเขียนโค้ด CSS ของคุณซ้ำได้
• Extends: Extends เป็นวิธีที่ดีในการสืบทอด CSS ของคุณจากคลาสอื่น
• Variables: Variables เป็นวิธีที่ดีในการเก็บค่า CSS ของคุณ
• Imports: Imports เป็นวิธีที่ดีในการนำเข้า CSS จากไฟล์อื่น

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Sass จากเอกสารประกอบของ Sass