آموزش CSS SASS

معرفی CSS SASS

SASS (Syntactically Awesome Style Sheets) یک پیش‌پردازنده‌ی قدرتمند CSS است که امکان نوشتن کدهای CSS پیچیده و بهینه را برای طراحان و توسعه‌دهندگان فراهم می‌کند. آموزش CSS و کار با SASS به شما کمک می‌کند تا از مشکلاتی مثل تکرار کدها، مدیریت دشوار استایل‌ها در پروژه‌های بزرگ، و نیاز به تغییرات مکرر در طراحی‌ها عبور کنید. این مشکلات به ویژه در پروژه‌های بزرگ و پیچیده چالش‌برانگیزتر می‌شوند.

SASS این مشکلات را با افزودن قابلیت‌هایی به CSS حل می‌کند که در استاندارد معمولی CSS وجود ندارد. برخی از این قابلیت‌ها عبارت‌اند از:

متغیرها: با استفاده از متغیرها در SASS، می‌توانید مقادیر تکراری مثل رنگ‌ها، فونت‌ها، و اندازه‌ها را در یک نقطه از کد تعریف کنید و سپس در هر جایی از فایل SASS خود از آن‌ها استفاده کنید. این امر باعث سهولت در تغییرات و به‌روزرسانی‌های آتی می‌شود.
تو در تو نویسی: در SASS، می‌توانید عناصر HTML را به صورت تو در تو در یکدیگر قرار دهید، که باعث افزایش خوانایی و سازماندهی کدها می‌شود. این قابلیت به ویژه برای استایل‌دهی به ساختارهای پیچیده و سلسله‌مراتبی وب‌سایت‌ها مفید است.
پارتیشن‌بندی و ماژولار‌سازی: SASS به شما اجازه می‌دهد فایل‌های CSS خود را به چندین فایل کوچک‌تر تقسیم کنید و از طریق یک فایل مرکزی آن‌ها را مدیریت کنید. این ویژگی به بهبود سازماندهی و مدیریت کدها در پروژه‌های بزرگ کمک می‌کند.
میکسین‌ها: با استفاده از میکسین‌ها می‌توانید بلوک‌های کد تکراری را به صورت توابعی تعریف کنید که در جاهای مختلف از آن‌ها استفاده کنید. این قابلیت به بهینه‌سازی کدها و کاهش حجم آن‌ها کمک می‌کند.
Extend و توابع: در SASS امکان تعریف استایل‌های مشترک و استفاده مجدد از آن‌ها با استفاده از قابلیت Extend وجود دارد. همچنین توابع متعددی برای تغییرات پیچیده مانند روشن‌تر کردن یا تیره‌تر کردن رنگ‌ها فراهم است.
SASS با ترجمه‌ی کدهای نوشته شده به CSS استاندارد، به شما اجازه می‌دهد از مزایای این قابلیت‌ها در مرورگرها بهره‌مند شوید. در حقیقت، شما به مرورگر فقط فایل CSS معمولی را ارائه می‌کنید و از پیش‌پردازنده‌ی SASS برای مدیریت کدها استفاده می‌کنید. با استفاده از SASS، فرایند نوشتن CSS ساده‌تر، سریع‌تر و موثرتر می‌شود و در پروژه‌های بزرگ باعث افزایش بهره‌وری و کاهش احتمال خطاها می‌گردد.

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

SASS Tutorial (آموزش شروع به کار با SASS)

مرحله 1: نصب SASS

برای استفاده از SASS، ابتدا باید آن را روی سیستم خود نصب کنید. نصب SASS به چند روش امکان‌پذیر است:

نصب با استفاده از Node.js: اگر Node.js را روی سیستم خود دارید، می‌توانید SASS را به عنوان یک بسته‌ی Node نصب کنید. در خط فرمان، دستور زیر را اجرا کنید:

npm install -g sass

این دستور SASS را به صورت یک ابزار خط فرمان نصب می‌کند که می‌توانید در هر پروژه‌ای از آن استفاده کنید.

نصب با استفاده از بسته‌های Ruby (روش قدیمی‌تر): اگر Node.js ندارید، می‌توانید SASS را با استفاده از Ruby Gems نصب کنید (این روش در حال حاضر کمتر استفاده می‌شود، اما همچنان کاربردی است). ابتدا مطمئن شوید Ruby روی سیستم شما نصب است و سپس دستور زیر را در خط فرمان وارد کنید:

gem install sass

استفاده از ابزارهای آنلاین و یا برنامه‌های گرافیکی: برخی از ویرایشگرها مثل Visual Studio Code از افزونه‌هایی برای SASS پشتیبانی می‌کنند. همچنین ابزارهای گرافیکی مانند Prepros نیز امکان کامپایل SASS به CSS را با رابط کاربری ساده فراهم می‌کنند.

مرحله 2: ساخت اولین فایل SASS

پس از نصب SASS، می‌توانید اولین فایل SASS خود را ایجاد کنید. فایل‌های SASS با پسوند .scss ذخیره می‌شوند. برای شروع، یک فایل جدید با نام style.scss ایجاد کنید و کد زیر را در آن بنویسید:

$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: darken($primary-color, 20%);
  }

  p {
    line-height: 1.5;
  }
}

