آموزش SASS-دستور نحوی

آموزش SASS – دستور نحوی (Syntax)

در آموزش پیشرو قصد داریم شما را با ساختار نگارشی یا همان Syntax زبان پیش پردازنده ی SASS آشنا کنیم. برای نوشتن دستورات SASS دو روش وجود (Syntax) دارد: 1. (روش جدید کدنویسی و نزدیک به CSS) SCSS 2. (کدهای توگذاری شده و روش قدیمی) Indented syntax.

1. SCSS - یک روش کدنویسی جدید SASS که مبتنی بر ساختار نحوی خود CSS است. بدین معنی که تمامی دستورات معتبر و استاندارد CSS به ناگذیر یک دستور معتبر SCSS نیز محسوب می شوند. SCSS روش جدید کدنویسی SASS است که تنظیم و نوشتن صفحات سبک دهی (Stylesheet ها) بزرگ را آسان ساخته، قادر است ساختارهای نحوی (syntax) اختصاصی (vendor-specific) را فهمیده و تفسیر کند. بسیاری از فایل های CSS و SCSS با پسوند .scss ذخیره و نام گذاری می شوند.
2. (توگذاری شده) Indented - که روش قدیمی کدنویسی SASS محسوب می شود و گاهی SASS اطلاق می گردد. با این روش کدنویسی SASS می توان کدهای CSS را سریع و مختصر تر نوشت. فایل های SASS با پسوند .sass نیز ذخیره و نام گذاری می شوند.

روش قدیمی کدنویسی SASS/سازمان دهی کد با توگذاری

این روش کدنویسی SASS دارای ویژگی های زیر می باشد:

• بجای {} از توگذاری و indentation برای سازمان دهی قطعات کد استفاده می کند.
• دستورات مستقل را بجای اینکه با نقطه ویرگول از هم جدا کند، آن ها را در خط جدید قرار می دهد (از newlineاستفاده می کند).
• تعریف property جدید و selector ها باید در خط اختصاصی خود قرار داده شود و دستورات محصور در {} بایستی بر روی خط جدید و توگذاری شده درج گردد.

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

.myclass {
   color = red;
   font-size = 0.2em;
}

کدنویسی به روش دوم که همان توگذاری/syntax indented می باشد، برای استفاده در فایل های Sass توصیه نمی شود. اگر از این فایل استفاده کنید، خواهید دید که خطا می دهد چرا که برای مقداردهی متغیرها و property های فایل بجای دو نقطه از "=" استفاده کرده ایم. کد فوق را با اجرای دستور زیر کامپایل نمایید.

sass --watch C:\ruby\lib\sass\style.scss:style.css

دستور فوق را اجرا کنید. یک خطا مانند زیر در فایل style.css نمایش داده می شود.

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss
1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

تفاوت بین دو ساختار نگارشی و روش کدنویسی SASS

نحوه ی تعریف و مقداردهی property ها

• property ها را می توان به همان روش CSS خالص، اما بدون درج نقطه ویرگول در انتهای آن، مقداردهی کرد.
• قبل از اسم هر property، یک دو نقطه (:) درج می شود.

برای مثال، می توانید کد را به این صورت بنویسید:

.myclass
   :color red
   :font-size 0.2em

هر دو روش فوق (تعریف property بدون نقطه ویرگول در انتها و درج دو نقطه قبل از اسم property) به صورت پیش فرض قابل استفاده هستند. اما در آن واحد تنها یک property syntax قابل استفاده می باشد.

Selector های چند خطی (Multiline Selector)

در روش قدیمی نگارش دستورات SASS (روش توگذاری شده)، چنانچه Selector پس از علامت کاما درج شود، می تواند در خط مجزا قرار گیرد.

مثال کاربردی

مثال زیر نحوه ی استفاده از Selector های چند خطی در فایل SCSS را نمایش می دهد.

< html >
  < head >
    < title >Multiline Selectors< /title >
    < link rel="stylesheet" type="text/css" href="style.css" / >
    < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
    < script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >< /script >
    < script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" >< /script >
  < /head >
  < body >
  < h2 >Example using Multiline Selectors< /h2 >
    < p class="class1" >Welcome to Tutorialspoint!!!< /p >
    < p class="class2" >SASS stands for Syntactically Awesome Stylesheet...< /p >
    < /body >
< /html >

در گام بعدی، فایل style.scss. را ایجاد کنید. توجه داشته باشید که فایل با پسوند .scss نام گذاری و ذخیره می شود.

style.scss:
.class1,
.class2{
   color:red;
}

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

در گام بعدی دستور بالا را اجرا کنید، یک فایل به نام style.css به صورت خودکار به همراه کد زیر ایجاد می شود.

محتوای فایل تولید شده style.css در زیر نمایش داده شده است:

style.css
.class1,
.class2 {
   color: red;
}

خروجی

با طی کردن مراحل زیر نحوه ی کارکرد کد و خروجی را مشاهده می کنید.

• کد html بالا را در فایل multiline_selectors.htmlذخیره نمایید.
• فایل نام برده را با مرورگر دلخواه باز نمایید. خروجی زیر را نمایش می دهد.

توضیحات/Comments

Comment ها صرفا توضیحاتی درباره ی دستور درج شده ارائه می دهند، توسط مفسر نادیده گرفته شده و اجرا نمی شوند. در کل دو نوع کامنت وجود دارد: تک خطی و چند خطی. در مباحث بعدی بیشتر درباره ی کامنت ها توضیح خواهیم داد.

دستور @import

در SASS می توان از دستور @import با/بدون کوتیشن استفاده کرد. برخلاف SCSS، که باید حتما همراه با کوتیشن بکار رود.

به طور مثال، در ساختار نگارشی SCSS از SASS، دستور @import را می توان مانند زیر بکار برد:

@import "themes/blackforest";
@import "style.sass";

در SASS همین دستور را به صورت زیر می نویسید:

@import themes/blackforest
@import fontstyle.sass

دستورهای Mixin

Syntax یا دستور نگارشی SASS به شما این امکان را می دهد تا بجای دستورهای @mixin و @include از کاراکترهای میانبر جهت کاهش کد نویسی، افزایش خوانایی و سادگی کد استفاده نمایید. این دو کاراکتنر عبارتند از = و + .

برای مثال، می توانید دستورهای mixin را به این صورت نگارش نمایید:

=myclass
   font-size: 12px;
p
   +myclass

کد بالا از لحاظ کارایی معادل زیر می باشد:

@mixin myclass
   font-size: 12px;
p
   @include myclass

Syntax و ساختار نگارشی منسوخ

SASS تا حدی از روش کدنویسی و Syntax قدیمی استفاده می کند. با این وجود، ما به توسعه دهندگان توصیه می کنیم که تا حد امکان از بکار بردن آن صرف نظر کنند چرا که در صورت استفاده از این روش کدنویسی، هشدارهایی در مرورگر به نمایش در آمده و نیز در ورژن های جدید دیگر از آن استفاده نمی شود. در جدول زیر برخی از روش های نگارشی و syntax های منسوخ را مشاهده می کنید: