آموزش روش تولید کد خروجی CSS output style در Sass

آموزش Sass – روش و سبک های مختلف تولید کد خروجی CSS /output style

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

جهت انتخاب سبک تولید خروجی دلخواه، کافی است از پارامتر خط فرمان --style استفاده کرده یا آپشن :style را مقداردهی (تنظیم) نمایید.

مقدار :nested

سبک Nested یا دستورات تودرتو، همان روش پیش فرض تولید خروجی CSS می باشد که style های CSS و ساختار فایل HTML را منعکس می نماید. به طوری که هر property در خط اختصاصی خود قرار گرفته اما به صورت ثابت و مشخص توگذاری نمی شوند (indentation). هر دستور style دهی (css rule) در واقع بر اساس عمق تودرتویی یا اینکه دستورات تا چه میزان داخل هم تعریف شده اند، توگذاری می شوند. مثال:

 #main {
    color: #fff;
    background-color: #000;
}
  #main p {
    width: 10em;
}
.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

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

مقدار :expanded

سبک expanded یا روش نگارش طولانی تر کد، استایلی است که بیشتر با چشم انسان سازگاری دارد و در آن هر دستور و property خود یک خط مجزا را اشغال می کند. property ها همگی داخل دستورات style دهی توگذاری می شوند، اما خود دستورات (rule) هیچ توگذاری مشخصی ندارند. مثال:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}
.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

مقدار :compact

این روش نگارش و تولید کد CSS از دو سبک نام برده مختصرتر بوده و فضای کمتری را به نسبت اشغال می کند. در این سبک تمرکز بیشتر بر روی Selector قرار می گیرد تا property ها. دستورات CSS تنها یک خط را به خود تخصیص می دهند و property های مربوطه همگی بر روی خطی یکسان قرار می گیرند. دستورات تودرتو (nested rules) نیز در خطی واحد، پشت سرهم نوشته شده و هیچ خط جدیدی را به خود تخصیص نمی دهند، در حالی که بین مجموعه دستورات مجزا یک خط تهی (newline) درج می شود. مثال:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

مقدار :compressed

سبک حاضر نیز حالت فشرده بوده و کدهای CSS خروجی کمترین میزان فضا را به خود تخصیص می دهند. در این روش هیچ فضای خالی بین کدها وجود ندارد مگر بین Selector ها و یک خط تهی (newline) که در انتهای فایل درج می شود. بعلاوه در سبک فشرده سعی می شود از نسخه های کوتاه و مختصرتر کدها و مقادیر استفاده شود.

بدیهی است کد CSS بسیار فشرده که خروجی این سبک می باشد، برای انسان چندان خوانا نیست:

#main{
color:#fff;background-color:#000
}
#main p{
width:10em
}
.huge{
font-size:10em;font-weight:bold;text-decoration:underline
}