در این کد، از یک متغیر به نام $primary-color استفاده شده است که رنگ اصلی را تعریف می‌کند. سپس از این متغیر برای استایل‌دهی به عناصر body و h1 استفاده کرده‌ایم. همچنین از تابع darken استفاده شده که رنگ اولیه را ۲۰٪ تیره‌تر می‌کند.

مرحله 3: کامپایل فایل SASS به CSS

برای استفاده از فایل SASS در مرورگر، باید آن را به CSS کامپایل کنید. برای این کار، از دستور خط فرمان زیر استفاده می‌کنیم:

sass style.scss style.css

این دستور فایل style.scss را به style.css تبدیل می‌کند که می‌توانید آن را در HTML پروژه خود قرار دهید و مرورگر بدون نیاز به SASS، استایل‌ها را اعمال می‌کند.

حالت‌های مختلف کامپایل

SASS چهار نوع خروجی برای CSS فراهم می‌کند که با استفاده از گزینه –style می‌توانید آن‌ها را تنظیم کنید:

nested: CSS را با فرورفتگی نشان می‌دهد که خوانایی بهتری دارد.
expanded: CSS را با تمام خطوط باز نشان می‌دهد که مشابه ساختار اصلی کد SASS است.
compact: هر قانون CSS در یک خط خلاصه می‌شود.
compressed: فایل CSS به صورت فشرده و بدون فضاهای اضافی ذخیره می‌شود، که برای بهینه‌سازی و سرعت بارگذاری مفید است.
برای مثال، برای کامپایل فایل SASS به صورت فشرده از دستور زیر استفاده کنید:

sass --style=compressed style.scss style.css

مرحله 4: اجرای کامپایل خودکار

اگر در حال توسعه پروژه هستید و تغییرات زیادی در فایل‌های SASS اعمال می‌کنید، می‌توانید از دستور watch استفاده کنید تا SASS تغییرات فایل را به صورت خودکار تشخیص داده و فایل CSS را به‌روز کند. دستور زیر را در خط فرمان وارد کنید:

sass --watch style.scss:style.css

هر تغییری که در style.scss ایجاد شود، بلافاصله در فایل style.css اعمال خواهد شد.

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

SASS Variables (متغیرها در SASS)

متغیرها یکی از پرکاربردترین و قدرتمندترین ویژگی‌های SASS هستند که مدیریت و تنظیمات کلی استایل‌ها را به شدت ساده‌تر می‌کنند. با استفاده از متغیرها، می‌توانید مقادیر تکراری و یا قابل تغییر مانند رنگ‌ها، اندازه‌ها، و فونت‌ها را تنها یک‌بار تعریف کنید و سپس در کل پروژه از آن‌ها استفاده کنید. این رویکرد نه تنها به خوانایی و ساختارمند شدن کد کمک می‌کند، بلکه هرگونه تغییر در استایل‌ها را سریع‌تر و آسان‌تر می‌کند.

تعریف متغیرها در SASS

در SASS، متغیرها با علامت $ شروع می‌شوند و می‌توانید مقادیر مختلفی از جمله رنگ‌ها، اندازه‌ها، و حتی فونت‌ها را در آن‌ها ذخیره کنید. برای تعریف یک متغیر، کافی است به شکل زیر عمل کنید:

$primary-color: #3498db;
$font-stack: Helvetica, Arial, sans-serif;
$base-padding: 16px;

در اینجا:

$primary-color: رنگ اصلی پروژه را مشخص می‌کند که می‌تواند در تمام عناصر استفاده شود.
$font-stack: مجموعه فونت‌ها را برای متن اصلی تنظیم می‌کند.
$base-padding: مقدار فضای خالی اصلی را تعیین می‌کند که می‌توانید آن را در بخش‌های مختلف پروژه به کار بگیرید.

استفاده از متغیرها در CSS

وقتی متغیری را تعریف کردید، می‌توانید آن را در هر کجای فایل SASS خود به‌جای مقدار واقعی استفاده کنید. این کار باعث می‌شود تغییرات آسان‌تر انجام شوند و نیازی به ویرایش مکرر در تمام قسمت‌های کد نباشد. به عنوان مثال:

body {
  font-family: $font-stack;
  color: $primary-color;
  padding: $base-padding;
}

در این مثال، هر زمان که بخواهید رنگ اصلی یا فونت کل سایت را تغییر دهید، کافیست فقط مقدار متغیرهای $primary-color یا $font-stack را تغییر دهید.

مزایای استفاده از متغیرها

تسهیل تغییرات کلی: اگر بخواهید رنگ اصلی سایت یا فونت‌های آن را تغییر دهید، تنها کافیست متغیر مربوطه را تغییر دهید. این امر به ویژه در پروژه‌های بزرگ مفید است که استایل‌ها در چندین فایل و یا در بخش‌های مختلف استفاده می‌شوند.

