Sass چیست؟ مقدمات، نصب و متغیرها در Sass

با سری آموزش Sass با شما همراهان روکسوپلاس هستیم. در درس اول این مجموعه بررسی می کنیم که Sass چیست و شیوه ی نصب آن را شرح می دهیم. در این درس با متغیرها در Sass نیز آشنا خواهید شد. همراه ما بمانید...

Sass یک پیش پردازنده CSS است که موجب تکرار کد CSS و در نتیجه جویی صرفه جویی در زمان توسعه می شود. یک مثال از کد Sas در کد زیر مشاهده می کنید:

/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use the variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

حالا آموزش Sass را با مقدمات آن شروع می کنیم.

قبل از آموزش Sass چه چیزهایی را باید بدانیم؟

آنچه که باید قبل از شروع آموزش Sass بدانید:

• HTML
• CSS

اگر می خواهید این آموزش را دنبال کنید، ابتدا مطالب مرتبط با آن ها را مطالعه کنید.

Sass چیست؟

• کلمه Sass برگرفته از حروف ابتدایی لغات عبارت Syntactically Awesome Stylesheet می باشد.
• Sass یک افزونه برای CSS محسوب می شود.
• Sass یک پیش پردازنده است.
• Sass با همه نسخه های CSS سازگاری کامل دارد.
• Sass موجب تکرار کدهای CSS می شود و در نتیجه زمان توسعه را کاهش می دهد.
• Sass توسط Hampton Catlin طراحی و توسط Natalie Weizenbaum در سال 2006 توسعه داده شده است.
• Sass جهت دانلود و استفاده کردن رایگان است.

چرا باید از Sass استفاده کنیم؟

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

Sass به شما این امکان را می دهد از ویژگی هایی استفاده کنید که در CSS نیست. ویژگی های مانند: متغیرها، امکان ایجاد قوانین تو در تو، Mixin ها، import ها، وراثت، توابع آماده Sass و بسیاری از امکانات دیگر.

یک مثال ساده برای آنکه بدانیم چرا باید از Sass استفاده کنیم؟

یک صفحه را در نظر بگیرید که از 3 کد رنگ زیر استفاده می کند:

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

به جای استفاده و تایپ چند باره مقادیر بالا می توانید از یک 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 استفاده کنید تا با استفاده از آن کد Sass را به کد CSS استاندارد تبدیل کنید. به این پروسه پردازش و تبدیل کنید ترانسپایل کردن (Transpiling)  می گویند. بنابراین شما باید به یک ترانسپایلر (که نوعی برنامه محسوب می شود) کد Sass را بدهید و آن کد CSS را یه شما برگرداند.

نکته: Transpling اصطلاحی است برای زمانی که کدی از یک زبان برنامه نویسی به یک زبان برنامه نویسی دیگر تفسیر یا تبدیل می شود، بکار می رود.

نوع فایل های Sass

پسوند فایل های Sass به صورت "scss." در نظر گرفته می شود.

کامنت ها در Sass

Sass از فرمت کامنت گذاری در CSS پشتیبانی می کند و علاوه بر آن از کامنت های تک خطی (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

• سیستم عامل: Sass وابستگی به سیستم عامل خاصی ندارد و می توانید از آن در سیستم عامل های مختلف بهره ببرید.
• پشتیبانی از مرورگر: Sass در مرورگر های Edge/IE (از مرورگر IE 8 به بعد)، Firefox ،Chrome ،Safari و Opera کار می کند.
• زبان برنامه نویسی: Sass بر اساس زبان برنامه نویسی Ruby است.

وبسایت رسمی

آدرس وبسایت رسمی Sass بدین صورت است: https://sass-lang.com

نصب Sass

راه های مختلفی برای نصب Sass روی سیستم خودتان دارید. برنامه های زیادی هستند که در عرض چند دقیقه نصب Sass را برایتان انجام می دهند و آن را برای سیستم عامل های مختلف اعم از مک، لینوکس و ویندوز آماده می کنند. برخی از این برنامه ها رایگان و برخی دیگر غیر رایگان هستند. مثلا در phpstorm به عنوان یک IDE می توانید از خود این IDE استفاده کنید و پکیج Sass را نصب کنید. درباره نصب Sass می توانید لینک زیر را مطالعه کنید:

https://sass-lang.com/install

متغیرها در Sass

متغیرها راهی جهت ذخیره اطلاعات برای استفاده های بعدی می باشد. با Sass نیز می توانید اطلاعات را در متغیرها ذخیره کنید. متغیرهایی از نوع:

• رشته
• عدد
• رنگ
• مقادیر منطقی
• لیست ها
• null

برای آنکه متغیری را در Sass تعیین کنید با ابتدای نام متغیر را با علامت $ شروع کنید. مانند ساختار زیر:

$variablename: value;

کد Sass در مثال زیر 4 متغیر با نام های myFont ،myColor ،myFontSize ،myWidth تعریف می کند. پس از اعلان متغیرها می توانید در هر جای دیگری که بخواهید با فراخوانی آن ها، از آن ها استفاده کنید:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

وقتی که کد Sass بالا Transpile می شود، متغیرها را از کد بالا می گیرد و مقادیر آن ها را در خروجی نرمال کد CSS جایگزین می کند. در کد زیر این عملکرد را مشاهده می کنید:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}

متغیرهای Sass تنها در سطحی که تعریف می شوند، قابل دسترسی هستند. کد زیر را مشاهده کنید:

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

بر اساس کد بالا رنگ در تگ p قرمز است یا سبز؟ قطعا قرمز. اما با گرفتن مقدار جدید داخل سطح h1، مقدار رنگ برای h1، سبز می باشد. خروجی CSS کد بالا به صورت زیر می باشد:

h1 {
  color: green;
}

p {
  color: red;
}

رفتار بالا، عملکرد پیش فرض متغیرهای محلی بود.

استفاده از global! در Sass

می توانیم با استفاده از global! رفتار پیش فرض متغیرهای محلی را تغییر دهیم. عبارت global! مشخص می کند که یک متغیر سراسری است و در همه جا با مقداری خاص قابل دسترسی است. کد زیر را که همان کد بالاست اما عبارت global! به آن اضافه شده است، مشاهده کنید:

$myColor: red;

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}

حالا رنگ متن داخل تگ p سبز خواهد بود! خروجی کد Sass بالا را به صورت کد CSS مشاهده کنید:

h1 {
  color: green;
}

p {
  color: green;
}

توجه: متغیرهای سراسری باید خارج از هر قانون دیگری تعریف شوند. کار درست این است که یک فایل "global.scss_" تعریف کنیم و از این فایل با کلمه کلیدی include بهره ببریم.