آموزش sass به زبان ساده

فرهاد رضاییمرداد ۱۱, ۱۳۹۹

0 1,410 خواندن این مطلب 29 دقیقه زمان میبرد

چرا به آموزش sass نیاز داریم

Sass یک پیش‌پردازنده یا اصطلاحا preproccesor برای css است. استفاده از sass این امکان را به شما می‌دهد تا بتوانید توابع، متغیرها و ماژول‌های خود را تعریف کنید که با این کار می‌توانید محدودیت ها و ضعف های css و تکرارهای زیاد در css را رفع کنید. در واقع ما دو نوع پیش پردازنده برای css داریم به نام‌های sass و less. Sass محبوب ترین و پرکاربردترین پیش پردازنده برای css می باشد و ما نیز در آموزش sass به آن خواهیم پرداخت.

فهرست مطالب این نوشته

ویدیو پییشنهادی : آموزش طراحی وب سایت (Front-End)

برای اضافه کردن یک فایل sass تنها کافیست تا کامپایلر sass را نصب کنید. برای فراخوانی فایل های sass از دو پسوند scss و sass می توانید استفاده کنید. تنها تفاوت در این دو در نوع تعاریف و دستورات آن می‌باشد و این کاملا بستگی به نوع استفاده شما دارد. sass با استفاده از زبان برنامه نویسی روبی نوشته شده است.

نصب sass

برای نصب کامپایلر sass به سایت آن به آدرس https://sass-lang.com/install مراجعه کنید. در این صفحه می‌توانید انواع روش‌های نصب کامپایلر sass را مشاهده کنید. در صورتی که شما پکیج npm را بر روی سیستم عامل خود دارید، می‌توانید از روش نصب از طریق npm نصب sass را انجام دهید. همچنین شما می‌توانید به آدرس github که در داخل سایت قرار داده شده است، فایل sass متناسب با سیستم عاملتان را دانلود کنید. سپس تنها کافیست تا فایل sass در داخل فولدر دانلود شده را به آدرس path خود اضافه کنید. هیچ نصب اضافه‌ای و یا پکیج دیگری نیاز نمی باشد. در صورتی که به درستی فرآنید را طی کرده باشید، از طریق ترمینال و با استفاده از دستور sass –version باید بتوانید ورژن sass را مشاهده کنید.

جهت استفاده از sass در پروژه و تبدیل فایل sass به css، ما از روش command line استفاده می کنیم. در این حالت شما باید دستور زیر را در محلی که فایلsass با فرمت scss را دارید و محلی که قصد دارید تا فایل css ساخته را تعریف کنید:

sass source/stylesheets/index.scss

build/stylesheets/index.css

با استفاده از این دستور فایل css مورد نظر با استفاده از فایلsass با فرمت scss ساخته می شود و از فایل css مورد نظر می‌توانید جهت استایل دهی به المان‌های html استفاده کنید.

تابع debug

این تابع به شما این امکان را می‌دهد تا بدون تولید یک فایل css، خروجی فایل sass مورد نظرتان را مشاهده کنید. همانطور که از اسم تابع مشخص است، جهت دیباگ کردن کرد مورد استفاده قرار می گیرد. در مثال‌های پیش‌رو، در بخش‌های مختلف از این تابع استفاده خواهم کرد.

@mixin inset-divider-offset($offset, $padding) {
  $divider-offset: (2 * $padding) + $offset;
  @debug "divider offset: #{$divider-offset}";

  margin-left: $divider-offset;
  width: calc(100% - #{$divider-offset});
}

که خروجی زیر را در ترمینال به ما می دهد:

test.scss:3 Debug: divider offset: 132px

متغیرها در آموزش sass

در sass شما می‌توانید انواع متغیرهای زیر را تعریف کنید:

رشته‌ها
اعداد
رنگ‌ها
بولین‌ها
لیست‌ها
تهی‌ها

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

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

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

#container {
  width: $myWidth;
}

در این مثال برای نوع فونت، رنگ فونت، عرض و اندازه‌ی فونت متغیر تعریف شده است. پس از کامپایل فایل sass و تبدیل آن به فایل css شما می‌توانید ویژگی‌های زیر در css خود مشاهده کنید که در داخل فایل html استایل دهی شده است.

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

#container {
  width: 680px;
  border: 1px blue double;
}

و فایل html مورد نظر به صورت زیر می باشد:

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="mystyle.css" />
  <body>
    <h1>Hello World</h1>

    <p>This is a paragraph.</p>

    <div id="container">This is some text inside a container.</div>
  </body>
