آموزش Sass ، نحوه یادگیری و معرفی مراجع رایگان

سَس Sass چیست؟

سَس (SASS) چیست؟ سَس مخفف (Syntactically Awesome Stylesheets) است. Sass یک پیش پردازنده CSS است. Sass تکرار CSS را کاهش می دهد و در نتیجه در زمان صرفه جویی می کند.

اینکه میگوییم ساس Sass یک پیش پردازنده CSS است یعنی چی؟ یعنی کدها پیش از آنکه به صورت CSS درآیند، مورد پردازش قرار میگیرند و سپس به CSS تبدیل میشوند. سَس Sass امکانات مورد استفاده در CSS را گسترده میکند.

به تصویر زیر توجه کنید، در ابتدا شما چند متغیر تعریف میکنید و به آنها مقدار میدهید. سپس در بدنه کد مثلا برای تگ بادی body از این متغیرها به جای مقدار استفاده میکنید:

/* 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;
}

در W3Schools شما ارجاعات کاملی از تمام توابع Sass با نحو (ساختار) و مثال پیدا خواهید کرد:

Sass String Functions

Sass Numeric Functions

Sass List Functions

Sass Map Functions

Sass Selector Functions

Sass Introspection Functions

Sass Color Functions

آنچه شما از قبل باید بدانید

قبل از ادامه، باید درک اولیه ای از موارد زیر داشته باشید:

• HTML
• CSS

خلاصه درباره Sass:

Sass مخفف این عبارت است: Syntactically Awesome Stylesheet

Sass یک گسترش دهنده یا اکستنشن برای CSS است

Sass یک پیش پردازنده CSS است

Sass با همه نسخه های CSS سازگار است

Sass تکرار کد را کاهش میدهد پس موجب صرفه جویی زمان میشود

Sass توسط همپتون کَتلین Hampton Catlin طراحی شد و توسط ناتالی ویزن باوم Natalie Weizenbaum در 2006 توسعه داده شد

Sass برای دانلود و استفاده رایگان است

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

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

Sass به شما امکان می دهد از ویژگی هایی استفاده کنید که در CSS وجود ندارند، مانند متغیرها، قوانین تودرتو nested، میکس ها mixins، واردات imports، وراثت ، توابع داخلی built-in functions و موارد دیگر.

یک مثال ساده برای انکه بگوییم چرا Sass نیاز داریم؟

تصور کنید یک وب سایت داریم که سه رنگ اصلی زیر در آن به کار میرود:

#a2b9bc

#b2ad7f

#878f99

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

به جای اینکه مقادیر بالا را بارها و بارها تایپ کنید، می توانید از 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 به CSS استاندارد به یک پیش پردازنده Sass نیاز دارید.

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

در کد بالا همانطور که میبینید پیش از هر دسته کد، کامنتها درون ساختار زیر قرار گرفتند:

/* COMMENTS */

نصب Sass چگونه انجام میشود؟
سیستم مورد نیاز برای Sass

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

وب سایت رسمی Sass

اطلاعات بیشتر در مورد Sass را در وب سایت رسمی Sass بخوانید: https://sass-lang.com/

Sass را نصب کنید

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

در اینجا می توانید اطلاعات بیشتری در مورد آنها بخوانید: sass-lang.com/install

در وب سایت سازنده دو روش را معرفی میکند: یکی استفاده از اپلیکیشن که پولی است و یکی استفاده از خط فرمان یا COMMAND LINE که ما راه دوم و رایگان را برمیگزینیم.

با دانلود بسته مربوط به سیستم عامل خود از GitHub  و افزودن آن ، می توانید Sass را روی ویندوز، مک یا لینوکس نصب کنید . این همه چیز است - هیچ وابستگی خارجی وجود ندارد و هیچ چیز دیگری نیاز به نصب ندارد.

استفاده از (npm) برای نصب Sass

اگر از Node.js استفاده می کنید، می توانید Sass را با استفاده از npm با اجرا نیز نصب کنید

npm install -g sass

با این حال، لطفاً توجه داشته باشید که با این کار پیاده‌سازی جاوا اسکریپت خالص Sass نصب می‌شود که تا حدودی کندتر از سایر گزینه‌های فهرست شده در اینجا اجرا می‌شود. اما رابط کاربری یکسانی دارد، بنابراین اگر به سرعت بیشتری نیاز دارید، بعداً به راحتی می‌توانید آن را با اجرای دیگری تعویض کنید!

اکنون این کد را در خطر فرمان اجرا کنید sass --versionتا مطمئن شوید که درست نصب شده است. اگر انجام شد، این شامل 1.62.0. همچنین می توانید sass --helpبرای اطلاعات بیشتر در مورد رابط خط فرمان اجرا کنید.

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

اکنون پس از نصب نوبت به آموزش ساختار Sass میرسد:

متغیرهای Sass

متغیرها Variable راهی برای ذخیره اطلاعات هستند که می توانید بعداً دوباره از آنها استفاده کنید.

با Sass، می توانید اطلاعات را در متغیرهای زیر ذخیره کنید:

