آموزش SASS

SASS (صفحه ی سبک دهی با دستور نحوی و ساختار نگارشی بهینه/Syntactically Awesome Stylesheets) یک زبان پیش پردازنده ی CSS است که کدنویسی با CSS را آسان ساخته، در زمان لازم برای طراحی صرفه جویی می کند و در نهایت از نوشتن کدهای تکراری جلوگیری می نماید. به عبارت دیگر یک زبان اسکریپت نویسی قدرتمند و کارا است که افزونه ای برای CSS بوده و Style یا ظاهر فایل های HTML را به صورت ساختارمند تعریف می کند. سری آموزشی پیشرو مبانی این زبان اسکریپت نویسی را به شما یاد می دهد.

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

در مبحث حاضر نصب Ruby را به صورت گام به گام به شما آموزش داده و از آن برای اجرای فایل های SASS استفاده خواهیم کرد.

در آموزش پیشرو قصد داریم شما را با ساختار نگارشی یا همان Syntax زبان پیش پردازنده ی SASS آشنا کنیم.

در این آموزش قصد داریم روش های مختلف استفاده از SASS در پروژه را شرح دهیم.

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

در مبحث حاضر، درباره ی Comments و توضیحات کد در Sass می پردازیم. Comments دستورات غیرقابل اجرا هستند که توسعه دهنده آن ها را منحصرا جهت ارائه ی توضیحی درباره ی دستورات اپلیکیشن و فهم آسان آن ها برای خواننده ی کد، در متن برنامه (source code) درج می کند.

SASS از تعداد محدودی extension یا افزونه به نام SassScript بهره می گیرد که به واسطه ی آن ها property های CSS می توانند از متغیرها، عملیات ریاضی و سایر توابع استفاده کنند.

Sass علاوه بر پشتیبانی از تمامی @-rule های CSS3، تعداد زیادی دستور اختصاصی خود را در اختیار توسعه دهنده قرار می دهد که تحت عنوان directive شناخته می شوند. این دستورات تاثیرات مختلفی در Sass را دارند.

در مبحث حاضر نحوه ی کار با دستورات و عبارات کنترلی Sass را به شما به صورت کاربردی آموزش خواهیم داد.

Mixin ها به شما این امکان را می دهند تا کدهای CSS و دستورات style دهی پرکاربرد که قرار است بارها در جاهای مختلف stylesheet استفاده نمایید را گروه بندی کرده و آماده داشته باشید. Mixin ها می توانند دستورات کامل CSS و هر آنچه که در فایل Sass تعریف شده و بکار می رود را در برگیرد.

SASS این امکان را در اختیار توسعه دهنده قرار می دهد تا توابع دلخواه خود را تعریف کرده، آن ها را هر اسکریپتی بکار ببرد و با هر مقداری ورودی فراخوانی کند.آموزش directive توابع SASS

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

CSS تعداد زیادی property دارد که همگی در قالب "namespace;" های خاصی سازمان دهی شده اند. برای مثال، ویژگی های font-family، font-size و font-weight همگی در namespace ای به نام font قرار دارند. در CSS خالص زمانی که شما می خواهید تعداد زیادی property را که متعلق به یک namespace واحد هستند، مقداردهی نمایید، بایستی هر یک را به صورت مجزا و جداگانه تایپ کنید و این امر زمان گیر و ملال آور است. SASS یک راه میانبر برای شما تعبیه کرده است

این extension به شما امکان می دهد تا دستورات CSS (css rules) را داخل یکدیگر بکار برده و به اصطلاح آن ها را nest نمایید. برای مثال اگر لازم است چندین المان را با Selector ها انتخاب کنید، nested css این اجازه را می دهد تا یک selector را داخل selector دیگر استفاده نمایید و بدین وسیله selector های ترکیبی، پیچیده و تودرتو تعریف نمایید.

Sass از یک انتخابگر ویژه به نام "placeholder selector" استفاده می کند. این انتخابگر کاربردی مشابه id و class دارد با این تفاوت که بجای # و . از کاراکتر % استفاده می کند. این انتخابگر در اصل برای استفاده همراه با دستور @extend تعبیه شده است و بدون این دستور کاربردی ندارد (به تنهایی و بدون دستور @extend ، دستورات و rulesetهایی از CSS که از این placeholder selector ها استفاده می کنند، به CSS تبدیل و ترجمه نمی شود).