</html>

نوع دیگری از متغیر‌ها، لیست‌ها می باشند. یکی از کاربرد‌های لیست‌ها در حلقه‌ها می باشد که جلوتر به آن خواهیم پرداخت. اولین مورد در بحث لیست‌ها، نحوه‌ی اضافه کردن مقدار به یک متغیر از نوع لیست می باشد. برای اینکار از append استفاده باید کرد.

@debug append(10px 12px 16px, 25px); // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]

مورد دیگر در لیست‌ها نحوه ی پیدا کردن یک مقدار در داخل یک لیست می‌باشد. در صورتی که مقداری یافت نشود، مقدار null را می دهد.

@debug index(1px solid red, 1px); // 1
@debug index(1px solid red, solid); // 2
@debug index(1px solid red, dashed); // null

برای دسترسی به یک مقدار در داخل یک لیست بر اساس جایگاه آن، نیز به صورت زیر می‌توان عمل کرد:

@debug nth(10px 12px 16px, 2); // 12px
@debug nth([line1 line2 line3], -1); // line3

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

@debug set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px
@debug set-nth(10px 20px 30px, -1, 8em); // 10px, 20px, 8em
@debug set-nth(
  (Helvetica, Arial, sans-serif),
  3,
  Roboto
); // Helvetica, Arial, Roboto

برای بدست آوردن طول یک لیست نیز از دستور زیر استفاده باید کرد:

@debug length(10px 20px 30px);

برای اینکه کمی کاربرد لیست‌ها در sass قابل فهم تر باشد، به مثال زیر توجه کنید. در این مثال یک حلقه نوشته شده است که در هر بار یکی از مقادیر لیست متغیر $sizes را در کلاس مورد نظر قرار میدهد و آن را تعریف می کند. نکته ای که در این مثال است این می باشد که شما برای تعریف یک لیست، نیاز نیست حتما آن را در () قرار دهید.

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

خروجی فایل sass بالا به صورت زیر در css خواهد بود:

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

مقادیر یک لیست در داخل sass غیر قابل تغییر می‌باشند.

نوع دیگری از متغیرها در sass متغیرهای کلید:مقدار می باشند که با استفاده از map تعریف می شوند. در تعریف زیر، با استفاده از کلید متغیر $font-weights که به صورت یک دیکشنری تعریف شده است، به مقدار آن می‌توان دسترسی یافت.

$font-weights: (
  "regular": 400,
  "medium": 500,
  "bold": 700
);

@debug map-get($font-weights, "medium"); // 500
@debug map-get($font-weights, "extra-bold"); // null

برای دسترسی به کلید‌ها و یا مقادیر یک دیکشنری با استفاده از map به صورت زیر نیاز است عمل کنید:

دسترسی به کلیدها

$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map-keys($font-weights); // "regular", "medium", "bold"

دسترسی به مقادیر

$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map-values($font-weights); // 400, 500, 700

در صورتی که قصد دارید تا وجود یک کلید را در داخل یک دیکشنری بررسی کنید، به صورت زیر می‌توانید عمل کنید:

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map-has-key($font-weights, "regular"); // true
@debug map-has-key($font-weights, "bolder"); // false

یک مثال از کاربرد کلید:مقدار در حلقه‌ها را در پایین می‌توانید مشاهده کنید. متناسب با هر کلید، مقدار متناسب با آن را می‌توانید در هر بار حلقه قرار دهید.

$icons: (
  "eye": "\f112",
  "start": "\f12e",
  "stop": "\f12f"
);

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

برای ترکیب کردن مقادیر دو دیکشنری ویا اضافه کردن مقداری به صورت کلید:مقدار و ایجاد یک دیکشنری جدید از آن‌ها، با استفاده از map به صورت زیر باید عمل کنید:

$light-weights: (
  "lightest": 100,
  "light": 300
);
$heavy-weights: (
  "medium": 500,
  "bold": 700
);

@debug map-merge($light-weights, $heavy-weights);
// (
//   "lightest": 100,
//   "light": 300,
//   "medium": 500,
//   "bold": 700
// )

در صورت حذف کلید:مقدار از یک دیکشنری با استفاده از map به صورت زیر می‌توانید عمل کنید:

$font-weights: (
  "regular": 400,
  "medium": 500,
  "bold": 700
);

@debug map-remove($font-weights, "regular"); // ("medium": 500, "bold": 700)
@debug map-remove($font-weights, "regular", "bold"); // ("medium": 500)
@debug map-remove($font-weights, "bolder");
// ("regular": 400, "medium": 500, "bold": 700)

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

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