• strings
• numbers
• colors
• booleans
• lists
• nulls

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

$variablename: value;

مثال زیر 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 ترانسپایل می شود، متغیرها (myFont، myColor، و ...) را می گیرد و CSS معمولی را با مقادیر متغیر قرار داده شده در CSS مانند زیر خروجی می دهد:

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

#container {
  width: 680px;
}

آنچه شما پس از ترنسپایل شدن میبینید در بالا آمده است.

دامنه متغیر Sass

متغیرهای در سَس، دارای دو اسکوپ گلوبال global و محلی local هستند. متغیرهای گلوبال در سراسر فایل قابل دسترس هستند. اما وقتی درون یک تگ مانند h1 یک متغیر تعریف میشود و مقداری به آن داده میشود، این متغیر محلی است و خارج از تگ h1 قابل دسترس نیست. به عبارت دیگر متغیرهای Sass فقط در اسکوپ یا سطح تودرتویی nested که در آن تعریف شده اند در دسترس هستند. به مثال زیر نگاه کنید:

$myColor: red;

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

p {
  color: $myColor;
}

سوال: آیا رنگ متن داخل تگ <p>قرمز خواهد بود یا سبز؟ پاسخ: قرمز خواهد شد!

درون تگ h1 یک متغیر تعریف کرده ایم $myColor و مقدار آن را برابر green یعنی سبز قرار داده ایم. این مقدار به دلیل آنکه درون اسکوپ h1 تعریف شده است فقط در محدوده یا اسکوپ h1 در دسترس خواهد بود! و دیگر روی p تاثیری نخواهد داشت.

بنابراین، خروجی CSS خواهد بود:

h1 {
  color: green;
}

p {
  color: red;
}

تعیین دامنه یا محدوده یا اسکوپ در با استفاده از Sass !global

رفتار پیش‌فرض برای محدوده متغیر را می‌توان با استفاده از سوئیچ !global تغییر داد.

!globalاعلام میکند که یک متغیر جهانی است، به این معنی که در همه اسکوپها یا سطوح قابل دسترسی است.

به مثال زیر نگاه کنید (همانطور که در بالا آمده است، اما اینبار !globalاضافه شده):

$myColor: red;

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

p {
  color: $myColor;
}

اینبار رنگ متن داخل تگ <p>سبز می شود!

بنابراین، خروجی CSS خواهد بود:

h1 {
  color: green;
}

p {
  color: green;
}

نکته: متغیرهای جهانی باید خارج از هر قاعده ای تعریف شوند. عاقلانه است که همه متغیرهای سراسری را در فایل خودش با نام "_globals.scss" تعریف کنیم و فایل را با کلمه کلیدی @include اضافه کنیم .

قوانین و Properties پراپرتیهای تودرتو در Sass

قوانین تودرتو Sass

Sass به شما امکان می دهد انتخابگرهای CSS را به همان روشی که HTML قرار داده است، قرار دهید.

به نمونه ای از کدهای Sass برای ناوبری یک سایت نگاه کنید:

ساختار SCSS:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

توجه کنید که در Sass سس، انتخابگرهای ul، li و a در داخل انتخابگر nav قرار دارند .

در حالی که در CSS، قوانین یک به یک تعریف می شوند (و نه تودرتو):

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

از آنجایی که می‌توانید Properties پراپرتیها را در Sass قرار دهید، نسبت به CSS استاندارد، پاک‌تر و راحت‌تر خوانده می‌شود.

پراپرتیهای تودرتو در سس Sass Nested Properties

بسیاری از ویژگی های CSS دارای پیشوند یکسانی هستند، مانند font-family، font-size و font-weight یا text-align، text-transform و text-overflow.

با Sass می توانید آنها را به عنوان ویژگی های تودرتو بنویسید:
ساختار scss:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

ترانسپایلر Sass موارد فوق را به CSS معمولی تبدیل می کند:

خروجی CSS:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

من طرفدار آموزش رایگان برنامه نویسی هستم. منظورم از رایگان این نیست که آموزشهای پولی و تجاری بد هستند، بلکه شما در مسیر برنامه نویس شدن، با استفاده از آموزشهای رایگان به خودتون ثابت میکنید که آدمی که برنامه نویس بشه هستید یا نه.

یک آموزش رایگان درباره سس Sass بهتون معرفی میکنم. زبان این آموزش فارسیه و برای مشاهده آموزشها کافیه تنها ثبت نام کنید و سپس به صفحه آموزش برگردید و فیلم رو مشاهده کنید.

راهنمای استفاده از آموزش ویدیویی: برای اینکه خسته نشید دور آموزش رو روی 1.5 بذارید تا با دور تندتری آموزش رو ببینید. از ایکون چرخ دنده هم میتونید کیفیت آموزش رو تنظیم کنید.

توجه: اگر مطالب این صفحه و آموزش ویدیویی رو متوجه نشدید یعنی شما نیاز به یادگیری و مرور CSS دارید.

لینک آموزش ویدیویی سس به زبان فارسی