scss چیست؟ آموزش به زبان ساده

SCSS مخفف Sassy Cascading Style Sheets یا Sassy CSS است. یک مجموعه برتر از زبان CSS که قابلیت های بیشتری به این زبان اضافه کرده است و انعطاف و قدرت بیشتری به توسعه دهندگان وب در طراحی وب سایت ارائه می دهد. SCSS از همان سینتکس زبان CSS استفاده می کند؛ براکت ها برای تعیین بلوک ها و سیمی کالون (;) برای انتهای خط دستور.

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

از دست ندهید: دانلود آموزش همه زبانهای برنامه نویسی (رایگان)

مثال SCSS

برای بررسی تفاوت های اساسی بین SCSS و CSS، کدهای نمونه CSS را به SCSS تبدیل می کنیم. در اینجا می توانید این کار را به صورت آنلاین انجام دهید.

$theme_gray: gray;

$theme_black: black;

$theme_yellow: yellow;

$theme_white: white;

body {

background-color: $theme_yellow;

}

.myclass {

background-color: $theme_white;

h1 {

color: $theme_gray;

text-align: center;

}

p {

color: $theme_black;

}

}

#myid {

background-color: $theme_black;

h1 {

color: $theme_yellow;

text-align: center;

}

p {

color: $theme_white;

}

}

این ساختار دستورات SCSS است که مزایای زیادی در توسعه وب دارد. همانطور که گفتیم فایل SCSS قبل از استفاده در مرورگر باید در فایل CSS کامپایل می شود.

در ادامه مزایای SCSS و چند ویژگی اضافه شده به زبان اصلی CSS در SCSS را مرور می کنیم.

متغیرهای SCSS

اولین چیزی که در کد بالا جلب توجه می کند، چهار خط ابتدای کد است:

$theme_gray: gray;

$theme_black: black;

$theme_yellow: yellow;

$theme_white: white;

اینها متغیر هستند دقیقاً مانند یک زبان برنامه نویسی. برای تعریف متغیر از یک علامت دلار ($) در ابتدا و قبل از نام متغیر استفاده می شود. متغیرها یک مزیت فوق العاده زبان SCSS است. معمولاً هنگام استفاده از متغیرها در SCSS آنها را در یک فایل جداگانه قرار می دهند. وارد کردن متغیرها در ابتدای فایل هنگام کامپایل باعث می شود تا استفاده از آنها در کل پروژه در دسترس باشد.

اغلب اوقات در شروع یک پروژه طراحی وب یک راهنمای استایل وجود دارد که همه رنگ های قابل استفاده در وب سایت در آن مشخص شده است. با ایجاد یک فایل مثل variables.scss برای متغیرهای حاوی رنگ های مشخص شده (از راهنمای سبک) دیگر لازم نیست که دوباره رنگ ها را جستجو کنید. علاوه بر این با تغییر یکی از رنگ ها به جای به روزرسانی آن در مکان های مختلف فایل ها کافیست آن را فقط در فایل متغیرها روزرسانی کنید.

در این مثال از متغیرها را برای نگهداری رنگ ها استفاده کردیم، می توانید از آنها برای هر چیزی استفاده کنید. مثل فونت ها:

$ubuntu-font: ‘Ubuntu’, ‘Arial’, ‘Helvetica’, sans-serif;

ساختار تودرتو در SCSS

به جای استفاده از انتخاب گرهای نسل (Descendant) برای تفکیک سبک ها در CSS از ساختار تودرتو (Nested) در SCSS استفاده می شود.

به جای کد CSS زیر:

.myclass {

background-color: white;

}

.myclass h1 {

color: gray;

text-align: center;

}

.myclass p {

color: black;

}

از این کد SCSS استفاده می کنیم:

.myclass {

background-color: $theme_white;

h1 {

color: $theme_gray;

text-align: center;

}

p {

color: $theme_black;

}

}

مزایای ساختار تودرتو

• می توانید ساختار SCSS را با ساختار HTML مطابقت دهید زیرا هر دو می توانند تودرتو شوند.
• ساختار تودرتو از نوشتن تکراری یک انتخابگر جلوگیری می کند.
• ساختار تودرتو یک گرامر طبیعی تر است و خوانایی و فهم آن آسان تر و سریعتر است.
• سبک های تودرتو قابلیت نگهداری بیشتری دارند.
• ساختار تودرتو ارتباط سبک های مرتبط با هم را حفظ می کند. در CSS می توانید از انتخابگر نسل در هرجایی از فایل های سبک خود استفاده کنید، در نتیجه گاهی اوقات فهمیدن اینکه کدام سبک ها روی چه چیزی تأثیر می گذارند، سخت می شود.