گاهی لازم می شود از انتخاب گر میزبان دستورات تودرتوی CSS (nested rule's parent selector) به صورت متفاوت و غیر از حالت پیش فرض استفاده نمایید. به طور مثال، شاید لازم باشد style و ویژگی های ظاهری خاصی به یک selector اعمال کنید که به هنگام قرارگیری اشاره گر موس بر روی آن یا زمانی که المان body دارای کلاس معینی بود، خود را نشان دهند.

شما می توانید به راحتی از طریق interactive shell که یک ابزار خط فرمان است دستورات مجاز و استاندارد SassScript را پردازش، اجرا، محاسبه و خروجی را مشاهده نمایید. به منظور راه اندازی shell کافی است دستور خط فرمان sass را همراه با پارامتر -i اجرا نمایید.

Data type در معنای کلی، روشی است برای دسته بندی داده ها بر اساس نوع در گروه های خاص و برای موارد استفاده ویژه. در Sass که یک زبان تنظیم ظاهر سایت و style دهی می باشد، Data type همین کارایی را دارد و توسعه دهنده را مجاب می کند که نوع داده ای که قرار است در آبجکت ذخیره شود را به هنگام تعریف آن مشخص نماید.

زبان تنظیم ظاهر وب سایت SASS این قابلیت را در اختیار توسعه دهنده قرار می دهد که عملیاتی نظیر جمع، تفریق، ضرب یا تقسیم را بر روی اعداد انجام دهد.

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

شما می توانید با استفاده از + مقادیر رشته ای در SASS را به یکدیگر متصل نمایید.

SASS ویژه ی هر یک از انواع داده ای از عملیات خاصی پشتیبانی می کند،پس قصد ما آموزش عملیات های ممکن در SASS به شما عزیزان است .

می توان با استفاده از پرانتز (Parentheses) ترتیب و اولویت انجام عملیات در SASS را تغییر داده و مدیریت کرد.

Sass Script تعداد زیادی توابع کاربردی و مفید ارائه می کند که به راحتی به واسطه ی ساختار نگارشی توابع متعارف CSS (normal CSS function syntax) قابل فراخوانی و اجرا می باشند.

می توانید با درج متغیر مورد نظر داخل دستور نگارشی #{} (سینتکس interpolation)، آن متغیر را در selector یا (اسم property) property دلخواه در Sass تزریق نمایید.

شما می توانید با استفاده از کاراکتر & به selector میزبان (parent selector) اشاره کرده و آن در Sass را انتخاب نمایید. این کاراکتر در واقع برای Sass مشخص می کند که در کدام قسمت از قطعه کد مورد نظر، selector میزبان باید (درج شود) قرار گیرد.

شما می توانید با الصاق پارامتر (flag) !default به انتهای مقدار متغیر مورد نظر برای متغیر مقدار پیش فرض تعیین کنید. چنانچه از قبل مقداری به متغیر اختصاص داده شده باشد، مقدار مجددا به متغیر مورد نظر اختصاص نمی یابد، اما در صورت نداشتن مقدار اولیه، مقدار جدید به آن انتساب می یابد.

شما می توانید با استفاده از and، or و not بر روی اسکریپت Sass عملیات بولی انجام دهید.

Sass دستور @import زبان CSS را به ارث برده (بسط داده) و به واسطه ی آن این امکان را فراهم می آورد که فایل های SCSS/SASS را وارد متن پروژه نمایید. تمامی فایل های import شده SCSS/SASS با یکدیگر در قالب یک فایل (خروجی) واحد CSS ادغام می شوند.

@media در واقع دستور سبک دهی و تنظیم ظاهر (style rule) را بر روی انواع حالات نمایش یا type media تنظیم می کند. دستورات @media در Sass و CSS کاربردی یکسان دارند، به استثنای یک قابلیت اضافه بر سازمان که آن امکان قرارگیری در بدنه ی دستورات CSS (به صورت تودرتو) می باشد.

گاهی به هنگام طراحی یک صفحه لازم می شود که یک کلاس علاوه بر style های (دستورات تنظیم ظاهر) خود، style های کلاس دیگری را نیز داشته باشد. آموزش extend در Sass

دستور @at-root سبب می شود یک یا چند دستور (rule) بجای اینکه داخل بدنه و در زیر انتخابگرهای میزبان (parent selector) جایگذاری (nest) شود، در بالای یک فایل (root فایل) نوشته و خروجی دهد.آموزش کار با دستورات at-root در Sass

دستور @debug خطاها را شناسایی کرده و مقادیر دستورهای Sass Script را در خروجی نمایش می دهد (standard error output stream) و در اشکال یابی و خطا زدایی کد به توسعه دهنده کمک می نماید.

دستور @warn مقدار (نتیجه) دستور Sass Script را در خروجی نمایش می دهد (standard error output stream). آموزش استفاده از دستور warn در Sass

دستور @error مقدار یا نتیجه ی اجرای دستور SassScript را به صورت یک خطای مهلک به همراه اطلاعات جزئی و خط به خط اجرای دستورات مربوط به خطای مذکور (stack trace) در خروجی نمایش می دهد.آموزش استفاده از دستور error در Sass

تابع درون ساخته ی if() مانند یک عملگر سه گانه ای عمل می کند. این تابع سه پارامتر به عنوان ورودی می گیرد.

دستور شرطی @if یک عبارت Sass Script را به عنوان پارامتر گرفته و پس از ارزیابی آن، چنانچه شرط برقرار باشد، دستور style دهی مربوطه که در بدنه ی if گنجانده شده را به المان مورد نظر اعمال می کند.

در Sass دستور for یک مجموعه دستور style دهی را به دفعات معینی تکرار کرده و به عنوان خروجی تولید می کند.

در Sass حلقه ی each برای پیمایش در list،map و کار با آیتم ها بکار می رود. این دستور کنترلی یک فرم یا شکل استفاده دارد و آن @each $var in <list or map> می باشد.

دستور کنترلی @while یک عبارت یا دستور Sass Script را به عنوان پارامتر گرفته و دستورات style دهی تعریف شده در بدنه را به تعداد دفعات معینی تا زمانی که شرط خاصی برقرار است تکرار می کند.

برای تعریف mixin لازم است ابتدا دستور @mixin، سپس اسم دلخواه، آرگومان هایی که قرار است به آن ارسال شوند و در نهایت قطعه کدی که دربردارنده ی محتوای mixin خواهد بود را مشخص نمایید.آموزش نحوه ی تعریف Mixin در Sass

می توان با استفاده از دستور @include، قطعه کد mixin را به فایل stylesheet مورد نظر اضافه کرد.در Sass

Mixin ها می توانند مقادیر SassScript (متغیرها) را در قالب آرگومان دریافت کنند. این مقادیر زمانی به عنوان آرگومان به mixin ارسال می شوند که mixin مورد نظر به واسطه ی دستور @include در فایل stylesheet وارد و فراخوانی شده باشد.

در Sass این امکان تعریف شده که قطعه کدی که حاوی مجموعه ای از دستورات style دهی هست را به عنوان آرگومان به mixin ارسال کرد.