SASS چیست؟ آیا SASS مرحله بعدی CSS محسوب می شود؟
به کمک CSS شما قادر خواهید بود تا همانگونه که می خواهید، وبسایت تان را طراحی و پیاده سازی کنید. اما زبان طراحی دارای محدودیت هایی است. بسیاری از طراحان وب خواستار راهی بهتر و آسان تر برای طراحی وبسایت هایشان هستند. اینجا، جایی است که CSS Reprocessors به میان می آید. به کمک این زبان طراحی، شما قادر خواهید بود تا طراحی هایتان را با فراغ بال بیشتری انجام دهید. مهم ترین ابزار طراحی در این زمینه SASS است. SASS مخفف Syntactically Awesome Style Sheets و یک زبان پیش پردازنده برای تولید کد CSS است. این زبان به هیچ عنوان جایگزین CSS محسوب نمی شود و می توان آن را روشی برای توسعه و مدیریت کدهای CSS دانست.
SASS چیست؟
برای اینکه متوجه شوید SASS چیست و چرا شما به آن احتیاج دارید، در ابتدا بایستی با CSS آشنا شوید. وبسایت ها بر اساس زبان HTML طراحی و پیاده سازی می شوند. اگر می خواهید در HTML طراحی داشته باشید، باید محتوا را در هر صفحه HTML مستقیما به طراحی پیوند دهید. ماهیت HTML بگونه ای است که برای طراحی ساخته نشده و در این حوزه، به شدت محدود شده است. زمانی که HTML پا به عرصه دنیای اینترنت گذاشت، فرض بر این که این زبان تنها برای نمایش متن و عکس بوجود آمده است. عملا در آن زمان، کسی حتی فکر آن را نمی کرد که روزی برسد که اینترنت به خانه های صدها میلیون آدم و بر روی کامپیوترهای شخصی نفوذ کند. HTML زبانی بود که بسیاری از موارد پیشرفته در طراحی در آن لحاظ نشده بود. بعلاوه اینکه این زبان قابلیت تغییر، کاربر پسندی و بسیاری دیگر از مباحثی که در دنیای برنامه نویسی و طراحی با گذشت زمان بوجود آمده اند را در خود جای نداده است. CSS یا Cascade Style Sheets زبان برنامه نویسی می باشد. عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد. CSS برای کد های HTML مکمل حساب شده و عملا برای هر عنصری در صفحه، طراحی را پیاده سازی می کند. به کمک CSS طراحان وبسایت قادر به طراحی و تنظیم فونت، رنگ فونت، پس زمینه و … خواهند بود.
برای مثال برای تنظیم نوع فونت و بزرگی آن می توان به کمک CSS، این کار را به راحتی هرچه تمام انجام داد. قوانین موجود برای این تغییرات معمولا در فایل های مختلف وجود داشته که صفحات HTML به آنها رجوع می کنند. با این کار مقدار داده ها و برنامه نویسی برای هر صفحه بسیار پایین خواهد آمد.
هرچند CSS نیز دارای یک سری محدودیت هایی است که اگر تجربه کار با آن را داشته باشید، به وضوح از آن مطلع هستید. نقطه قوت CSS در واقع نقطه ضعف آن نیز محسوب می شود! طبان طراحی در CSS بسیار ساده است. SASS این کار را کمی پیچیده تر کرده و کار ایجاد یک طراحی را بسیار ساده می کند.
نمای مرورگرهای اینترنتی مدرن می توانند CSS را بدون مشکل اجرا کنند؛ اما این امر مهمی برای SASS تلقی نمی شود. در این حالت، SASS بعنوان یک پردازشگر حساب می شود. کدهای موجود در اسناد SASS در ابتدا و قبل از کدهای اصلی، به کد های CSS تبدیل می شوند.
*زبان برنامه نویسی SASS، زبان SassScript نام دارد.
چرا شما به SASS نیاز دارید؟
در ابتدا دلیلی وجود ندارد که استفاده از SASS را بتواند توجیه کند. به کمک CSS، سال هاست که وبمستر ها می توانند بصورت پویا سایت هایشان را طراحی کرده و بصورت تکنیکی نیز جوابگوی نیاز های آنها است. حتی اگر از الان به بعد خواستار استفاده از SASS باشید، نمی توانید CSS را کنار بگذارید. این زبان طراحی قدیمی همانند زمان پیدایش اش، پر استفاده بوده و در آینده هم این موضوع هنوز هم استفاده از آن به قوت خود باقی است. SASS و دیگر زبان ها در واقع بر اساس CSS طراحی شده و شالوده خود را از آن به نشات گرفته اند.
هرچند که SASS، قابلیت هایی را برای شما به دنبال دارد که CSS فاقد آنها است:
- متغیرها: به کمک SASS شما قادر خواهید بود تا اطلاعات را در متغیر ها ذخیره کرده تا بعدا در صورت نیاز، بتوانید از آنها استفاده کنید. به عنوان مثال، امکان ذخیره کردن یک مقدار رنگی تحت یک متغیر از نوعcatchier وجود دارد.
- توابع ریاضی: در زبان SASS شما می توانید از توابع ریاضی همچون، جمع، تقسیم، ضرب، تفریق و درصد استفاده کنید. با این کار می توانید اندازه داده ها و متغیر ها را کنترل کنید
- توابع: به کمک توابع، طراحی و پیاده سازی ساده خواهد شد. برای مصال با استفاده از توابع می توانید مقادیر رنگ ها را تعیین کرده و یا لیست داده ها را آنالیز کنید.
- حلقه ها: یکی دیگر از مزایای SASS، توانایی ایجاد حلقه ها است. در حلقه ها فرامین تکرار می شوند تا در نهایت به وضعیتی که توسط شما تعریف شده است، برسند.
- تفاوت های موردی: در این موارد، فرامین همچون توابع شرطی مثل “if” و “else” عمل می کنند. تنها زمانی فرامین اجرا خواهند شد که شرط آنها برقرار باشد.
- گروه بندی کدها: گروه بندی کدها یا Mixins، در واقع همان Template ها هستند. شما می توانید این گروه بندی ها را خودتان ایجاد کنید و یا با استفاده از Framework، آنها را به کد خود اضافه کنید.
- SASS :Indentations اصلی (در نقطه مخالف SCSS) با indentations ها کار می کند. در این حالت شما برای استفاده از دستورات تو در تو (Nesting) نیاز به پرانتز ندارید؛ و یا برای پایان یک خط دستوری نیاز به سمیکالن (Semicolom) ندارید.
- دستورات تو در تو یا Nesting: در CSS امکان استفاده از دستورات تو در تو وجود ندارد. با این حال SASS، به کاربران اجازه می دهد تا تصاویر بصری را برای کاهش کارهای انفرادی و ساده سازی روند نوشتن ارائه دهند.
- وراثت یا Inheritances: امکان رسیدن اطلاعات از یک انتخاب کننده به انتخاب کننده ای دیگر وجود دارد. این کار از طرفی باعث تسهیل برنامه نویسی شده و از طرفی دیگر، تعداد خطوط برنامه نویسی را نیز کاهش می دهد.
- فایل های جزئی یا Partial files: برای استفاده از کدها در ساختار فایل SASS، می توانید از Partial ها استفاده کنید. Partial File یا فایل ها جزیی، فایل هایی هستند که تعداد کمی از خطوط برنامه نویسی شده CSS در آنها وجود دارد و می توانند در کدهای SASS به وسیله یک سری فرمان ها، وارد شده و با آنها ادغام شوند.
امروزه برای SASS کتابخانه نیز تعریف شده است. به کمک Cpmpass یا Bourbon قادر خواهید بود تا به راحتی حین طراحی سایت، امکانات بسیاری در اختیار داشته باشید.
* SASS دارای لاینسنس مورد تایید MIT بوده و همچنین متن باز/منبع باز (Open Source) است. در کنار تمامی این موارد، زبان های برنامه نویسی دیگری نیز وجود دارد که تحت مجوزهای اختصاصی قادر به فعالیت بوده که گاهی، استفاده از آنها ساده تر جلوه می نماید.
از SASS تا CSS
درست است که کدهای مبتنی بر SASS تغییرات و اثربخشی دلخواه شما را به دنبال دارند؛ اما از طرفی این کد ها در مرحله بعدی باید تبدیل به CSS شوند. توابع کامپایل خیلی راحت بر روی خط فرمان اجرا می شود:
با این خط فرمان شما قادر خواهید بود تا کدهای برنامه نویسی شده تان در فایل SASS را به فایل CSS تبدیل کنید. برای انجام این کار، مدهای نوشته شده در SASS بطور خودکار به کدهای CSS تبدیل می شوند.
با استفاده از این ابزار قادر خواهید بود تا زمانی که طراحی سایت را به اتمام رساندید، تغییرات دلخواهتان را در آن اعمال کنید. به همین دلیل در برنامه نویسی SASS ابزاری “watch–” وجود دارد که به کمک آن می توانید فایل ها و فولدر هایتان را بررسی کرده و تحت نظر داشته باشید. اگر تغییری در این فایل ها اعمال کنید، سیستم بطور خودکار آنها را از نو کامپایل خواهد کرد.
SCSS یا SASS ؟ چه تفاوتی میان این دو وجود دارد؟
شما در SASS می توانید از دو سینتکس (Syntax) استفاده کنید: یکی از این دو بعنوان مورد اصلی بوده که با نام “indented syntax” یا بطور اختصار SASS خوانده می شود. اما نوع جدید دیگری نیز وجود دارد که بیشتر با ساختار CSS شبیه بوده و به آن Sassy CSS یا SCSS می گویند. ورژن سوم SASS دارای SCSS است. بزرگترین تفاوت میان SASS و SCSS :استفاده از پرانتز و سمیکالن.
SASS ارجینال با indents and line breaks کار می کند که از YAML نشات گرفته شده است. برای اتمام یک خط برنامه نویسی شده، کافی است تا در انتهای آن یک Line Break قرار دهید؛ سپس اینتر را بزنید. در CSS بایستی جهت اتمام خطوط از سمیکالن استفاده کنید. همچنین در CSS شما باید در نظر داشته باشید که می توان از پرانتز جهت دستورات استفاده کرد. این یکی از مهمترین چیز هایی است که باید در SCSS وجود داشته باشد.
افرادی که از CSS استفاده می کنند، راحت تر می توانند با آن ارتباط برقرار کرده و امورات خود را انجام دهند. در برنامه نویسی بایستی از ابتدا در نظر بگیرید که می خواهید فایل تان از نوع ‘sass.’ باشد یا ‘scss.’
مزایا و معایب SASS
استفاده از SASS مزایای بسیاری برای شما به دنبال دارد؛ هرچند که قدرت پردازشی آن کسی را ترغیب نمی کند. مزایای SASS کاملا مشهود هستند: زبان پیش پردازنده برای کاربران امکانات بیشتری را در تولید کدها می دهد. بسیاری از طراحان وب ترجیح می دهند که برای تغییر رنگ به جای اینکه خط مربوط به رنگ را در کدهای برنامه نویسی شده پیدا کنند، از یک متغیر استفاده کرده تا با تغییر آن، رنگ عوض شود. گروه بندی کدها، متغیر ها، ارث بری و دستورات تودرتو نسبت به CSS سنتی بسیار بهتر عمل می کنند. با استفاده از این متد، دیگر نیازی به کپی خطوط نبوده و از تعداد خطوط برنامه نویسی شده کاسته خواهد شد. این تغییرات همچنین باعث شده تا از بار کاری روی دوش فرد برنامه نویس بسیار کاسته شود. به جای تغییر در خطوط برنامه نویسی که در قسمت های مختلف می توانند باشند، فقط می توانید یک تغییر را در یک موقعیت مرکزی ایجاد کنید و اینگونه، تغییر لازم در تمامی خطوط برنامه اعمال خواهد شد.
معایب مربوط به SASS در واقع مربوط به بخش پیش پردازش است و اینکه کدها پس از نوشته شدن، بایستی کامپایل شوند. با این مرحله اضافی، روند کاری بیشتر خواهد شد. بدین ترتیب پروسه طولانی تر خواهد شد. به جای اینکه شما قادر به ایجاد تغییرات به طور مستقیم در فایل های CSS باشید و بلافاصله بتوانید اثر این تغییرات اعمال شده را بر روی وب سایت تان ببینید، تغییرات در ابتدا بایستی به زبان CSS ترجمه شوند. با اینکار امکان ایجاد خطا افزایش یافته و اشکال زدایی (Debugging( سخت تر شود.
همانند تمامی زبان های برنامه نویسی، قبل از استفاده از SASS، باید مفاهیم پایه و اساسی آن را فرا گیرید. علاوه بر CSS که تحت هر شرایطی باید به آن مسلط باشید، SASS را می توانید بعنوان زبانی جامع فراگیرید.
| مزایا | معایب |
| امکانات بیشتر | کد های برنامه نویسی بایستی کامپایل شوند. |
| کدنویسی شفاف | مشک در جهت عیب یابی |
| چارچوب گسترده و قابل گسترش | تلاش یادگیری عالی |
| توانایی کار با Mixins و متغیرها (Variables) |
SASS در تقابل با LESS؛ مقایسه بین دو زبان پیش پردازنده
علاوه بر SASS، زبان LESS نیز در حال گسترش است. مفاهیم این زبان برنامه نویسی نیز از CSS به عاریت گرفته شده اند. هر دوی این زبان های پیش پردازنده دارای خصوصیات مشابهی با یکدیگر هستند. هر دو زبان SASS و LESS می توانند از Mixins و متغیر ها استفاده کنند. فرق بین SASS و LESS این است که SASS بر پایه Ruby و زبان LESS بر پایه جاوا اسکریپت (JavaScript) است. اما این وجه تمایز باعث نشده که یکی از این دو زبان پیش پردازنده نسبت به دیگری برتری پیدا کند.
تفاوت اصلی میان SASS و LESS درواقع مربوط به توابع منطقی است. LESS این امکان را به کاربر می دهد که شرایط بخصوصی به وقوع پیوست، Mixins را فعال کند. این امکان جالب توجهی است که در واقع به دلیل تفاوت LESS با SASS از نظر توابع منطقی است. در نقطه مقابل، به کمک SASS قادر خواهید بود تا از حلقه ها و case distinctions استفاده کنید که اینها به دلیل زبان برنامه نویسی SASS می باش.
کاربران با استفاده از SASS قادر خواهند بود تا بین “intended syntax” و “SCSS” بتوانند یکی را انتخاب کنند. هر وبمستری می تواند انتخاب کند که آیا می خواهد به اصول اصلی و ارجینال پایبند باشد؛ یا از قوانین CSS اجتناب کند. اما در LESS این امکان انتخاب از فرد سلب شده و وی حق انتخاب ندارد. در اینصورت افراد باید با قوانین قدیمی خود را تطبیق دهند.
همانطور که گفتیم LESS به زبان JavaScript نوشته شده و SASS به زبان Ruby.
تفاوت چندانی ندارد که از کدام استفاده می کنیم ولی ممکن است نصب و راه اندازی LESS آسان تر باشد. ولی در کل نباید مبنای انتخاب خود را بر زبانی که پیش پردازنده نوشته شده است، قرار داد.
LESS فریم ورک های خیلی خوبی مانند Compass که برای SASS داریم، را ندارد. در واقع بسیاری از افراد فقط برای استفاده از Compass از SASS استفاده می کنند.
در تعریف کردن متغیرها هم تفاوت وجود دارد. SASS از $ و LESS از @ برای تعریف متغیر ها استفاده می کند. فقط تنها مورد می تواند این باشد که در CSS استفاده دیگری از @ مثل media@ داریم.
LESS در حلقه ها فقط می تواند بر روی داده های عددی پیمایش انجام دهد ولی SASS می تواند روی تمام نوع داده ها پیمایش انجام دهد که خیلی کاربردی می باشد.
در هر دو نوع پیش پردازنده شما می توانید خودتان mixin تعریف کنید. معمولا بعد از تعریف کردن mixin دیگر برای تغییر دادن آن اقدام نمی کنید چون در چندین پروژه ممکن است از آن استفاده کرده باشید تغییر دادن آن مقداری مشکلات بوجود می آورد.
در SASS با استفاده از Compass می توان اطمینان داشت که mixin های خود را آپدیت نگه می دارد پس در موقعیت هایی که ممکن است از قسمتی از یک mixin استفاده کنیم ، را کنترل کنیم.
در LESS هم افزونه ای به نام Less Elements وجود دارد , ولی به اندازه SASS قدرتمند نیست.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.