تفاوت بین Css و Scss چیست؟

خدا را شکر برای زبان‌های صفحه سبک مانند Css و Scss. قسمت جلویی می توانست به اندازه یک سیب زمینی در لباس عروس شیک باشد!
اگر به درستی استفاده شود، می توانیم به کاربران شما احساس جذابی و تجربه ای به یاد ماندنی با ظاهر صفحات وب خود بدهیم.
خلاصه این مقاله این است: CSS، در درجه اول، است قدرتمند ** دوست که به ما کمک می کند به وب سایت خود بگوییم که چگونه باید به نظر برسد – رنگ ها، فونت ها، فاصله، شما نام ببرید. در حالی که **Scss مثل اضافه کردن “اسبالا” پشت “پower” از CSS.
اگرچه، آنها شباهت های زیادی دارند. از این رو، ما باید تفاوت ها را روشن کنیم.

تفاوت بین CSS و Scss چیست؟

ورق سبک آبشاری یا **CSS **زبان استانداردی است که برای توصیف ظاهر و قالب بندی یک سند نوشته شده در HTML استفاده می شود. این به من و شما به عنوان توسعه دهندگان اجازه می دهد تا طرح، رنگ ها، فونت ها و طراحی کلی را کنترل کنیم.

از سوی دیگر، ورق سبک آبشاری Sassy یا **SCSS **یک CSS فوق مجموعه است. معنی آن این است که هر نحو CSS معتبر نیز یک SCSS معتبر است. اما علاوه بر آن، SCSS ویژگی‌های قدرتمندی مانند متغیرها، تودرتو، و میکس‌ها را معرفی می‌کند که خوانایی کد، قابلیت استفاده مجدد و قابلیت نگهداری را ارتقا می‌دهند. اما در پایان روز، از آنجایی که فایل HTML ما قادر به درک آن است، در CSS پشت صحنه کامپایل شده است.

CSS را به عنوان شخصی سازی شخصیت بازی ویدیویی خود در نظر بگیرید. شما می توانید ویژگی های اساسی مانند رنگ مو و لباس را انتخاب کنید. Scss چیزی است که به شما کمک می کند شخصیت خود را به یک درجه ارتقا دهید. چه می‌شد اگر بتوانید رنگ‌ها و لباس‌های مورد علاقه‌تان را برای استفاده مجدد بدون به خاطر سپردن تمام جزئیات ذخیره کنید؟ این Scss برای شما است.

با Scss، شما همچنین می توانید قوانین استایل خود را بچینید. در همین حال، در CSS خالص نمی توان به این امر دست یافت. Nesting به شما امکان می دهد کد خود را با کنار هم قرار دادن سبک های مرتبط مرتب نگه دارید و خواندن آن را آسان تر می کند.

نگاهی بیاندازید:

در اینجا Css وجود دارد که با آن نمی توانید قوانین css را تودرتو کنید

.parent{
    padding: 1rem;
}

.child{
    margin: auto;
}

در اینجا scss به شما امکان می دهد یک قانون CSS را در بلوک قانون انتخابگر والد آن قرار دهید:

.parent{
    padding: 1rem;

    .child{
        margin: auto;
    }
}

یکی دیگر از ویژگی های جالبی که SCSS ارائه می کند اما CSS خالص فاقد آن است، “mixins” نام دارد. با میکسین های SCSS، می توانید تکه های قابل استفاده مجدد از CSS را تعریف کنید و افزونگی را کاهش دهید.
در مثال بازی ویدیویی که قبلا ساختم، Mixins مانند این است که هم ضربات زانو و هم مشت را در یک فرمان نگه می‌دارد. در نتیجه، هر زمان که آن فرمان را فراخوانی کنید، شخصیت شما با هر دو حرکت به دشمن حمله می کند.
چقدر باحاله؟ 😊
به جای اینکه مجبور باشید یک دو اعلان CSS را چندین بار تکرار کنید، می توانید این اعلان ها را به عنوان یک گروه نگه دارید و با ارجاع به نام mixin آنها را به طور کلی اعمال کنید.

نگاهی بیاندازید:
روش معمولی برای مرکزیت یک عنصر بلوک با CSS.

.item1{
    display: flex;
    align-items: center;
    justify-content: center;
}

.item2{
    display: flex;
    align-items: center;
    justify-content: center;
}

یک رویکرد بهتر با Scss

1. میکسین ایجاد کنید

@mixin centerItem {
    display: flex;
    align-items: center;
    justify-content: center;
}

1. میکسین را در جایی که لازم است بمالید (شامل).

آیتم 1{
@include centerItem;
}

آیتم 2{
@include centerItem;
}

بنابراین، در حالی که CSS ابزار اولیه ای است که شما با آن شروع می کنید تا صفحات وب خود را خوب جلوه دهید، SCSS مانند ارتقاء سطح است. این به شما کمک می کند همه چیز را بهتر مدیریت کنید، به خصوص زمانی که پروژه شما بزرگتر و پیچیده تر می شود.

این مفید بود؟