ساختار تودرتو عالی است اما در استفاده از آنها زیاده روی نکیند. SCSS باید به CSS کامپایل می شود و ساختارهای تودرتو عمیق تر منجر به خط های بیشتری می شود.

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

mixin در SCSS

می توانید به mixin (میکسین) مانند تابع فکر کنید. یک mixin می تواند چند پارامتر دریافت کند و CSS برگرداند. احتمالا هنگام نوشتن کدهای CSS متوجه شوید که ممکنه مجموعه ای از ویژگی های مشابه را بارها و بارها بنویسید. در SCSS با استفاده از میکسین می وتانید مجموعه ای از ویژگی ها برای استایل دهی به متن ایجاد کنید:

@mixin set-text-style($family:’Tahoma’, $weight: 500, $style: normal, $color: black) {

font-family: $family , ‘Arial’, ‘Helvetica’, sans-serif;

font-style: $style;

font-weight: $weight;

color: $color;

}

تعریف یک میکسین با کلمه کلیدی mixin@ شروع شده سپس نام آن نوشته می شود، مانند mixin set-text-style@. پارامترهای mixin داخل پرانتز قرار دارند، در این مثال پارامترهای family، $weight، $style$ و color$ را داریم. mixin مجموعه ای از ویژگی های مقداردهی شده با پارامترهای ارسالی را برمی گرداند. مقادیر مشخص شده برای پارامترها در پرانتز مقادیر پیش فرض آنها می باشند. اگر mixin را بدون ارسال پارامترها فراخوانی کنید، از این مقادیر پیشفرض پارامترها استفاده می شود.

برای استفاده از mixin کافیست آن را در مکان ویژگی در فایل SCSS فراخوانی کنید، برای فراخوانی آن ابتدا include@ سپس نام mixin و پارامترهای آن را بنویسد.

h2 {

@include set-text-style(‘Roboto’, 600, ‘italic’, blue);

}

پس از کامپایل کدهای CSS زیر تولید می شود:

h2 {

font-family: ‘Roboto’, ‘Arial’, ‘Helvetica’, sans-serif;

font-style: ‘italic’;

font-weight: 600;

color: blue;

}

اگر از هیچ پارامتری استفاده نشود:

h2 {

@include set-text-style();

}

مقادیر پیشفرض را برمی گرداند:

h2 {

font-family: ‘Tahoma’, ‘Arial’, ‘Helvetica’, sans-serif;

font-style: ‘normal’;

font-weight: 500;

color: black;

}

علاوه بر این می توانیم با نوشتن نام آرگومان ها فقط از برخی پارامترها استفاده کنیم. درمثال زیر در فراخوانی mixin مقدار پارامتر $color ارسال شده اما بقیه پارامترها مشخص نشده است، بنابراین همان مقادیر پیشفرض آنها استفاده می شود.

h2 {

@include set-text-style($color red);

}

سازماندهی آسان تر پروژه های SCSS

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

کلمه کلیدی import@ امکان ایمپورت یا وارد کردن یک فایل SCSS در یک فایل SCSS دیگر را فراهم می کند. می توانید mixin ها را در یک فایل و متغیرهای را در یک فایل دیگر قرار دهید و به همین ترتیب چند فایل SCSS برای سازماندهی منطقی سبک ها در بخش های مختلف ایجاد کنید و سپس همه آنها را در فایل مورد نظر برای کامپایل وارد کنید.

مقایسه SCSS و CSS

در اینجا تنها بخشی از ویژگی های SCSS را بررسی کردیم اما کاملاً واضح است که استفاده از SCSS مزایای زیادی نسبت به CSS دارد. در جدول زیر به طور خلاصه تفاوت های بین CSS و SCSS بررسی شده است.

SCSS ویژگی های بیشتری از جمله وراثت، توابع (متفاوت از mixinها)، انواع داده ها، ساختارهای کنترلی و موارد دیگر دارد.

در ادامه: دانلود آموزش صفر تا صد سی اس اس (رایگان)