Sass چیست ؟
- مخفف Syntactically Awesome Stylesheet است.
- یک اکستنشن CSS (extension) است.
- یک پیش‌پردازشگر CSS (pre-processor) است.
- با تمام نسخه‌های CSS کاملاً سازگار است.
- تکرار کردن کدهای CSS را کاهش می‌دهد. بنابراین باعث صرفه‌جویی در زمان می‌شود.
- Sass توسط Hampton Catlin طراحی شده است. Natalie Weizenbaum در سال 2006 نیز، آن را توسعه داده است.
- دانلود و استفاده از Sass هم رایگان است.
هم رویش منتشر کرده است:
آموزش CSS سریع و پروژه محور __ طراحی سایت با CSS در 60 دقیقه
با استفاده از Sass می‌توانید از متغیرها، قوانین تودرتو، ترکیبات، توابع و موارد دیگری که همه با سینتکس CSS سازگار هستند؛ استفاده کنید.
Sass دارای دو سینتکس Sass و Scss است.
دلیل استفاده از Sass
Stylesheetها (شیوه‌نامه) از گذشته تا کنون بزرگ‌تر و پیچیده‌تر شده‌اند. همچنین قابلیت نگهداری از آنان نیز سخت‌تر شده است. اینجاست که پیش‌پردازشگر CSS به کمک توسعه‌دهندگان می‌آید.
Sass امکان استفاده از ویژگی‌هایی که در CSS وجود ندارند را برای توسعه‌‌دهنده فراهم می‌کند. مانند: متغیرها، قوانین تودرتو، ترکیبات، importها، وراثت، توابع داخلی و موارد دیگر.
یک مثال ساده از کاربردی بودن Sass
فرض کنید یک وبسایت با سه رنگ اصلی زیر داریم:
در کد خود، چند بار مقادیر هگز رنگ‌ها را می‌نویسید؟ طبیعی است که خیلی زیاد! درباره تنوع رنگ‌های یکسان چطور؟
به‌جای چندین بار نوشتن مقادیر بالا در جاهای مختلف کد، از Sass استفاده می‌کنیم. به این صورت که:
/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* use the variables */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
بنابراین همانطور که در بالا مشاهده کردید؛ اگر در پروژه از Sass استفاده کنید و نیاز به تغییر رنگ‌های اصلی داشته باشید، فقط باید در یک جا آن‌ها را تغییر دهید.
Sass چگونه کار می‌کند؟
مرورگر، کد Sass را درک نمی‌کند. برای تبدیل کد Sass به CSS استاندارد، به پیش‌پردازشگر Sass نیاز دارید.
این فرآیند تبدیل، transpiling نام دارد. کد Sass به یک transpiler (که نوعی اپلیکیشن است) داده می‌شود. سپس کد CSS معادل آن را دریافت خواهید کرد.
نکته:
Transpiling اصطلاحی است برای گرفتن سورس کد نوشته شده به یک زبان و تبدیل یا ترجمه آن به زبانی دیگر.
نوع فایل‌های Sass
فایل‌های Sass دارای پسوند “scss.” هستند.
کامنت در Sass
Sass همانند کامنت‌ها در CSS، از فرم /* comment */ پشتیبانی می‌کند. علاوه بر این از کامنت‌های درون خطی (comment//) نیز پشتیبانی می‌کند.
/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* use the variables */
.main-header {
background-color: $primary_1; // here you can put an inline comment ( در این قسمت می‌توان کامنت درون خطی قرار داد)
}
دلیل اصلی توسعه Sass، نوشتن کدهای کارآمدتر و بهتر در CSS است. اگر به دنبال یک زبان پیش‌پردازشگر برای یادگیری هستید، Sass بهترین انتخاب است. سوالی که پیش می‌آید این است که “چرا Sass ؟” قبل از مقایسه بین این دو زبان پیش‌پردازشگر (preprocessor language) در ابتدا Sass را معرفی می‌کنیم.
هم رویش منتشر کرده است:
آموزش بوت استرپ 4 و 5 ---- سریع و پروژه محور Bootstrap را بیاموزید!
مقایسه Sass و Scss
رایج ترین سینتکس مورد استفاده به عنوان “SCSS” شناخته می‌شود (برای “Sassy CSS”). Scss، سینتکس CSS ای که به طور معمولی نوشته می‌شود را می‌گیرد و ویژگی‌های فوق العاده‌ای را که همراه Sass است به آن می‌دهد. این بدان معناست که هر شیوه‌نامه CSS3 (CSS Stylesheet) معتبر، به اندازه‌ی SCSS معتبر است. فایل‌های SCSS دارای پسوند .scss هستند. این سینتکس برای توسعه‌دهندگان بسیار کاربردی است. زیرا تبدیل استایل‌های CSS معمولی به Scss را بسیار آسان‌تر می‌کند.
/* SCSS */
$primary-color: #3bbfce;
$secondary-color: #ff8700;
.content {
background-color: $primary-color;
color: darken($secondary-color, 9%);
}
سینتکس دوم (که سینتکس قدیمی‌تری است) Sass نام دارد. Sass برای جذاب‌تر شدن CSS ایجاد شده است. همچنین با حذف آکولادها (curly-braces) و سمی‌کالن‌ها (semi-colons) کدهای CSS را کارآمدتر کرده است. Sass از تورفتگی خطوط برای تعیین بلوک‌ها استفاده می‌کند. فایل‌های موجود در این سینتکس، از پسوند .sass استفاده می‌کنند.
/* SASS */
$primary-color: #3bbfce
$secondary-color: #ff8700
.content-navigation
background-color: $primary-color
color: darken($secondary-color, 9%)
با مطالعه توضیحات بالا، با تفاوت‌های میان Sass و Scss آشنا شدید. سوال بعدی که برایتان پیش می‌آید این است که کدام را یاد بگیرید یا از کدام استفاده کنید.
اما در واقع پاسخ این سوال را نباید از کسی بخواهید. شما خودتان باید بدانید که چه چیزی برای شما مناسب‌تر است. همچنین کدام یک مناسب الگوی نوشتن کد شما است.
برخی از توسعه‌دهندگان علاقه‌ای به سینتکس Sass ندارند. زیرا به استفاده از آکولادها و سمی‌کالن‌ها عادت دارند. اما Scss همیشه در کارهای تیمی مفید بوده است.
همانطور هم که در بالا گفته شد، تصمیم انتخاب هر کدام از آن‌ها به خودتان بستگی دارد.
**پیش از این آموزش فرانت اند در هم‌رویش منتشر شد. برای دیدن فیلم معرفی این آموزش بر روی این لینک (+) و یا پخش کننده پایین کلیک کنید:
برای دریافت بسته کامل آموزش فرانت اند بر روی لینک زیر کلیک کنید:
آموزش فرانت اند پروژه محور __ طراحی سایت با HTML و CSS و Bootstrap
کلیدواژگان
Scss چیست | sass scss چیست | Sass چیست | تفاوت Sass و Scss | دلیل استفاده از sass