افزایش خوانایی کد: استفاده از متغیرها باعث می‌شود که کد شما خواناتر و بهتر قابل فهم باشد. مثلاً به جای کدهای طولانی و پیچیده رنگ‌ها (مثل #3498db) از نام متغیرها استفاده می‌کنید که به خواننده نشان می‌دهد منظور رنگ اصلی سایت است.

استفاده مجدد از مقادیر: متغیرها امکان استفاده مجدد از مقادیر ثابت را در بخش‌های مختلف فراهم می‌کنند. برای مثال، اگر یک اندازه‌ی خاصی برای فاصله یا یک فونت خاص در چندین قسمت نیاز دارید، تعریف متغیر باعث کاهش خطا و افزایش یکنواختی طراحی می‌شود.

استفاده پیشرفته از متغیرها

SASS همچنین به شما اجازه می‌دهد که از متغیرها در ترکیب با توابع مختلف استفاده کنید. به عنوان مثال، می‌توانید از توابع تغییر رنگ برای تنظیم روشنایی و تیرگی رنگ‌ها بهره ببرید:

$primary-color: #3498db;
$secondary-color: lighten($primary-color, 20%);
$highlight-color: darken($primary-color, 10%);

در اینجا:

$secondary-color: با استفاده از تابع lighten رنگ اصلی را روشن‌تر کرده‌ایم.
$highlight-color: با استفاده از تابع darken رنگ اصلی را تیره‌تر کرده‌ایم.
این روش به شما امکان می‌دهد که استایل‌های بیشتری را بر پایه‌ی رنگ اصلی تعریف کنید و همچنان تغییرات را به راحتی مدیریت کنید.

استفاده از متغیرها در تنظیمات مختلف

یکی از بهترین روش‌ها برای استفاده از متغیرها در SASS، تقسیم‌بندی آن‌ها به چندین فایل مختلف است که هر فایل تنها مسئول یک بخش از پروژه باشد. به عنوان مثال، می‌توانید یک فایل به نام _variables.scss ایجاد کنید و تمام متغیرهای رنگ، اندازه، و فونت را در آن قرار دهید:

// فایل _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$base-font-size: 16px;
$font-stack: Helvetica, Arial, sans-serif;

// فایل style.scss
@import 'variables';

body {
  font-family: $font-stack;
  color: $primary-color;
}

این ساختار باعث می‌شود که متغیرها به طور سازمان‌دهی‌شده‌ای تعریف شوند و مدیریت آن‌ها در پروژه‌های بزرگ ساده‌تر شود.

با استفاده از متغیرها در SASS، شما می‌توانید به راحتی کدهای CSS خود را بهینه‌تر، خواناتر و انعطاف‌پذیرتر کنید و همچنین در زمان توسعه و نگهداری پروژه صرفه‌جویی کنید.

SASS Nesting (تو در تو نویسی در SASS)

تو در تو نویسی یکی از قابلیت‌های جذاب و قدرتمند SASS است که به شما اجازه می‌دهد کدهای CSS خود را با ساختار سلسله‌مراتبی و خواناتری بنویسید. در CSS معمولی، شما مجبورید انتخابگرهای (selectors) پیچیده‌ای بنویسید تا سلسله‌مراتب HTML را منعکس کنید، که در پروژه‌های بزرگ باعث افزایش حجم کد و کاهش خوانایی آن می‌شود. اما در SASS با استفاده از قابلیت تو در تو نویسی می‌توانید استایل‌ها را درست مانند ساختار HTML به صورت سلسله‌مراتبی تنظیم کنید و در نتیجه کد CSS بهتری داشته باشید.

مثال ساده از تو در تو نویسی
فرض کنید می‌خواهید استایل‌های زیر را برای یک بخش به نام .card و عناصر درون آن بنویسید. در CSS معمولی، کد شما به این شکل خواهد بود:

.card {
  padding: 20px;
  border: 1px solid #ccc;
}

.card h2 {
  font-size: 24px;
  color: #333;
}

.card p {
  font-size: 16px;
  color: #666;
}

این کد شامل انتخابگرهای تودرتوی تکراری مانند .card h2 و .card p است که هم فضای زیادی اشغال می‌کنند و هم خوانایی را کاهش می‌دهند. در SASS، می‌توانید با استفاده از قابلیت تو در تو نویسی همین کد را به شکل ساده‌تر و خواناتری بنویسید:

.card {
  padding: 20px;
  border: 1px solid #ccc;

  h2 {
    font-size: 24px;
    color: #333;
  }

  p {
    font-size: 16px;
    color: #666;
  }
}

این ساختار باعث می‌شود کد شما خواناتر شود، زیرا انتخابگرهای تکراری حذف شده و استایل‌ها به صورت مرتب و ساختارمند در دل هم قرار گرفته‌اند.

مزایای تو در تو نویسی در SASS

افزایش خوانایی: به دلیل شباهت ساختار کد SASS به HTML، درک و دنبال کردن کدها راحت‌تر می‌شود.
کاهش تکرار انتخابگرها: در تو در تو نویسی، انتخابگرهای تکراری حذف می‌شوند و کدهای شما ساده‌تر و تمیزتر خواهند بود.
سازمان‌دهی بهتر استایل‌ها: با استفاده از تو در تو نویسی، می‌توانید کدهای مربوط به هر بخش را در یک جا نگه دارید که باعث می‌شود ساختار کد منظم‌تر و نگهداری آن آسان‌تر باشد.

مثال کاربردی از تو در تو نویسی برای ساختارهای پیچیده

در پروژه‌های واقعی، ممکن است شما با ساختارهای پیچیده‌تری مانند منوها و فرم‌ها مواجه شوید. در ادامه، نمونه‌ای از استفاده از تو در تو نویسی برای استایل‌دهی به منوی پیمایش را می‌بینیم:

.navbar {
  background-color: #333;
  padding: 10px;

  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;

    li {
      display: inline-block;
      margin-right: 20px;

      a {
        color: #fff;
        text-decoration: none;
        
        &:hover {
          color: #ff6347;
        }
      }
    }
  }
}

 

