Reactالتصميم بأسلوب SASS

// هنا قمنا بتعريف متغيرات يمكن استخدامها بشكل مباشر
$primary-color: #3498db;
$secondary-color: #2c3e50;
$font-color: #fff;
$btn-border-radius: 5px;

// هنا قمنا بتعريف محدد يمكن دمجه مع محددات أخرى
@mixin center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

// هنا قمنا بإضافة خصائص عامة لجميع العناصر
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

// هنا استخدمنا قيم بعض المتغيرات التي قمنا بتعريفها سابقاً
body {
    font-family: Arial, sans-serif;
    background-color: $secondary-color;
    color: $font-color;
}

// center-flex هنا قمنا بتعريف المحددات بشكل متداخل مع تضمين خصائص المحدد
.app {
    height: 100vh;
    @include center-flex;
    flex-direction: column;
    text-align: center;

    h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    p {
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }
}

// هنا قمنا بتعريف المحددات بشكل متداخل
.btn {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: $btn-border-radius;
    transition: all .3s ease-in;

    &.primary {
        background-color: $primary-color;
        color: $font-color;

        &:hover {
            background-color: darken($primary-color, 10%);
        }
    }
}

// App.scss هنا قمنا بتضمين ملف التصميم
import './App.scss';

// مع جعله يمكن الوصول له من خارج هذا الملف و <App> هنا قمنا بتعريف المكون
// SCSS التي قمنا بتعريفها أساساً بأسلوب CSS لاحظ أننا استخدمنا فيه أسماء كلاسات
export default function App() {
    return (
        <div className="app">
            <h1>Welcome to Our Website</h1>
            <p>This is a simple page styled using SCSS.</p>
            <button className="btn primary">Get Started</button>
        </div>
    );
}