مقاله پییشنهادی : آموزش HTML به زبان ساده – قسمت اول

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

فایل scss

(دقت کنید در مثال های مورد نظر فرمت فایل از نوع scss می باشد.)

$myColor: red;

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

p {
  color: $myColor;
}

فایل css که از کامپایل فایل scss ایجاد شده است

h1 {
  color: green;
}

فایل html

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="mystyle.css" />
  <body>
    <h1>Hello World</h1>

    <p>This is a paragraph.</p>
  </body>
</html>

حال فرض کنید قصد دارید تا از قسمت به بعد در فایل css، تگ‌ها مقداری متفاوت از مقدار جهانی متغیر مورد را دریافت کنند. بدین معنا که به صورت محلی یک متغیر را تعریف کنید ولی مقدار آن را به صورت جهانی تغییر دهید. برای درک بهتر به مثال زیر توجه کنید:

$myColor: red;

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

p {
  color: $myColor;
}

در مثال بالا با استفاده از کلید واژه !global مقدار متغیر جهانی مورد نظر تغییر می کند و مقدار جدید متغیر جهانی، مقداری می شود که در داخل تگ h1 برای آن تعریف شده است.

فایل css نیز به صورت زیر در خواهد آمد:

h1 {
  color: green;
}

p {
  color: green;
}

تعریف تودرتو در آموزش sass

اگر از مقاله‌ی آموزش 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;
}

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

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

که خروجی کد بالا، همان فایل css ای می باشد که بالاتر مثال زده شد، فایل html مثال بالا نیز به صورت زیر می باشد:

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="mystyle.css" />
  <body>
    <nav>
      <ul>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">SASS</a></li>
      </ul>
    </nav>
  </body>
</html>

علاوه بر این، شما می‌توانید با استفاده از کلید واژه‌های مشخص، به ویژگی‌های یک ویژگی مشخص مقدار دهی کنید، به طور نمونه شما برای فونت، نوع فونت، رنگ فونت و اندازه‌ی فونت و ویژگی‌های مختلف این شکلی دارید، در عوض اینکه تک تک این موارد را به صورت جداگانه تعریف کنید، در sass می توانید به صورت زیر عمل کنید:

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

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

در مورد اول، شما برای فونت ویژگی‌های آن را به صورت خلاصه تعریف می‌توانید کنید و برای مورد دوم برای یک متن یا عبارت می‌توانید ویژگی های مورد نظر آن را تعریف کنید. خروجی کد sass بالا در css به صورت زیر خواهد بود:

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

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

قابلیت import در sass

حتما برایتان پیش آمده که با اصطلاح DRY (Don’t Repeat Yourself) برخورد کرده باشید. این اصطلاح در زمانی به کار می رود که شما یک قطعه کدی را در جاهای مختلف تکرار می کنید و موجب این می شود که حجم کد نوشته شده بالا برود. یکی از مزایای sass این امکان را فراهم می کند تا شما از تکرار کدهای یکسان در بخش‌های مختلف بتوانید پرهیز کنید. برای اینکار از قابلیتی به نام import استفاده می‌شود.

مقاله پییشنهادی : آموزش HTML به زبان ساده – قسمت دوم

فرض کنید شما فایل به نام variables دارید و در این فایل مجموعه ای از متغیرهای مورد استفاده از قسمت های مختلف کدتان وجود دارد. یک روش این می باشد که شما هر بار در هر فایل sass این متغیرها را بنویسید که این کار منجر می شود تا استاندارد دوباره خود را تکرار نکردن را رعایت نکنید. روش دیگر استفاده از قابلیت import می باشد. برای درک بهتر به مثال زیر توجه کنید. ما یک فایل به نام variables با متغیرهای زیر داریم:

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

اکنون قصد دارم تا در فایل sass دیگر این متغیرها را استفاده کنم:

@import "variables";

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

در این صورت خروجی فایل css به صورت زیر خواهد شد:

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

شما می‌توانید فایل‌های مختلفی همچین variables داشته باشید و بدون اینکه نیاز داشته باشید تا در سایر فایل‌های sass آن‌ها را بنویسید، از آن‌ها استفاده کنید.

” توجه کنید که نیازی به نوشتن پسوند فایل sass نمی باشد و خود کامپایلر فرمت آن را تشخیص می دهد. “

