SASS چیست؟ آموزش کامل پلتفرم SASS

پلتفرم Sass خود را با شعار ما دوباره CSS را جذاب کرده ایم، تبلیغ می کند. در واقع Sass: استفاده از اصول برنامه نویسی برای نوشتن کد های استایل دهی یا CSS است. با استفاده از اصول برنامه نویسی دیگر نیازی نیست، که یک کد را بارها و بارها در CSS تکرار کنیم، تنها کافیست که آن را درون یک تابع قرار دهیم.

پلتفرم Sass چیست؟

مانند همیشه برای تعریف یک نرم افزار و پلتفرم از سایت رسمی شرکت ارائه دهنده استفاده می کنیم. سایت رسمی Sass در آدرس http://sass-lang.com قابل دسترس است. با توجه به اینکه امکان آموزش کامل پلتفرم Sass در یک مقاله ممکن نیست. برای آموزش کامل این پلتفرم به سایت آن مراجعه کنید. هدف ما آشنایی شما با این پلتفرم میباشد. پلتفرم Sass با زبان های طراحی سایت به زبان PHP و زبان Ruby و زبان Asp کاملا همآهنگ است ومیتوانید از سایت Sass نسبت به دانلود نسخه مناسب با توجه به زبان برنامه نویسی خود اقدام کنید.

Css زبان ساده است است اما روز به روز در حال بزرگ شدن و پیچیده تر شدن است. با بزرگ شدن و پیچیده شدن CSS استفاده از آن سختر و پردازش کدهای آن زمانبر تر شده است. Sass طراحی شده است تا امکانات جدیدی مانند متغییر ها، چیدمان تگ ها، ترکیب کدها، ارثبری و دیگر ویژگی های یک زبان برنامه نویسی را به Css اضافه کند.

Sass مخفف واژه Syntactically Awesome StyleSheets می باشد.

مطالعه بیشتر: CSS sprite چیست؟

ویژگی های پلتفرم SASS 

1- سازگاری با CSS

Sass با تمام نسخه های Css سازگار است. این سازگاری برای تولید کنندگان Sass از اهمیت بالایی برخوردار بوده و کاربران Sass میتوانند، از هر کتابخانه Css استفاده کنند. بصورت کلی سه کتابخانه Css به نام های Css1,css2,css3 میان کاربران پرطرفدار هستند و همگی توسط Sass پشتیبانی می شوند.

2- تکامل یافته بودن Sass

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

خدمات وب24: طراحی سایت با کدنویسی

3- کاربران Sass

امروزه از پلتفرم Sass بصورت تخصصی استفاده می شود، و بسیاری از تولید کنندگان حرفه ای صفحات وب از Sass بعنوان زبان برنامه نویسی Css استفاده می کنند. Sass توسط برنامه نویسان و توسعه دهندگان و شرکت های برنامه نویسی فراوانی در سراسر دنیا پشتیبانی می شود. Sass توسط توسعه دهندگانی مانند compass،Bourbon،Susy و بسیاری توسعه دهندگان دیگر تکامل یافته و مورد استفاده صد ها سایت معتبر قرار گرفته است. (شبکه اجتماعی linkdin از پلتفرم compass استفاده می کند.)

4- نصب Sass

نصب بر روی سیستم عامل لینوکس:

برای نصب Sass بر روی لینوکس باید ابتدا Ruby را نصب کنید. در لینوکس با کمک package manager می توان Ruby را نصب کرد.

نصب Sass در ویندوز :

برای نصب Sass بر روی ویندوز، باید ابتدا زبان برنامه نویسی Ruby را نصب کنید. میتوانید از سایت www.ruby-lang.org فایل Ruby Installer را دریافت و با کمک آن روبی را نصب کنید. در سایت P30download نیز نسخه آفلاین روبی قرار داده شده است که برای دانلود آن میتوانید به آدرس http://p30download.ir/fa/entry/43885 مراجعه کنید.

با نصب ruby در ویندوز شما نرم افزارهای Ruby command و powershell را نیز نصب خواهید کرد.

نصب Sass بر روی Mac :

برای نصب Sass بر روی مک نیازی به نصب Ruby ندارید. مک بصورت پیشفرض روبی را با خود روی سیستم نصب می کند.

چگون Sass را نصب کنیم؟

بعد از آنکه در سیستم عامل های ذکر شده پیش زمینه لازم برای نصب Sass را فراهم کردید میتوانید با گام های زیر Sass را نصب کنید. نرم افزار خط دستور سیستم عامل خود را اجرا کنید. در مک نام این نرم افزار Terminal.app است و آن را میتوانید در پوشه Utilities بیابید. در ویندوز باید در پنجره Run دستور Cmd را اجرا کند. برای نصب Sass باید از دستور Gems که از دستورات Ruby است استفاده کنید. کد زیر را در خط فرمان تایپ کنید.

