จัดแต่งทรงผมตอบสนองโดยใช้ Sass

❮ ก่อนหน้า ถัดไป ❯

Sass คืออะไร

Sass เป็นตัวประมวลผลล่วงหน้า CSS

ไฟล์ Sass ถูกดำเนินการบนเซิร์ฟเวอร์และส่ง CSS ไปยังเบราว์เซอร์

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Sass ได้ใน Sass Tutorialของ เรา

ฉันสามารถใช้ Sass ได้หรือไม่

หากคุณใช้ the create-react-appในโปรเจ็กต์ของคุณ คุณสามารถติดตั้งและใช้ Sass ในโครงการ React ของคุณได้อย่างง่ายดาย

ติดตั้ง Sass โดยรันคำสั่งนี้ในเทอร์มินัลของคุณ:

>npm i sass

ตอนนี้คุณพร้อมที่จะรวมไฟล์ Sass ในโครงการของคุณแล้ว!

สร้างไฟล์ Sass

สร้างไฟล์ Sass ในลักษณะเดียวกับที่คุณสร้างไฟล์ CSS แต่ไฟล์ Sass มีนามสกุลไฟล์.scss

ในไฟล์ Sass คุณสามารถใช้ตัวแปรและฟังก์ชัน Sass อื่นๆ ได้:

my-sass.scss:

สร้างตัวแปรเพื่อกำหนดสีของข้อความ:

$myColor: red;

h1 {
  color: $myColor;
}

นำเข้าไฟล์ Sass ด้วยวิธีเดียวกับที่คุณนำเข้าไฟล์ CSS:

ดัชนี.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

ReactDOM.render(<Header />, document.getElementById('root'));