در استفاده و تعریف فایل های sass یک نکته وجود دارد و آن این می باشد که در صورتی که یک فایل sass را به صورت بالا تعریف کنید، به صورت خودکار یک فایل css برای آن کامپایل و ساخته می شود. برای رفع این sass یک قابلیتی ایجاد کرده است که با استفاده از آن می‌توانید مانع از کامپایل فایل sass شوید و تنها در داخل فایل‌هایی که مورد نیازتان هست، از آن استفاده کنید. برای اینکار تنها کافیست قبل از اسم فایل sass، از آندرلاین (_) استفاده کنید.

مقاله پییشنهادی : آموزش HTML به زبان ساده – قسمت سوم

کاربرد دیگر این قابلیت در زمانی می‌باشد که شما قصد دارید تنها یک فایل css داشته باشید و همان را در داخل فایل html مورد نظرتان استفاده کنید. در این حالت به جای اینکه برای هر فایل sass یک فایل css جداگانه ایجاد شود، تمامی فایل‌ها را می‌توانید در داخل یک فایل به نام main قرار دهید. سپس از روی فایل نهایی main، فایل css مورد نظرتان را ایجاد کنید. در اینجا، فایل‌های sass زیر که در نام خود از آندرلاین دارند (در هنگام import کردن نیازی به آوردن آندرلاین قبل از نام فایل نمی باشد) در داخل فایلی به نام main تعریف شده است.

سپس در صورتی که شما فایل main مورد نظر را کامپایل کنید، تمامی تعاریف داخل تمامی فایل‌های sass نیز در فایل css نهایی تعریف می شوند. دقت کنید که ترتیب فایل‌های sass مهم می باشد. همانطور که می‌دانید در داخل یک فایل css، کدها از بالا به پایین اجرا می شود. به همین خاطر در صورتی که از متغیری استفاده کنید که قبل از استفاده از آن تعریف نشده باشد، متغیر مورد نظر را فایل css نمی‌شناسد و برنامه به درستی اجرا نمی شود.

@import "variables";

@import "reset";

@import "color";

همانطور که مشاهده نمودید، قابلیت import در sass بسیار کاربردی می باشد.

Mixin و include در sass

این دو قابلیت در sass به شما این امکان را می‌دهد تا بدین ویژگی‌های مشخصی را برای تگ‌های مختلف و در بخش ‌های مختلف کد css با استفاده از نام آن استفاده کنید. برای اینکار ابتدا باید یک mixin تعریف کنید، mixin در واقع مشابه یک تابع می‌باشد. شما در این تابع یک سری ویژگی مثل رنگ، اندازه فونت و یا موارد دیگر را مشخص می کنید و سپس با استفاده از include به نوعی آن را در هر قسمت از کد Sass که به آن نیاز دارید، فراخوانی کنید. بهتر است که برای مواردی mixin تعریف کنید که کاربرد زیادی دارند و شامل یک ویژگی‌های مشخص هستند.

مثلا شما می‌خواهید در سایزهای مختلف ویژگی‌های مختلفی وب سایتتان داشته باشد، برای اینکار می‌توانید یک mixin برای سایز مورد نظرتان تعریف کنید و در هر جایی که نیاز داشتید که در سایز تعریف شده، ویژگی‌های متناسب با آن سایز را تعریف کنید، صرفا با استفاده از include آن را فراخوانی کنید. در مثال زیر یک mixin به نام test تعریف کردم. در این mixin ویژگی هایی همچون رنگ، اندازه فونت، نوع فونت و داشتن مرز تعریف شده است. حال اکنون قصد دارم تا این ویژگی‌ها را برای تمامی تگ‌های h1 تعریف کنم.