این دستور برای شما نرم افزار Sass و تمام متعلقات آن را نصب می کند. اگر هنگام اجرای این دستور با پیام خطا مواجه شدید. از این خط دستور استفاده کنید:

کنترل مجدد:

در حال حاضر باید Sass بر روی سیستم نصب شده باشد. ولی بهتر است از نصب Sass اطمینان حاصل کنید. برای اینکار دستور زیر را چک کنید.

شما باید پیام زیر را دریافت کنید:

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

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

فایل های Sass با پسوند Sass ایجاد میشود برای استفاده از این فایل ها در وب باید آنها را به Css تبدیل کرد. برای اینکار از دستور sass input.scss output.css در خط فرمان استفاده کنید. برای مشاهده فایل ها و پوشه ها میتوانید از دستور –watch استفاده کنید. به دستور زیر نگاه کنید.

متغییر ها در Sass

به متغییرها بصورت ابزاری نگاه کنید، که میتوانند اطلاعاتی را برای شما ذخیره کنند، تا بتوانید در آینده از آن اطلاعات دوباره استفاده نمایید. میتوان اطلاعاتی مانند رنگ و نام فونت و یا هر مقدار دیگری در Css را بصورت متغییر در Sass ذخیره کرد و بار دیگر به کاربرد. sass برای ایجاد متغییر ها از پسوند $ استفاده می کند.

بعد از پردازش Sass متغییر های $font-stack و $primary-color پردازش شده و به کد های Css تبدیل می کند.

چیدمان کدها درSass

یکی از ویژگی هایی که باعث میشود کاربران بخواهند، بجای نوشتن Css کدهای استایل دهی را با زبانی مانند Sass بنویسند سادگی چیدمان کد ها در Sass است. هنگامیکه کد های Html سایت را می نویسید. یک ساختار درختی از کد ها ایجاد می کنید. در css نمی توان این ساختار درختی را ایجاد کرد. Sass به شما اجازه میدهد که ساختار درختی فایل Html را در استایل دهی نیز بکار ببرید. به این ترتیب نوشتن کدهای استایل دهی بسیار ساده خواهد شد. یک مثال ساده از کد نویسی با حفظ ساختار درختی در Sass را در مثال زیر مشاهده می کنید.
 

همانطور که مشاهده می کنید تگ های ul,li,a در زیر شاخصه تگ nav قرار دارند. این کدها کمک می کنند که استایل خوانایی بیشتری داشته باشد. ترجمه این فایل به Css به این صورت خواهد بود.

ایجاد استایل های ماژولار در Sass

در طراحی وب امروزه ما با نرم افزار های مدیریت محتوا طراحی سایت را انجام میدهیم، که باعث میشود همه چیز بصورت جداگانه و ماژولار طراحی شود. در Sass شما میتوانید تکه ای از کدها را در فایل دیگری قرار داده و آنها را با کد @import فراخوانی کنید. در Css کد @import یک درخواست Http ارسال می کند. ولی در Sass کدهای فایل وارد شده، به فایل الصاق میشوند و بصورت یک فایل Css در وب به نمایش درمی آیند. مثال زیر فایل Rest.Scss را وارد فایل base.Scss کرده ایم:

همانطور که مشاهده می کنید در Sass نیازی به تعیین فرمت فایل ورودی نیست خود Sass برای ترجمه و یا عدم ترجمه فایل وارد شده میتواند تصمیم گیری کند. نتیجه کد های بالا یک فایل Css بصورت زیر خواهد بود.

معرفی خدمات وب 24: طراحی سایت وردپرس

استفاده از ترکیب کد در Sass

برخی مرورگرها برای اجرای درست یک کد استایل دهی، کد را با یک پیشوند دریافت می کنند. این امر باعث میشود که برای نوشتن Css ناچار باشیم یک خط کد را برای چنیدن مرورگر مختلف به چند صورت تایپ کنیم. یکی از ویژگی های Sass راحتتر کردن نوشتن چنین کدهایی است. مثال زیر را مشاهده کنید:

همانطور که میبینید در نسخه Scss یک نام @mixin ایجاد شده است که در مثال بالا برابر با border-radius قرار دارد. در نسخه Sass ما از متغییر $radius استفاده کرده ایم. اگر از نسخه Scss استفاده کنیم، متوانیم برای فراخوانی کدها از @include استفاده کنیم. نتیجه هر دو کد بالا در فایل Css به این صورت خواهد بود.

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

مطالعه بیشتر:

مقاله بوت استرپ (Bootstrap) چیست؟ پلتفرم دیگری را برای تهیه صفحات وب را معرفی می کند که علاوه بر استایل های آماده داری یک کتابخانه جاوا اسکریپت است که کار طراحی وب را بسیار ساده می کند.