در این مثال، سلسله‌مراتب HTML برای .navbar و عناصر ul, li و a به شکل تو در تو نوشته شده است. همچنین از قابلیت pseudo-classes مثل :hover به شکل مختصرتر با استفاده از &: استفاده کرده‌ایم. در نهایت، این کد باعث می‌شود که فایل CSS تولید شده از این کدهای SASS تمیز و ساختارمند باشد.

استفاده از علامت & در تو در تو نویسی

علامت & در SASS نماینده‌ی خود انتخابگر فعلی است و زمانی که از آن استفاده می‌کنید، در واقع انتخابگر اصلی را همراه با کلاس یا pseudo-class اضافه می‌کنید. این قابلیت به ویژه در مواردی که بخواهید از کلاس‌ها و pseudo-classهای مختلفی مانند :hover, :focus, :before یا :after استفاده کنید، بسیار مفید است.

مثال:

.button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: #2980b9;
  }

  &:active {
    background-color: #1c5d76;
  }
}

در این مثال، &:hover و &:active با توجه به .button اعمال می‌شوند، و SASS آن‌ها را به .button:hover و .button:active تبدیل می‌کند.

تو در تو نویسی در SASS به شما این امکان را می‌دهد که کدهای CSS خود را به شکلی بنویسید که به ساختار HTML نزدیک‌تر باشند و در نتیجه کدها خواناتر و مدیریت آن‌ها آسان‌تر باشد. با استفاده از این قابلیت و ترکیب آن با ویژگی‌های دیگر SASS، می‌توانید کدهای بهینه‌تر و حرفه‌ای‌تری بنویسید که در پروژه‌های بزرگ و پیچیده باعث صرفه‌جویی در زمان و کاهش خطاها می‌شوند.

SASS Partials (پارتیشن‌بندی فایل‌ها در SASS)

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

مفهوم پارتیشن‌بندی در SASS

پارتیشن‌بندی به معنای تقسیم کدهای SASS به چندین فایل کوچک‌تر و مرتب است، که هر فایل به یک بخش خاص از استایل‌ها اختصاص دارد. این فایل‌ها به جای این‌که به‌طور مستقیم به CSS تبدیل شوند، با استفاده از دستور @import به یک فایل اصلی SASS اضافه می‌شوند و در نهایت، فقط همین فایل اصلی به CSS کامپایل می‌شود.

نام‌گذاری فایل‌های پارتیشن در SASS

در SASS، فایل‌هایی که به عنوان پارتیشن در نظر گرفته می‌شوند، با یک خط زیر (_) در ابتدای نام فایل تعریف می‌شوند؛ به عنوان مثال:

_variables.scss: برای نگهداری تمام متغیرها.
_mixins.scss: برای نگهداری تمام میکسین‌ها.
_reset.scss: برای ریست کردن استایل‌های پیش‌فرض مرورگر.
_header.scss: برای استایل‌های مربوط به هدر.
_footer.scss: برای استایل‌های مربوط به فوتر.
این فایل‌ها به طور جداگانه به CSS کامپایل نمی‌شوند، بلکه با استفاده از @import در یک فایل اصلی گردآوری شده و سپس به CSS نهایی کامپایل می‌شوند.

نحوه‌ی استفاده از @import برای جمع‌آوری پارتیشن‌ها

برای جمع‌آوری فایل‌های پارتیشن در یک فایل اصلی، از دستور @import استفاده می‌کنیم. به عنوان مثال، فرض کنید فایل اصلی شما main.scss نام دارد و در این فایل می‌خواهید تمام پارتیشن‌ها را گردآوری کنید:

// فایل main.scss
@import 'variables';
@import 'mixins';
@import 'reset';
@import 'header';
@import 'footer';

در اینجا، SASS تمامی فایل‌های _variables.scss, _mixins.scss, _reset.scss, _header.scss و _footer.scss را به main.scss اضافه کرده و در نهایت، کد نهایی main.scss به CSS کامپایل می‌شود. به این ترتیب، در فایل CSS نهایی تمام استایل‌های موردنیاز بدون نیاز به فراخوانی چندین فایل مجزا در HTML وارد می‌شوند.

مزایای استفاده از پارتیشن‌بندی در SASS

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

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

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

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

مثال عملی از پارتیشن‌بندی فایل‌ها در SASS

فرض کنید یک پروژه وب شامل بخش‌های مختلفی مانند هدر، فوتر، فرم‌ها و متغیرها است. می‌توانید فایل‌های پارتیشن را به شکل زیر سازمان‌دهی کنید:

ساختار فایل‌ها:

styles/
├── _variables.scss
├── _mixins.scss
├── _header.scss
├── _footer.scss
├── _forms.scss
└── main.scss

_variables.scss: شامل تمامی متغیرهای رنگ‌ها، فونت‌ها و اندازه‌ها.
_mixins.scss: شامل تمامی میکسین‌ها برای استایل‌دهی‌های تکراری.
_header.scss: شامل استایل‌های مخصوص هدر.
_footer.scss: شامل استایل‌های مربوط به فوتر.
_forms.scss: شامل استایل‌های فرم‌ها.