@mixin test {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

برای اینکار کافیست از include به صورت زیر استفاده شود:

.h1 {
  @include test;
  background-color: green;
}

در اینجا تگ h1 علاوه بر ویژگی‌های تعریف شده برای mixin به نام test، یک ویژگی برای رنگ پشت زمینه آن نیز دریافت می کند. در صورتی که قصد داشته باشید تا ویژگی‌ خاصی از یک mixin را تغییر دهید و سایر ویژگی‌های تعریف شده از آن را به ارث ببرید در داخل یک تگ، تنها کافیست دوباره آن ویژگی را با مقدار جدید تعریف کنید. در مثال زیر، به دلیل اینکه ویژگی رنگ دوباره در داخل المان مقدار دهی شده است، رنگ تگ h1 به رنگ سبز در خواهد آمد.

.danger {
  @include test;
  color: green;
}

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

در حالت کلی ساختار mixin به صورت زیر می باشد:

@mixin name {
    property: value;
    property: value;
    ...
}

و ساختار include به صورت زیر:

selector {
  @include mixin-name;
}

شما می‌توانید در داخل یک mixin، mixin های دیگر را نیز تعریف کنید. در مثال زیر در یک mixin به نام special-text، از 3 mixin دیگر نیز استفاده شده است که هر کدوم به صورت جداگانه در داخل mixin مورد نظر فراخوانی شده اند.

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

همانطور که گفته شد، mixin ها در داخل sass همانند توابع می‌باشند. همانطور که شما به یک تابع می‌توانید متغیر ورودی دهید، برای یک mixin نیز می‌توانید متغیر ورودی تعریف کنید، برای اینکار تنها کافیست در جلوی نام mixin تعریف شده، متغیرهای خود را در داخل پرانتز تعریف کنید. در این مثال، برای mixin به نام bordered دو متغیر ورودی برای رنگ و عرض آن تعریف شده است.

مقاله پییشنهادی : آموزش استایل دهی به صفحات وب با CSS– قسمت اول (رنگ ‌ها در css)

نحوه ی مقدار دهی به متغیرها هم در زمان فراخوانی آن‌ها می باشد (همچون فراخوانی توابع با متغیر ورودی). که در مثال زیر نیز می‌توانید مشاهده کنید که در دو کلاس متفاوتی که تعریف شده است، برای mixin مورد نظر، دو ورودی متفاوت در نظر گرفته شده است که این خود منجر می‌شود تا شما بتوانید با استفاده از یک mixin، مقادیر مختلف و داینامیک را به المان‌ها و کلاس‌های خود بدهید.

@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px); // Call mixin with two values
}

.myNotes {
  @include bordered(red, 2px); // Call mixin with two values
}

در صورت ایجاد فایل css از فایل scss مورد نظر، فایل css مورد نظر به صورت زیر خواهد بود:

.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

و فایل html مربوط به آن جهت مشاهده آن به صورت زیر خواهد بود:

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="mystyle.css" />
  <body>
    <h1>Hello World</h1>
    <p class="myArticle">This is some text in my article.</p>
    <p class="myNotes">This is some text in my notes.</p>
  </body>
</html>

شما برای متغیرهای ورودی یک mixin می‌توانید مقادیر پیش فرض نیز تعریف کنید.

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

در مثال زیر، مقدار رنگ برابر با مقداری که در ورودی داده شده است می باشد ولی مقدار عرض به دلیل اینکه در داخل include مقدار دهی نشده است، برابر با مقدار پیش فرض تعریف شده در mixin می باشد.

.myTips {
  @include bordered($color: orange);
}

Extend و ارث بری در sass

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

.button-basic {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report {
  @extend .button-basic;
  background-color: red;
}

.button-submit {
  @extend .button-basic;
  background-color: green;
  color: white;
}

مثال بالا که در scss نوشته شده است، وقتی به css تبدیل شود به صورت زیر خواهد بود:

.button-basic,
.button-report,
.button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report {
  background-color: red;
}

.button-submit {
  background-color: green;
  color: white;
}

قابلیت‌های scss بسیار زیاد است. شما در یک فایل scss می‌توانید حتی توابع و یا دستورات شرطی و حلقه‌ها را نیز تعریف کنید. با آموزش sass همراه باشید تا با سایر قابلیت‌ها و ویژگی های scss آشنا شوید و متوجه شوید چرا استفاده از scss می‌تواند تا حد زیادی در پیاده‌سازی فرانت کمک کند و کاربردی می باشد.

درون یابی (interpolation) در sass

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

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);

در این مثال یک mixin با نام corner-icon و با 3 ورودی تعریف شده است. در داخل این mixin یک عبارت به صورت #{$name} تعریف شده است. در داخل ویژگی نیز همین عبارت دوباره در آدرس url تکرار شده است. اگر دقت کنید، نام این متغیر در داخل ورودی mixin نیز تعریف شده است. زمانی که با استفاده از تابع include این تابع تعریف شده فراخوانی می‌شود، با توجه به پارامتر اول، یک کلاس با نام پارامتر اول در css ایجاد می شود که در آدرس url آن نیز، این پارامتر در مکان #{$name} قرار گرفته است و این دقیقا یکی از کاربردهای درون یابی و یا تعریف متغیر به صورتی که گفته شده است، می باشد.

دقت کنید در صورتی که از #{} استفاده نکنید، sass فقط یک متغیر به نام $name خواهد دید که به شما در زمانی که بخواهید آن را در نام تابع و یا در داخل url استفاده کنید، ایراد خواهد گرفت. در واقع تعریف یک عبارت به صورتی که گفته شده است یعنی #{$name} این امکان را به شما می‌دهد تا بتوانید از متغیرها در داخل یک تابع mixin استفاده کنید.

