رد فعل التصميم باستخدام Sass

❮ سابق التالي ❯

ما هو ساس

Sass هو معالج CSS مسبق.

يتم تنفيذ ملفات Sass على الخادم وإرسال CSS إلى المتصفح.

يمكنك معرفة المزيد عن Sass في برنامج Sass التعليمي الخاص بنا .

هل يمكنني استخدام Sass؟

إذا كنت تستخدم 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:

index.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'));