فایل main.scss (به عنوان فایل اصلی):

// فایل main.scss
@import 'variables';
@import 'mixins';
@import 'header';
@import 'footer';
@import 'forms';

اکنون با کامپایل کردن فایل main.scss، تمامی استایل‌های مربوط به پروژه در فایل نهایی CSS گنجانده خواهد شد.

نکته مهم: ساختاردهی فایل‌های پارتیشن به صورت سلسله‌مراتبی
برای پروژه‌های بزرگ‌تر، می‌توانید فایل‌های پارتیشن را در پوشه‌های مجزا نگه‌دارید. به عنوان مثال:

styles/
├── base/
│   ├── _variables.scss
│   ├── _mixins.scss
├── components/
│   ├── _header.scss
│   ├── _footer.scss
│   ├── _forms.scss
└── main.scss

و سپس در main.scss می‌توانید فایل‌ها را به این شکل اضافه کنید:

// فایل main.scss
@import 'base/variables';
@import 'base/mixins';
@import 'components/header';
@import 'components/footer';
@import 'components/forms';

با پارتیشن‌بندی و استفاده از @import در SASS، شما می‌توانید پروژه‌های CSS بزرگ و پیچیده را به راحتی مدیریت کنید و در عین حال کدهای خود را تمیزتر و قابل نگهداری‌تر نگه دارید.

SASS Mixins (میکسین‌ها در SASS)

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

مفهوم میکسین در SASS

میکسین‌ها در SASS به شما این امکان را می‌دهند که یک بلوک از کد CSS را تعریف کنید و با صدا زدن این میکسین، آن کد را به راحتی و بدون تکرار در بخش‌های مختلف پروژه اعمال کنید. میکسین‌ها همچنین می‌توانند پارامتر دریافت کنند که این امکان را فراهم می‌کند که بسته به نیاز، کدها را به شکل پویا تغییر دهید.

تعریف و استفاده از میکسین در SASS

برای تعریف یک میکسین از کلمه کلیدی @mixin استفاده می‌شود و سپس نام میکسین و محتوای آن را مشخص می‌کنید. برای فراخوانی میکسین، از @include استفاده می‌شود.

مثال: تعریف و استفاده از یک میکسین ساده برای گرد کردن گوشه‌ها

@mixin rounded-corners($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

// استفاده از میکسین
.button {
  @include rounded-corners(10px);
}

در این مثال، میکسین rounded-corners ایجاد شده است که مقدار $radius را به عنوان پارامتر می‌گیرد. سپس با استفاده از @include rounded-corners(10px); این میکسین را فراخوانی کرده و به عنصر .button اعمال کرده‌ایم.

مزایای استفاده از میکسین‌ها

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

مثال‌های کاربردی از میکسین‌ها

میکسین برای استایل‌دهی ریسپانسیو
یکی از کاربردهای رایج میکسین‌ها در SASS، ایجاد استایل‌های ریسپانسیو است. برای این کار می‌توانید میکسینی ایجاد کنید که رسانه‌ها (media queries) را بسته به اندازه صفحه تنظیم کند. به عنوان مثال:

@mixin responsive($breakpoint) {
  @if $breakpoint == 'phone' {
    @media (max-width: 600px) { @content; }
  }
  @else if $breakpoint == 'tablet' {
    @media (max-width: 768px) { @content; }
  }
  @else if $breakpoint == 'desktop' {
    @media (max-width: 1024px) { @content; }
  }
}

// استفاده از میکسین
.container {
  width: 100%;
  @include responsive('tablet') {
    width: 80%;
  }
}

 

در این مثال، میکسین responsive بسته به پارامتر $breakpoint، استایل‌های خاصی را در اندازه‌های مختلف صفحه اعمال می‌کند. در اینجا، استایل .container به طور پیش‌فرض عرض 100% دارد و در حالت نمایش روی تبلت به 80% کاهش می‌یابد.

میکسین برای ایجاد سایه (Box Shadow)
میکسین‌ها برای استایل‌های تکراری مانند سایه‌ها بسیار مفید هستند. می‌توانید یک میکسین برای سایه‌های مختلف ایجاد کنید:

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
  -webkit-box-shadow: $x $y $blur $color;
  -moz-box-shadow: $x $y $blur $color;
}

// استفاده از میکسین
.card {
  @include box-shadow(0px, 4px, 10px, rgba(0, 0, 0, 0.2));
}

در این مثال، میکسین box-shadow چهار پارامتر را برای تنظیم سایه دریافت می‌کند: x و y برای میزان جابه‌جایی سایه، blur برای محو شدن، و color برای رنگ سایه. سپس با استفاده از @include، این میکسین را به عنصر .card اعمال کرده‌ایم.

میکسین برای دکمه‌های چندمنظوره
با میکسین‌ها می‌توانید استایل‌های پایه‌ای برای دکمه‌ها ایجاد کرده و آن‌ها را برای انواع مختلف دکمه‌ها تنظیم کنید:

@mixin button-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;

  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// استفاده از میکسین برای دکمه‌های مختلف