.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

و یا در مثال دیگری با استفاده از تابع unique-id() شما می‌توانید یک اسم منحصر به فرد در هر بار کامپایل sass و تبدیل آن به css ایجاد کنید. در مثال زیر در داخل mixin یک متغیر به نام $name تعریف شده است و در قسمت @keyframes برای استفاده از این متغیر، با استفاده از #{$name} از آن استفاده شده است.

در داخل @keyframes همانطور که مشاهده می‌کنید، از @content استفاده شده است. این تابع در واقع به شما این امکان را می‌دهد تا محتوای مورد نظرتان را در داخل تابع مورد نظر بنویسید و این بدین معناست که تابع مورد نظر، ویژگی و مقادیری برای آن تعریف خواهد شد. که پایین تر در کلاس pulse در داخل تابع include تعریف شده است. دقت کنید که محتوای مورد نظر در داخل فایل sass در داخل تابع include تعریف شده است. با استفاده از @content شما می‌توانید، ویژگی‌های دلخواهتان را متناسب با mixin مورد نظر، قرار دهید.

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
    from {
      background-color: yellow;
    }
    to {
      background-color: red;
    }
  }
}

خروجی فایل sass بالا در css به صورت زیر خواهد بود. همانطور که مشاهده می‌کنید برای کلاس pulse در ابتدا، مقادیری را که در داخل mixin تعریف شده بودند را تعریف کرده است و سپس برای @keyframes یک آیدی منحصر به فرد ایجاد کرده و محتوایی که برای آن در sass تعریف شده بود را قرار داده است.

