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

از ویکی‌پدیا، دانشنامهٔ آزاد
پرش به ناوبری پرش به جستجو

ساس مخفف واژه (Syntactically Awesome Stylesheets) زبان سبک آبشاری است که پیش پردازنده آن CSS با متغیرها، حلقه‌ها و بسیاری از امکانات دیگر که شیوه نامه آبشاری که (CSS) به تنهایی توانایی انجام آنرا ندارد را دارا می‌باشد، ساده ایجاد CSS و نگهداری از بزرگ شیوه نامه‌های ساده‌تر ساخته شده‌اند. در ابتدا تحت تأثیر زبان نشانه گذاری YAML بود که توسط Hampton Catlin و ناتالی ویزنباوم طراحی و ساخته شد.

پس از اتمام نسخه اولیه، ویزنباوم و کریس اپپشتین به کار خود روی 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;
  color: darken($meineFarbe, 9%);
}

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

ساس اسکریپت[ویرایش]

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

ایراد[ویرایش]

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

جستارهای وابسته[ویرایش]

پیوند به بیرون[ویرایش]

منابع[ویرایش]

  1. بایگانی‌شده در [Date missing] توسط shiftedwork.de [Error: unknown archive URL]