.primary-btn {
  @include button-style(#3498db, #fff);
}

.secondary-btn {
  @include button-style(#2ecc71, #fff);
}

در این مثال، میکسین button-style به دو پارامتر bg-color (رنگ پس‌زمینه) و text-color (رنگ متن) نیاز دارد. با استفاده از این میکسین، دو دکمه با رنگ‌های مختلف ایجاد کرده‌ایم و قابلیت‌ها و استایل‌های مشترک بین آن‌ها حفظ شده است.

میکسین‌های تو در تو برای تنظیمات پیچیده‌تر
در پروژه‌های پیچیده‌تر، می‌توانید از میکسین‌های تو در تو استفاده کنید تا استایل‌های بیشتری را در اختیار داشته باشید. به عنوان مثال، می‌توانید یک میکسین ایجاد کنید که هم استایل‌های پایه‌ای دکمه را تنظیم کند و هم در شرایط خاص تغییرات بیشتری ایجاد کند:

@mixin button($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  
  &:hover {
    background-color: darken($bg-color, 10%);
  }

  &:focus {
    outline: none;
    box-shadow: 0px 0px 5px lighten($bg-color, 20%);
  }
}

این میکسین برای هر دکمه، هم حالت hover و هم حالت focus را تعریف کرده است. با این کار، استایل‌ها و قابلیت‌های اضافی برای دکمه‌ها را بدون تکرار کد ایجاد کرده‌اید.

میکسین‌ها در SASS یکی از ویژگی‌های مهم برای کاهش تکرار و بهبود ساختار کد CSS هستند. با استفاده از میکسین‌ها، شما می‌توانید استایل‌هایی با قابلیت تنظیم بالا و انعطاف‌پذیری ایجاد کنید که باعث ساده‌تر شدن نگهداری و تغییرات در پروژه‌های CSS می‌شوند.

SASS Extend (قابلیت Extend در SASS)

قابلیت Extend در SASS یکی از ابزارهای قدرتمند برای استفاده‌ی مجدد از استایل‌ها است. Extend به شما این امکان را می‌دهد که استایل‌های یک انتخابگر (selector) را به انتخابگر دیگری اضافه کنید، بدون این‌که کدهای تکراری در فایل نهایی CSS ایجاد شود. این ویژگی مخصوصاً زمانی کاربرد دارد که بخواهید استایل‌هایی را برای گروهی از عناصر مشابه اعمال کنید.

مفهوم Extend در SASS

قابلیت Extend به شما این امکان را می‌دهد که استایل‌های یک کلاس یا انتخابگر را در سایر کلاس‌ها به اشتراک بگذارید. به عبارت دیگر، با استفاده از Extend، می‌توانید استایل‌های از پیش تعریف شده را در چندین عنصر اعمال کنید، که باعث کاهش حجم و تکرار کدهای CSS نهایی می‌شود. برای این کار از دستور @extend استفاده می‌شود.

تفاوت Extend با Mixins

در حالی که میکسین‌ها و Extend هر دو برای کاهش تکرار کد استفاده می‌شوند، اما کاربردها و نحوه عملکرد آن‌ها تفاوت‌هایی دارد:

Mixins: میکسین‌ها بیشتر برای مواقعی استفاده می‌شوند که نیاز به قابلیت تنظیم و انعطاف‌پذیری دارید. می‌توانید مقادیر متفاوتی را به میکسین‌ها پاس دهید و کدهای سفارشی ایجاد کنید. همچنین میکسین‌ها امکان دریافت پارامتر و اعمال استایل‌های مختلف را دارند.

Extend: از طرف دیگر، Extend زمانی مفید است که نیاز دارید چندین انتخابگر، استایل‌های مشابهی داشته باشند بدون قابلیت تنظیم و تغییر. Extend در مواردی که استایل‌ها یکسان هستند و نیازی به پارامترهای خاص ندارند، کد تمیزتر و مختصر‌تری ایجاد می‌کند.

مثال‌های کاربردی از Extend

مثال ساده از Extend
فرض کنید استایل‌هایی برای یک کلاس .message تعریف کرده‌اید و می‌خواهید این استایل‌ها را به کلاس‌های دیگر مانند .success, .error و .warning نیز اعمال کنید. با استفاده از Extend، می‌توانید این کار را به سادگی انجام دهید:

.message {
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
}

.success {
  @extend .message;
  background-color: #2ecc71;
  color: #fff;
}

.error {
  @extend .message;
  background-color: #e74c3c;
  color: #fff;
}

.warning {
  @extend .message;
  background-color: #f1c40f;
  color: #333;
}

در این مثال:

کلاس .message استایل‌های پایه‌ای را شامل می‌شود.
کلاس‌های .success, .error و .warning با استفاده از @extend از استایل‌های .message بهره‌مند می‌شوند و در عین حال استایل‌های خاص خود را دارند.
در فایل CSS نهایی، SASS به‌صورت خودکار تمام انتخابگرهایی که از Extend استفاده کرده‌اند را به صورت ترکیبی با کلاس اصلی درآورده و بهینه می‌کند:

.message, .success, .error, .warning {
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
}

.success {
  background-color: #2ecc71;
  color: #fff;
}

.error {
  background-color: #e74c3c;
  color: #fff;
}

.warning {
  background-color: #f1c40f;
  color: #333;
}

این کد CSS تولید شده، کوتاه‌تر و بهینه‌تر است و از تکرار استایل‌ها جلوگیری می‌کند.

مثال کاربردی از تفاوت Extend و Mixins

گاهی اوقات ممکن است نیاز داشته باشید که استایل‌ها را با مقادیر متفاوتی اعمال کنید. در چنین مواردی استفاده از میکسین‌ها مناسب‌تر است، زیرا می‌توانید پارامترها را برای تنظیم استایل‌ها اضافه کنید. در ادامه، یک مثال از کاربرد Extend و Mixins را برای موقعیت‌های مختلف می‌بینید:

استفاده از Extend برای استایل‌های ثابت و مشابه

.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
}

.btn-primary {
  @extend .btn;
  background-color: #3498db;
  color: #fff;
}

.btn-secondary {
  @extend .btn;
  background-color: #95a5a6;
  color: #333;
}

در اینجا، استایل‌های پایه‌ای دکمه‌ها (padding, border-radius, font-weight) در کلاس .btn تعریف شده و برای دکمه‌های مختلف مانند .btn-primary و .btn-secondary با استفاده از Extend تکرار شده است.

استفاده از Mixins برای دکمه‌ها با مقادیر پویا اگر بخواهید استایل دکمه‌ها را به‌صورت پویا با رنگ‌های مختلف تنظیم کنید، میکسین مناسب‌تر است:

@mixin button($bg-color, $text-color) {
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  background-color: $bg-color;
  color: $text-color;
}

.btn-primary {
  @include button(#3498db, #fff);
}

.btn-secondary {
  @include button(#95a5a6, #333);
}

 

در اینجا، میکسین button پارامترهایی را برای رنگ پس‌زمینه و رنگ متن دریافت می‌کند، که به شما امکان می‌دهد رنگ‌های مختلفی را برای دکمه‌ها تعریف کنید.

مزایا و معایب Extend

مزایا:
کاهش حجم و تکرار کد در پروژه‌هایی که استایل‌های مشابه دارند.
مناسب برای مواقعی که استایل‌ها ثابت و بدون نیاز به تغییرات پویا هستند.
معایب:
Extend ممکن است گاهی منجر به تولید CSS پیچیده و زیاد شود، مخصوصاً اگر چندین کلاس از یک کلاس پایه Extend کنند.
قابل استفاده برای استایل‌های پویا نیست، زیرا نمی‌توان پارامترها را به Extend ارسال کرد.
قابلیت Extend در SASS برای مواقعی بسیار مفید است که نیاز به استفاده‌ی مجدد از استایل‌های ثابت در کلاس‌های مختلف دارید. با این حال، اگر نیاز به استایل‌های پویا و قابلیت تنظیم دارید، بهتر است از میکسین‌ها استفاده کنید. ترکیب مناسب Extend و میکسین‌ها در پروژه‌های CSS می‌تواند به بهینه‌سازی و کاهش حجم کدها کمک کند و در عین حال، نگهداری و توسعه پروژه‌ها را ساده‌تر کند.

SASS Functions (توابع در SASS)

توابع (Functions) در SASS، ابزارهای قدرتمندی هستند که به شما اجازه می‌دهند تا کدهای CSS خود را بهینه‌تر و پویاتر بنویسید. این توابع برای انجام محاسبات، اعمال تغییرات پیچیده بر روی رنگ‌ها، اندازه‌ها و حتی ایجاد استایل‌های سفارشی استفاده می‌شوند. با استفاده از توابع، شما می‌توانید کدهای CSS خود را به شکلی بنویسید که نیاز به تغییرات دستی کاهش یابد و پروژه‌هایتان تمیزتر و قابل نگهداری‌تر باشد.

انواع توابع در SASS

SASSشامل دو نوع تابع است:

توابع پیش‌فرض SASS: توابعی که به صورت داخلی در SASS وجود دارند و برای انجام تغییرات مختلف روی رنگ‌ها، اندازه‌ها، و موارد دیگر به کار می‌روند.
توابع سفارشی (Custom Functions): توابعی که خودتان می‌توانید در SASS تعریف کنید تا عملیات‌های سفارشی خاص خود را انجام دهید.

توابع پیش‌فرض

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

توابع تغییر رنگ

یکی از کاربردهای اصلی توابع در SASS، تغییر و تنظیم رنگ‌ها است. برخی از توابع پرکاربرد رنگ شامل موارد زیر می‌شوند:

lighten(color, amount): این تابع یک رنگ را روشن‌تر می‌کند. مقدار amount میزان روشنایی را به صورت درصد تعیین می‌کند.

darken(color, amount): این تابع یک رنگ را تیره‌تر می‌کند. مقدار amount میزان تیرگی را به صورت درصد مشخص می‌کند.

saturate(color, amount): میزان اشباع (saturation) رنگ را افزایش می‌دهد.

desaturate(color, amount): میزان اشباع رنگ را کاهش می‌دهد.

adjust-hue(color, degrees): رنگ را به میزان مشخصی (درجه) در چرخه رنگ تغییر می‌دهد.

مثال: فرض کنید رنگ اصلی پروژه‌ی شما آبی (#3498db) است و می‌خواهید رنگ‌های روشن‌تر و تیره‌تر آن را در بخش‌های مختلف استفاده کنید.

$primary-color: #3498db;
$light-color: lighten($primary-color, 20%);
$dark-color: darken($primary-color, 15%);

.button {
  background-color: $primary-color;
  &:hover {
    background-color: $light-color;
  }
}

.alert {
  background-color: $dark-color;
}

در این مثال:

$light-color با استفاده از تابع lighten، رنگ اصلی را ۲۰٪ روشن‌تر کرده است.
$dark-color با استفاده از تابع darken، رنگ اصلی را ۱۵٪ تیره‌تر کرده است.
این توابع به شما اجازه می‌دهند که بدون نیاز به تعریف رنگ‌های جداگانه، طیف‌های رنگی مختلفی ایجاد کنید و از آن‌ها در استایل‌دهی استفاده کنید.

توابع اندازه‌گیری و ریاضی
SASS دارای توابعی برای انجام محاسبات ریاضی و تنظیم اندازه‌ها است. این توابع به خصوص زمانی کاربرد دارند که بخواهید اندازه‌های پویا یا نسبی ایجاد کنید.

percentage(number): مقدار یک عدد را به درصد تبدیل می‌کند.
round(number): یک عدد را به نزدیک‌ترین عدد صحیح گرد می‌کند.
ceil(number): یک عدد را به بالاترین عدد صحیح نزدیک گرد می‌کند.
floor(number): یک عدد را به پایین‌ترین عدد صحیح نزدیک گرد می‌کند.
مثال:

$base-padding: 16px;
$double-padding: $base-padding * 2;
$half-padding: $base-padding / 2;

.container {
  padding: $double-padding;
}

.small-box {
  padding: $half-padding;
}

در اینجا، $double-padding و $half-padding مقادیر دو برابر و نصف $base-padding را محاسبه می‌کنند. این کار به شما امکان می‌دهد که اندازه‌ها را به صورت پویا تنظیم کنید.

توابع ترکیب رنگ‌ها
SASS توابعی برای ترکیب و تغییر رنگ‌ها دارد که به شما اجازه می‌دهد ترکیب‌های سفارشی‌تری ایجاد کنید.

mix(color1, color2, weight): این تابع دو رنگ را با یکدیگر ترکیب می‌کند. weight میزان تاثیر هر رنگ را تعیین می‌کند.
مثال:

$color1: #3498db;
$color2: #e74c3c;
$combined-color: mix($color1, $color2, 70%);

.box {
  background-color: $combined-color;
}

در این مثال رنگ قرمز و آبی با وزن ۷۰٪ به نفع رنگ اول ترکیب می‌شوند.

تابع mix یک رنگ ترکیبی ایجاد می‌کند که می‌تواند به استایل خاصی در طراحی کمک کند.

توابع سفارشی در SASS
علاوه بر توابع داخلی، شما می‌توانید توابع سفارشی خود را در SASS تعریف کنید تا عملیات‌های خاصی را انجام دهند. برای تعریف تابع سفارشی، از @function استفاده می‌شود.

مثال از تابع سفارشی برای محاسبه حاشیه پویا:

@function calculate-margin($size) {
  @return $size * 1.5;
}

.box {
  margin: calculate-margin(10px);
}

در این مثال، تابع calculate-margin اندازه‌ای را دریافت کرده و ۱.۵ برابر آن را برمی‌گرداند. به این ترتیب، می‌توانید اندازه‌های پویا را به راحتی در پروژه تنظیم کنید.

نمونه کاربردی از توابع رنگ برای تم‌های مختلف
در یک پروژه ممکن است نیاز داشته باشید که تم‌های مختلفی مانند حالت تیره و حالت روشن داشته باشید. در چنین مواردی می‌توانید با توابع رنگی SASS، تغییرات تم را به راحتی مدیریت کنید:

$primary-color: #3498db;

$light-theme-bg: lighten($primary-color, 40%);
$dark-theme-bg: darken($primary-color, 40%);

.light-theme {
  background-color: $light-theme-bg;
  color: darken($primary-color, 20%);
}

.dark-theme {
  background-color: $dark-theme-bg;
  color: lighten($primary-color, 20%);
}

در این مثال:

$light-theme-bg و $dark-theme-bg رنگ پس‌زمینه را برای تم‌های مختلف تنظیم می‌کنند.
رنگ متن نیز بسته به تم، تیره‌تر یا روشن‌تر شده است.
توابع در SASS امکانات زیادی را برای تنظیم و سفارشی‌سازی استایل‌ها فراهم می‌کنند. توابع پیش‌فرض SASS برای انجام محاسبات و تنظیم رنگ‌ها بسیار کارآمد هستند و با توابع سفارشی، می‌توانید استایل‌های منحصربه‌فرد و قابل تنظیمی ایجاد کنید که نیازهای پروژه‌های پیچیده را به راحتی برآورده می‌کنند.

نتیجه گیری

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

متغیرها و میکسین‌ها امکان تنظیم و تغییر آسان استایل‌ها را فراهم می‌کنند، تو در تو نویسی ساختار کد را نزدیک به HTML نگه می‌دارد، پارتیشن‌بندی مدیریت فایل‌های بزرگ را ساده می‌کند، و توابع نیز به انجام محاسبات و تغییرات پیچیده کمک می‌کنند. با استفاده از این قابلیت‌ها، می‌توانید پروژه‌های CSS خود را سریع‌تر، کارآمدتر و با کدهای تمیزتر توسعه دهید. SASS ابزاری بسیار مفید برای بهبود کارایی و کاهش خطاها در توسعه فرانت‌اند است.