.pulse {
  animation-name: inline-ubq9zfb;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-ubq9zfb {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}

عملگرها در sass

یکی از قابلیت‌های خوب sass، امکان استفاده از عملگردها در آن می‌باشد. شما می‌توانید به جای اینکه عدد خاصی را به عنوان عرض، ارتفاع و یا اندازه ی یک فونت تعریف کنید، حاصل ضرب و یا جمع و یا تقسیم و تفریق دو عدد و یا چند عدد را برای ویژگی مورد نظر تعریف کنید. در مثال زیر با استفاده از ضرب و تقسیم برای عرض کلاس مورد نظر، استفاده شده است.

.container {
  width: 100%;
}

.maktabkhooneh{
  float: left;
  width: 400px / 500px * 100%;
}

.maktab {
  float: right;
  width: 200px / 500px * 100%;
}

نتیجه ی آن در فایل css به صورت زیر خواهد بود. بدین معنا که در scss موقع کامپایل به css، عملیات ها انجام می گیرد و نتیجه ی آن در فایل css که یک عدد می باشد، قرار می گیرد.

.container {
  width: 100%;
}

.maktabkhooneh {
  float: left;
  width: 80%;
}

.maktab {
  float: right;
  width: 40%;
}

شما از عملگرها در هر قسمت از فایل scss می توانید استفاده کنید، حتی در تعریف مقدار یک متغیر. دقت کنید که این کار تنها در یک فایل scss قابل انجام می باشد و نمی‌توانید در css از عملگرها استفاده کنید. شما حتی از عملگردها در رنگ‌ها نیز می‌توانید استفاده کنید، مثلا کد hex دو تا رنگ را با یکدگیر جمع کنید و یا آن را در مقداری ضرب کنید.

p {
  color: #010203 + #040506;
}

که نتیجه ی بالا در css به صورت زیر خواهد بود:

p {
  color: #050709;
}

و یا کد رنگ مورد نظر را در مقداری ضرب کنید:

p {
  color: #010203 * 2;
}

که نتیجه ی آن در css به صورت زیر خواهد بود. هر دوتا عدد در کنار یکدیگر در عدد مورد نظر ضرب می شوند.

p {
  color: #020406;
}

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

@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug (12px/4px); // 3
@debug 1in % 9px; // 0.0625in
@debug 100px + 50; // 150px
@debug 4s * 10; // 40s
@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px
@debug 4px * 6px; // 24px*px (read "square pixels")
@debug 5px / 2s; // 2.5px/s (read "pixels per second")
@debug 5px * 30deg / 2s / 24em; // 3.125px*deg/s*em
                                // (read "pixel-degrees per second-em")
$degrees-per-second: 20deg/1s;
@debug $degrees-per-second; // 20deg/s
@debug 1 / $degrees-per-second; // 0.05s/deg
@debug 100px + 10s;
// Error: Incompatible units px and s.

بخش جذاب تر در scss امکان اتصال رشته ها به یکدیگر با عملگرد + می باشد. مثلا فرض کنید شما از :before ویا :after استفاده کردید که دارای ویژگی‌ای به نام content می باشند، شما می‌توانید مقدار آن را استفاده از متغیر ها و با استفاده از عملگرد + نیز تعریف کنید.

p:before {
  content: "this" + "is" + "mycontent";
}

عملگرهای دیگری همچون <، >، =، ! و موارد مشابه که در تمام زبان‌های برنامه نویسی وجود دارند را نیز در sass می توانید تعریف و استفاده کنید. با همدیگر مثال‌هایی از این عملگر ها را خواهیم دید. عبارت‌هایی که کامنت شده‌اند در واقع خروجی sass برای هر خط در ترمینال می‌باشند.

عبارت == جهت تساوی دو مقدار مورد استفاده قرار می‌گیرد. عبارت != برای بررسی عدم تساوی دو مقدار می باشند. شما انواع متغیر‌ها، توابع، رنگ‌ها، لیست‌ها و رشته‌ها را می‌توانید با استفاده از این عملگردها با یکدیگر مقایسه کنید.

@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug 1 != 1px; // true
@debug 96px == 1in; // true

@debug "Helvetica" == Helvetica; // true
@debug "Helvetica" != "Arial"; // true

@debug hsl(34, 35%, 92.1%) == #f2ece4; // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

@debug (5px 7px 10px) == (5px 7px 10px); // true
@debug (5px 7px 10px) != (10px 14px 20px); // true
@debug (5px 7px 10px) != (5px, 7px, 10px); // true
@debug (5px 7px 10px) != (5px 5px 10px); // true

$theme: (
  "venus": #998099,
  "nebula": #d2e1dd
);
@debug $theme == ("venus": #998099, "nebula": #d2e1dd); // true
@debug $theme != ("venus": #998099, "iron": #dadbdf); // true

@debug true == true; // true
@debug true != false; // true
@debug null != false; // true

@debug get-function("rgba") == get-function("rgba"); // true
@debug get-function("rgba") != get-function("hsla"); // true

عملگرهای بعدی، عملگرهای رابطه‌ای می باشند. این عملگرها که شامل >، <، <=، >= می باشند، جهت مقایسه‌ی دو متغیر، رشته ویا عدد مورد استفاده قرار می گیرند. تنها نکته‌ای که در رابطه با عملگرهای رابطه‌ای می باشد این است که حتما باید دو طرف مورد مقایسه از یک نوع واحد باشند. به طور نمونه در آخرین مثالی که در پایین آورده شده است، به دلیل اینکه طول با ثانیه مورد مقایسه قرار گرفته است، کامپایلر Sass ارور داده است.

@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 1in; // true
@debug 1000ms <= 1s; // true
@debug 100 > 50px; // true
@debug 10px < 17; // true
@debug 100px > 10s; // Error: Incompatible units px and s.

از جمله دیگر عملگرهایی که در sass قابل استفاده می باشد، بولین‌ها می باشند. این مقادیر که به صورت true و false می باشند را نیز شما می توانید در کد با فرمت scss استفاده کنید. در واقع بولین‌ها در کنار and، or و not کاربرد پیدا می کنند. برای درک عملکرد بولین‌ها در تعریف دستورات شرطی از آن‌ها استفاده خواهم کرد و خواهید توانست مشاهده کنید. نمونه‌ای از این عملگرها را در مثال های زیر می‌توانید مشاهده کنید:

@debug not true; // false
@debug not false; // true

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

توابع در آموزش sass

پیش‌تر با یکی از توابع پرکاربرد در sass آشنا شدید. تابع mixin و include دو تابع پرکاربرد در sass می باشند. این توابع که جز توابع از پیش تعریف شده در sass می باشند، تنها توابع از پیش تعریف شده در sass نمی‌باشند و توابع دیگری نیز در sass وجود دارند که قصد داریم به آن ها بپردازیم. علاوه بر توابع تعریف شده، شما می‌توانید توابع دلخواه خودتان را نیز تعریف کنید.

توابع lighten و darken اولین توابع مورد بررسی می باشند. این توابع رنگ مورد نظر شما را روشن تر و یا تیره تر می کند. تابع lighten با دریافت دو مقدار ورودی که اولی کد رنگ و دومی درصد می باشد، به میزان درصدی که داده شده است، رنگ مورد نظر را روشن تر می کند.

body {
  background: lighten(#800, 20%);
}

که خروجی css آن به صورت زیر خواهد بود:

body {
  background: #e00;
}

در مقابل این تابع، تابع darken وجود دارد که همانند تابع lighten دو مقدار دریافت می‌کند با این تفاوت که میزان درصد وارد شده، مقدار تیره تر شدن رنگ مورد نظر می باشد.

body {
    background: darken(#800, 20%);
}

که خروجی css آن به صورت زیر خواهد بود:

body {
  background: #220000;
}

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

body {
    background: grayscale(lightblue)
}

که خروجی css آن به صورت زیر خواهد بود:

body {
  background: #cacaca;
}

تابع round، یک مقدار را در ورودی دریافت می کند و عدد اعشاری مورد نظر شما را به نزدیک عدد صحیح به آن گرد می کند.

body {
    width: round(123.15)
}

که خروجی css آن به صورت زیر خواهد بود:

body {
  width: 123;
}

Sass توابع از پیش تعریف شده‌ی مختلفی در زمینه‌ی محاسبات دارد، از جمله موارد دیگر میتو‌ان به توابع ceil که عدد شما را به سمت بالا گرد می‌کند، floor که عدد شما را به سمت پایین گرد می کند، random که به شما این امکان را می‌دهد تا هر بار کامپایل شدن sass یک عدد رندوم تولید کنید، max برای بدست آوردن بزرگترین عدد بین چند عدد و در نقطه مقابلش min برای بدست آوردن کوچکترین عدد بین چند عدد، abs که قدر مطلق عدد مورد نظرتان را می گیرد، log که لگاریتم عددتان را در مبنای پیش فرض 2 و یا در مبنایی که شما مشخص می‌کنید به شما می دهد، pow که عدد مورد نظرتان را به توان عدد دیگری می‌رساند، sqrt که جذر عدد را برای شما می گیرد و همچنین انواع توابع مثلثاتی cos، sin و tan و سایر توابع مثلثاتی را می‌توانید در sass تعریف کنید. مثال‌هایی از توابع گفته شده را در پایین می‌توانید مشاهده کنید:

//ceil
body {
    width: ceil(123.2)
}

/* css */
body {
  width: 124;
}

//floor
body {
    width: floor(4.2)
}

/* css */
body {
  width: 4;
}

//max
$widths: 50px, 30px, 100px;
body {
  width: max($widths...);
}

/* css */
body {
  width: 100px;
}

//min
$widths: 50px, 30px, 100px;
body {
  width: min($widths...);
}

/* css */
body {
  width: 30px;
}

//abs
body {
  width: abs(-10px);
}

/* css */
body {
  width: 10px;
}

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

همانطور که اشاره کردم، در کنار توابع از پیش تعریف شده، شما می‌توانید تابع مورد نظر خودتان را نیز تولید کنید. در مثال زیر یک تابع برای روشن کردن رنگ‌ها تعریف شده است که در آن، از تابع از پیش تعریف شده ی خود sass به نام lighten استفاده شده است که برای اینکار از return استفاده شده است. برای استفاده از آن تنها کافیست نام تابع را مقدار ورودی به آن بدهید.

$primary-color: #333;

@function light_color($arg) {
  @return lighten($arg, 50%);
}

body {
  background: light_color($primary-color);
  color: $primary-color;
}

که خروجی css آن به صورت زیر خواهد بود:

body {
  background: #b3b3b3;
  color: #333333;
}

قابلیت بعدی که از sass مورد بررسی قرار خواهم داد، دستورات شرطی می باشد.

دستورات شرطی که همان if else می باشد در تمامی زبان های برنامه نویسی وجود دارند. با استفاده از این دستورات شما می توانید مشخص کنید که در صورتی که یک شرط برقرار بود، عملیات خاصی انجام گیرد و یا اگر برقرار نبود، عملیات دیگری صورت گیرد. در sass نیز این دستورات وجود دارند که می‌توانند کمک بزرگی در بهینه تر نوشتن دستورات در sass کمک کنند. همانطور که مشاهده می کنید در مثال زیر، یک دستور @if تعریف شده است که در آن در صورتی که شرط برقرار باشد، شعاع مرز را مقدار دهی می کند. در صورتی هم که شرط برقرار نباشد، مقداری به آن تعلق نمی گیرد.

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av {
  @include avatar(100px, $circle: false);
}
.circle-av {
  @include avatar(100px, $circle: true);
}