css یک زبان شیوه نامه (Cascading Style Sheet) است که برای تعریف ارائه و چیدمان یک صفحه وب نوشته شده در HTML یا XML استفاده می شود. CSS از یک سلسله مراتب آبشاری پیروی می کند، که در آن استایل ها در سطح بالاتری در شیوه نامه به پایین می روند تا عناصر سطح پایین را تحت تأثیر قرار دهند.
معرفی:
CSS: یک زبان شیوه نامه (Cascading Style Sheet) است که برای تعریف ارائه و چیدمان یک صفحه وب نوشته شده در HTML یا XML استفاده می شود. CSS از یک سلسله مراتب آبشاری پیروی می کند، که در آن استایل ها در سطح بالاتری در شیوه نامه به پایین می روند تا عناصر سطح پایین را تحت تأثیر قرار دهند. CSS در حال حاضر بخشی ضروری از توسعه وب در ارتباط با HTML و Javascript است. CSS پسوند فایل .css دارد.
SCSS: شیوه نامه عالی نحوی SCSS (Sassy CSS) یک زبان برنامه نویسی پیش پردازنده است که ابر مجموعه ای از CSS است. این ویژگی ها و قابلیت های اضافی را ارائه می دهد که در CSS معمولی موجود نیستند. سینتکس SCSS بسیار شبیه به CSS است، اما امکان استفاده از متغیرها، تودرتو، میکسین ها و سایر ساختارهای برنامه نویسی را فراهم می کند. SCSS دارای پسوند فایل .scss است.
تفاوت:
نحو: CSS از یک نحو متن ساده پیروی می کند، در حالی که SCSS از یک نحو ساختارمندتر با ویژگی های اضافی مانند متغیرها، تودرتو و ترکیبی پیروی می کند.
متغیرها: SCSS به شما این امکان را می دهد که متغیرهایی را برای ذخیره مقادیر پرکاربرد مانند رنگ ها، اندازه فونت ها و فاصله تعریف کنید، در حالی که CSS اینطور نیست.
تودرتو: SCSS به شما امکان می دهد انتخابگرها را در انتخابگرهای دیگر قرار دهید، و نوشتن و خواندن شیوه نامه های پیچیده را آسان تر می کند، در حالی که CSS از شما می خواهد که هر انتخابگر را جداگانه بنویسید.
ترکیب: SCSS به شما این امکان را می دهد که با استفاده از ترکیب ها تکه های کد قابل استفاده مجدد ایجاد کنید، که مانند توابعی در زبان های برنامه نویسی هستند. CSS این قابلیت را ارائه نمی دهد.
پسوند فایل: فایل های CSS از پسوند فایل .css استفاده می کنند، در حالی که فایل های SCSS از پسوند فایل .scss استفاده می کنند.
کامپایل: فایل‌های CSS مستقیماً توسط مرورگرهای وب تفسیر می‌شوند، در حالی که فایل‌های SCSS باید با استفاده از یک پیش‌پردازنده مانند Sass در فایل‌های استاندارد CSS پیش پردازش شوند.
SCSS شامل تمام ویژگی های CSS است و دارای ویژگی های بیشتری است که در CSS وجود ندارد که آن را به انتخاب خوبی برای توسعه دهندگان برای استفاده از آن تبدیل می کند.
SCSS متغیرهایی را ارائه می دهد، می توانید کد خود را با استفاده از متغیرها کوتاه کنید. این یک مزیت بزرگ نسبت به CSS معمولی است.
مثال: در CSS
body{
color: #ffffff;
font: $ubuntu-font: 'Ubuntu',
'Arial',
'Helvetica',
sans-serif;
font-size: xx-large;
padding: 2rem;
}
مثال: در SCSS
$white: #ffffff;
$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
body{
color: $white;
font: $ubuntu-font;
font-size: xx-large;
padding: 2rem;
}
- دانستن SCSS به شما کمک می کند تا Bootstrap 4 را سفارشی کنید.
- SASS ویژگی @import را اضافه می کند که به شما امکان می دهد فایل های SCSS سفارشی خود را وارد کنید
@import "my theme"; @import "framework/bootstrap";
SASS به ما اجازه می دهد تا از نحو تو در تو استفاده کنیم. فرض کنید باید یک «پارگراف» خاص را در «div» در «footer» استایل کنید، قطعاً می‌توانید این کار را با SASS انجام دهید.
footer {
div {
p {
margin: 2rem;
color: #2f2f2f;
}
}
}
هر دو CSS و SASS دارای اسناد جامع و جوامعی از کاربران هستند که یافتن پشتیبانی را آسان تر می کند.
