مقدمة به Sass

چیزهایی که باید بدانید

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

• HTML
• CSS

اگر می‌خواهید این دروس را اول یاد بگیرید، لطفاً به اینجا بروید: صفحه اصلی برای دسترسی به این آموزش‌ها به اینجا بروید.

Sass چیست؟

• Sass به معنای Syntactically Awesome Stylessheet (استایل‌های گرافیکی فوق‌العاده)
• Sass یک گسترش CSS است
• Sass یک پیش‌پردازنده CSS است
• Sass با تمام نسخه‌های CSS سازگار است
• Sass تکرارهای CSS را کاهش می‌دهد و در نتیجه زمان را صرفه‌جویی می‌کند
• Sass توسط Hampton Catlin طراحی شده و توسط Natalie Weizenbaum در سال 2006 توسعه داده شده است
• Sass رایگان است و می‌توانید آن را بدون هزینه دانلود و استفاده کنید

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

شبکه‌های استایل越来越大، پیچیده‌تر و سخت‌تر برای نگهداری می‌شوند. اینجاست که پیش‌پردازنده‌های CSS می‌توانند کمک کنند.

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

یک مثال ساده و مفید از Sass

فرض کنید که وب‌سایتی داریم که دارای سه رنگ اصلی است:

پس، شما باید چندین بار این مقادیر HEX را تایپ کنید؟ چندین بار. اگر رنگ‌های مشابه تغییر کنند چطور؟

شما می‌توانید کد زیر را با Sass بنویسید، به جای اینکه چندین بار همان مقدار را تایپ کنید:

مثال Sass

/* برای تعریف متغیر رنگ اصلی */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* استفاده از متغیر */
.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 را برگردانید.

توضیح:ترجمه یک اصطلاح است که برای تبدیل کد منبع نوشته شده به یک زبان به کد منبع نوشته شده به زبان دیگر استفاده می‌شود.

نوع فایل Sass

نام پسوند فایل‌های Sass ".scss" است.

توضیحات Sass

Sass از توضیحات استاندارد CSS پشتیبانی می‌کند /* توضیحات */، همچنین پشتیبانی از توضیحات درون خطی را دارد // توضیحات:

مثال Sass

/* تعریف رنگ‌های اصلی */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* استفاده از متغیر */
.main-header {
  background-color: $primary_1; // می‌توانید در اینجا توضیحات درون خطی اضافه کنید
}