مشخصات مقاله
-
956
-
0.0
-
2878
-
0
-
0
آموزش SASS - استفاده ی کاربردی از SASS
آموزش SASS – استفاده ی کاربردی از SASS
در این آموزش قصد داریم روش های مختلف استفاده از SASS در پروژه را شرح دهیم.
برای استفاده از SASS در طراحی می توانید به یکی از سه روش زیر اقدام کنید:
- به صورت یک ابزار خط فرمان (Command line tool)
- به صورت یک ماژول مستقل Ruby
- به عنوان یک افزونه برای فریم ورکی که قابلیت استفاده از Rack را دارد
اگر قرار است پروسه ی توسعه ی پروژه در بستر ویندوز صورت گیرد، در آن صورت بایستی ابتدا Ruby را نصب کنید.
در جدول زیر تعدادی از دستورات خط فرمان SASS را به همراه عملکرد هر یک مشاهده می کنید:
این دستور به شما اجازه می دهد تا کد SASS را از خط فرمان (Command line) اجرا نمایید.
به SASS دستور می دهد تا بر روی فایل نظارت داشته و هر زمان که محتوای فایل SASS تغییر کرد، CSS را نیز بروز رسانی کند.
چنانچه SASS فایل های متعددی را شامل شود، به واسطه ی این دستور می توان بر روی محتوای کل پوشه/directory نظارت داشت.
افزونه ی Rack/Rails/Merb
Rack یک رابط وب سرور (web server interface) هست که توسعه دهنده با استفاده از آن می تواند اپلیکیشن های تحت وب به زبان Ruby بنویسد.
برای فعال سازی Sass در ویرایش 3 فریم ورک Rails ، ابتدا بایستی به فایل environment.rb که در پوشه ی config قرار دارد، مراجعه نمایید. سپس با استفاده از کد زیر SASS را ویژه ی فریم ورک نام برده فعال سازی کنید:
config.gem "sass"
برای ویرایش 3 فریم ورک Rails و بالاتر بایستی دستور زیر را به فایل Gemfile اضافه نمایید:
gem "sass"
Rails یک فریم ورک توسعه ی اپلیکیشن های تحت وب (Web framework) متن باز و رایگان (open-source) است که از استاندارهایی نظیر JSON، HTML، CSS و JavaScript برای ساخت ظاهر سایت و لایه ی رابط کاربری اپلیکیشن استفاده می کند. به منظور کار با Rails، بایستی دانش پایه ای از Ruby و برنامه نویسی شی گرا داشته باشید.
جهت استفاده از SASS در اپلیکیشن های مبتنی بر Rack و فعال سازی آن، دستورهای زیر را به فایل config.ru که تحت پوشه ی root قابل دسترسی است، اضافه نمایید.
require 'sass/plugin/rack' use Sass::Plugin::Rack
Merb یک فریم ورک توسعه ی اپلیکیشن های تحت وب است که ویژگی هایی نظیر سرعت و ماژولار بودن را به Rails اضافه می کند.
جهت فراهم آوردن امکان فراخوانی و استفاده از SASS در فریم ورک Merb کافی است دستورات زیر را به فایل config/dependencies.rb اضافه نمایید.
dependency "merb-haml"
قابلیت ذخیره ی موقت فایل ها در SASS/ Caching
SASS فایل هایی نظیر template ها و partial ها را cache / به طور موقت ذخیره می کند. چنانچه محتوای این فایل ها ویرایش و بروز رسانی نشده باشد، بدون نیاز به parse (بررسی نحوی و تبدیل) بارها قابل استفاده می باشند. این امر کامپایل و ترجمه ی فایل های SASS را تسریع می بخشد، به ویژه اگر template ها به چندین فایل مجزا تقسیم شده باشند که در آن صورت همگی در قالب یک فایل بزرگ import می شوند. اگر فایل های کش شده را پاک کنید، بار دیگر به هنگام کامپایل تولید خواهند شد.
تنظیمات و مقداردهی آن ها (Options)
می توانید تنظیمات لازم options را در فایل environment.rb یا config.ru از اپلیکیشن مبتنی بر Rack با استفاده از دستور زیر مقداردهی نمایید:
Sass::Plugin.options[:style] = :compact
برای مقداردهی تنظیمات و options در فایل init.rb از اپلیکیشن مبتنی بر Merb نیز کافی است از دستور زیر استفاده نمایید:
Merb::Plugin.config[:sass][:style] = :compact
برخی از تنظیمات و option ها که برای SASS و SCSS قابل استفاده و مقداردهی می باشد را در جدول زیر مشاهده کنید:
این آپشن ظاهر و style خروجی CSS را تنظیم می کند.
دستور و روش کدنویسی (Syntax) SASS را تنظیم و مشخص می کند. جهت استفاده از روش قدیمی و توگذاری شده از پارامتر :sass و جهت استفاده از روش جدید کدنویسی از پارامتر :scss استفاده نمایید.
تنظیم این آپشن سبب می شود فایل هایی که با روش توگذاری شده و قدیمی نگارش شده اند از یک دستور نحوی (syntax) واحد برای سازمان دهی property ها استفاده نماید. در صورت تنظیم مقدار این آپشن با پارامتر :new، از سینتکس جدید برای نگارش و سازمان دهی property ها استفاده می شود. در صورت تنظیم مقدار این آپشن بر روی :old، فایل از سینتکس قدیمی برای سازمان دهی و نگارش property ها استفاده می شود.
مقداردهی این آپشن سبب می شود ترجمه و کامپایل فایل های SASS با سرعت بیشتری انجام شود. به صورت پیش فرض بر روی true تنظیم می شود. به عبارت دیگر مشخص می کند آیا فایل های parse شده SASS بایستی کش شوند یا خیر که در صورت مقداردهی با true سرعت کامپایل فایل ها بالا می رود.
زمانی که این آپشن مقداردهی شده و اما :cache تنظیم نشده باشد، در آن صورت اگر کشی وجود داشته باشد، صرفا کش Sass خوانده می شود و اگر وجود نداشته باشد، در آن صورت اطلاعات جدیدی داخل آن نوشته نمی شود.
می توان با تنظیم این آپشن بر روی نمونه ای کلاس مشتق شده (subclass) از Sass::CacheStores::Base، خروجی کش شده را ذخیره کرده و به آن دسترسی داشته باشید.
اگر مقدار این آپشن بر روی true تنظیم شود، آنگاه زمانی که محتوای فایل های template تغییر کنند، فایل CSS دیگر همزمان با آن بروز رسانی نمی شود. به صورت پیش فرض این property با false مقداردهی می شود.
هر زمان که محتوای فایل های template تغییر کند، فایل CSS نیز همزمان با آن بروز رسانی می شود.
با مقداردهی این آپشن، هرگاه سرور راه اندازی شد، آپدیت ها را بررسی می کند. سپس چنانچه آپدیت و اطلاعات جدیدی در فایل SASS موجود باشد، فایل CSS را مجددا کامپایل کرده و محتوای آن را بازنویسی می کند.
هنگامی که مقدار این آپشن را بر روی true تنظیم می کنید، sass از backend polling برای دستور Sass::Plugin::Compiler#watch (این دستور آپدیت فایل های CSS و Template را بررسی می کند) استفاده می کند.
مشخص می کند آیا به هنگام رخداد خطا در کد Sass، بایستی شرحی مفصل از خطا داخل فایل CSS خروجی ارائه داده شود یا خیر.
آدرس قرارگیری پوشه ی template در اپلیکیشن را فراهم می کند.
آدرس قرارگیری فایل های سبک دهی CSS/Stylesheet در اپلیکیشن را مشخص می کند.
با تنظیم مقدار این آپشن بر روی true، sass به هنگام درج اطلاعات در فایل ها از newline سیستم unix استفاده می کند.
اسم فایلی که در مرورگر اجرا و نمایش داده می شود. این آپشن منحصرا برای گزارش خطاها مورد استفاده قرار گرفته و در صورت استفاده از فریم ورک های Rack، Rails و Merb به صورت پیش فرض بر روی true مقداردهی می شود.
اولین خط از فایل template SASS را مشخص کرده و شماره ی خطوطی که خطا در آن رخ می دهد را تعیین می نماید.
It is used to load the paths for SASS template which are included using @import directive.
آدرس قرارگیری (Path) فایل های SASS Template که توسط دستور @import وارد پروژه شده را بارگذاری می کند.
آرایه ای از path های (محل های قرارگیری) filesystem یا importer ها که بایستی برای فایل های template Sass وارد شده در پروژه با دستور @import جستجو شود.
یک کلاس مشتق شده (subclass) از Sass::Importers::Base که برای مدیریت load path هایی که به صورت رشته ارسال شده، بکار می رود. این آپشن بایستی فایل ها را از filesystem وارد کند.
- auto: - این پارامتر دارای آدرس های URI نسبی می باشد. در صورت عدم وجود URI، از آدرس "file:" استفاده می کند.
- :file - این پارامتر از آدرس "file:" استفاده می کند که به صورت local کار کرده (فایل را از سیستم توسعه دهنده و به صورت محلی می خواند) و در سرورهای راه دور (remote) قابلیت استفاده ندارد.
- inline – این پارامتر کل متن منبع در sourcemap را شامل می شود و تا حد امکان قابل حمل است اما ممکن است فایل های sourcemap بسیار بزرگی تولید کند.
زمانی که با true مقداردهی شود، شماره ی خطی که خطا، داخل فایل css در آن رخ داده را نمایش می دهد.
آپشن حاضر اگر بر روی true تنظیم شود، اطلاعات (trace) مربوط به تمامی import ها و mixin ها را تولید می کند.
اگر مقدار این آپشن بر روی true تنظیم شده باشد، در آن صورت اطلاعات مربوط به اجرا و اشکال زدایی فایل های SASS را بر اساس شماره ی خط دستور و فایل در اختیار توسعه دهنده قرار می دهد.
این آپشن اگر بر روی true تنظیم شده باشد، اطلاعاتی را در اختیار توابع اختصاصی و کاستم SASS در اپلیکیشن های مجزا قرار می دهد.
این آپشن اطلاعات مورد نیاز را در اختیار توابع اختصاصی Sass در اپلیکیشن های اختصاصی قرار می دهد.
اگر مقدار این آپشن بر روی true تنظیم شده باشد، در آن صورت هشدارها غیرفعال می شوند.
تعیین روش کدنویسی و Syntax
ابزار خط فرمان Sass (command-line) با استفاده از پسوند فایل تشخیص می دهد کدام syntax مورد استفاده می باشد. اما همان طور که می دانید همیشه اسم فایل به صورت صریح ذکر نشد و مشخص نیست. برنامه ی خط فرمان sassبه صورت پیش فرض از ساختار نگارشی توگذاری شده (indented syntax) برای نوشتن دستورات استفاده می کند. شما می توانید با ارسال پارامتر --scss به خط فرمان، به آن اعلان کنید که دستورات را به عنوان SCSS درنظر گرفته و تفسیر کند. در صورت تمایل، می توانید از ابزار خط فرمان scss استفاده کنید که بسیار شبیه به sass می باشد اما بر خلاف آن، به صورت پیش فرض ساختار نگارشی مورد استفاده را scss در نظر می گیرد.
Encodings (تعیین الگوریتم کدگذاری کاراکتر در فایل ها)
اگر Sass مبتنی بر ویرایش Ruby 1.9 باشد (بر روی آن اجرا شود)، در آن صورت قادر است خود به صورت پیش فرض الگوریتم کدگذای کاراکترها را تشخیص دهد. Sass استاندارها و رهنمودهای CSS را برای تعیین الگوریتم کدگذاری stylesheet (encoding) دنبال می کند اما به صورت پیش فرض از الگوریتم کدگذاری رشته Ruby بهره می گیرد. بدین معنی که ابتدا بایت Unicode را بررسی می کند، در مرحله ی بعدی @charset و در نهایت (الگوریتم کدگذاری Ruby) Ruby string encoding. اگر هیچ یک تنظیم نشده باشند، تشخیص می دهد که فایل با الگوریتم UTF-8 کدگذاری شده است.
جهت تعیین الگوریتم کدگذاری کاراکترهای فایل stylesheet به صورت صریح، کافی است مانند CSS از دستور @charset استفاده نمایید. برای نیل به این هدف، همان طور که گفته شد، لازم است دستور @charset "encoding-name"; را در ابتدای فایل stylesheet (پیش از کاراکتر whitespace یا کامنت) درج کنید. خواهید دید که Sass آن را به عنوان الگوریتم کدگذاری فایل استفاده می کند. توجه داشته باشید که encoding مورد استفاده ی شما هر چه باشد، بایستی قابل تبدیل به الگوریتم Unicode باشد.
Sass همیشه خروجی خود را بر اساس الگوریتم کدگذاری UTF-8 رمزنگاری (encode) می کند. همچنین دستور @charset را اضافه کرده و اگر فایل خروجی دربردارنده ی کاراکترهای غیر اسکی (non-ASCII) باشد، Sass آن را به عنوان الگوریتم کدگذاری پیش فرض تفسیر می کند. در حالت compressedو فشرده، بجای دستور @charset از UTF-8 BOM استفاده می شود.