ساس (زبان سبک نویسی)

ساس مخفف واژه (Syntactically Awesome Stylesheets) یک زبان پیش‌پردازه‌نویسی است که در نهایت به زبان css‌ تفسیر یا کامپایل می‌شود. این زبان، خود یک زبان اسکریپت‌نویسی محسوب می‌شود.

این زبان در ابتدا تحت تأثیر زبان نشانه گذاری YAML بود که توسط همپتون کاتلین و ناتالی ویزنباوم طراحی و ساخته شد.

پس از اتمام نسخهٔ اولیه، ویزنباوم و کریس اپپشتین به کار خود روی Sass ادامه دادند و با استفاده از SassScript، یک زبان ساده نویسی را برای استفاده در پرونده‌های Sass اجرا کردند. علاوه بر نرم‌افزار کامپایلر مبتنی بر خط فرمان که تحت مجوز MIT برای بسیاری از سیستم‌عامل‌ها وجود دارد، برنامه‌های پردازش دیگری نیز برای این زبان ایجاد شده‌اند.

علاوه بر اصطلاح اصلی SASS مشابه YAML , Sass هم از ساختار نوشتاری جدیدتر و در حال حاضر گسترده‌تر نسبت به SCSS نیز پشتیبانی می‌کند، که مبتنی بر نشانه گذاری‌های کلاسیک CSS است.

مکان نماها

سازوکارهای درونی

یکی از ویژگی‌های کلیدی سازوکارهای درونی(قوانین تو در تو) می باشد. این کار خواندن و نوشتن انتخابگرهای پیچیده تو در تو را آسان می‌کند.

#header
  background: #FFFFFF
  /* -or-  :background #FFFFFF */

  .error
    color: #FF0000

  a
    text-decoration: none
    &:hover
      text-decoration: underline

نوشتار بالا در CSS به صورت زیر است:

#header {
  background: #FFFFFF;
}
#header .error {
  color: #FF0000;
}
#header a {
  text-decoration: none
}
#header a:hover {
  text-decoration: underline
}

عنوان‌های نمایش داده شده

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

#header{
  color: red
  @media (min-width: 400px){
    color: blue;
  }
}

که در CSS به شرح زیر است:

#header {
  color: red;
}
@media (min-width: 400px){
  #header {
    color: blue;
  }
}

متغیرها (جایگذارها)

ساس اجازه استفاده از متغیرها (بپارسی: جاگذار) را می‌دهد. این باعث می‌شود که مقادیر خاصی را در شیوه نامه‌های بزرگ ثابت نگه داشته شود. وظایف نگهداری با تعیین متغیرها به صورت مرکزی ساده‌تر می‌شوند.

$link_color: #00F

a
  color: $link_color

که در CSS به شرح زیر است:

a {
  color: #00F
}

میکسین ها (دربرنامه نویسی شیء گرا)

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

@mixin box($farbe){
  padding: 1rem;
  border: 2px solid gray;
  background: $farbe;
}

a
  @include box(red);

که در CSS به شرح زیر است:

a {
  padding: 1rem;
  border: 2px solid gray;
  background: red;
}

ساختار ویرایش SCSS

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

مقایسه کدنویسی

ساس

$meineFarbe: #3BBFCE

.navigation
  border-color: $meineFarbe
  color: darken($meineFarbe, 9%)

SCSS

$meineFarbe: #3BBFCE;

.navigation {
  border-color: $meineFarbe;
kir
}

CSS کامپایل شده در هر دو مورد یکسان است. تبدیل خودکار بین دو گونه ساختار بدون هیچ ایرادی امکان‌پذیر است.

ساس اسکریپت

ساس اسکریپت (بانگلیسی: SassScript) یک زبان برنامه‌نویسی است که در Sass استفاده می‌شود. ساس اسکریپت را با ویژگی‌هایی مانند حساب اصلی، روش‌هایی برای دستکاری مقادیر رنگ، سازه‌های حلقه ساده می‌شناسند.

ایراد

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

جستارهای وابسته

• لس (زبان سبک نویسی)
• استیلوس (زبان سبک نویسی)

پیوند به بیرون

• وب سایت رسمی
• مخزن کد منبع Sass (Git)
• Haml / Sass Google Group (انگلیسی)
• ترجمه آلمانی راهنمای SASS (آلمانی)