مقدمه
با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربران و علاقمندان به دوره آموزش Sass. در جلسه گذشته با سینتکس Sass و انواع آن آشنا شدیم و کار با آن ها را فرا گرفتیم. بر طبق آموخته های خود در جلسه پیشین : SCSS یا (Sassy CSS) : یک اکستنشن از سینتکس CSS است. این امر بدان معناست که هر CSS معتبری یک SCSS معتبر نیز هست. SCSS به راحتی به stylesheets اشاره می کند و می تواند به وسیله vendor specific syntax شناسایی شود. Indented : این دستورالعمل قدیمی تر از سینتکس قبل است و گاهی اوقات به عنوان SASS نامیده می شود. با استفاده از این فرم سینتکس، می توان CSS را به طور خلاصه نوشت. فایل های SASS از پسوند sass. استفاده می کنند.در این جلسه و در ادامه این دوره آموزشی، آموزش استفاده از Sass را به علاقمندان این دوره ارائه می نماییم.
آموزش استفاده از Sass
Sass یک پیش پردازنده بسیار قدرتمند و پایدار است که موجب گسترش پایه ها و اصول برنامه نویسی با استفاده از اکستنشن های CSS می شود.
می توان از SASS در سه روش متفاوت استفاده کرد :
- به عنوان ابزار خط فرمان command line tool
- به عنوان یک ماژول روبی Ruby module
- به عنوان یک پلاگین برای Rack enable framework
توجه داشته باشید که اگر می خواهید از Sass در ویندوز استفاده نمایید باید ابتدا نرم افزار روبی را نصب کنید.
برای اطلاعات بیشتر در مورد روبی و نصب آن به جلسه دوم از دوره آموزش Sass مراجعه نمایید.
در ادامه آموزش استفاده از Sass جدولی ارائه شده است که حاوی دستورهایی است که در اجرای کد های SASS به آن ها احتیاج دارید.
| شماره دستور | دستور و ویژگی ها و توصیفات آن |
| ۱ | sass input.scss output.css
از این دستور برای اجرای کد های SASS از خط فرمان استفاده می شود. |
| ۲ | sass –watch input.scss:output.css
این دستور به SASS اطلاع می دهد که فایل را بررسی کرده و هر گاه فایل تغییر کرد CSS
را به روز رسانی نماید. |
| ۳ | sass –watch app/sass:public/stylesheets
اگر SASS شامل فایل هایی زیادی بود در آن صورت از این دستور برای بررسی کل دایرکتوری
استفاده می شود. |
پلاگین Rack/Rails/Merb
Rack یک رابط وب سرور است که برای توسعه برنامه های کاربردی وب در روبی استفاده می شود.
برای اطلاعات بیشتر در مورد Rack، به این لینک مراجعه کنید.
می توانید SASS را در نسخه Rails 3 با استفاده از فایل environment.rb موجود در پوشه config فعال کنید.
با استفاده از کد زیر SASS را برای Rails فعال کنید.
می توانید از خط زیر به Gemfile برای Rails 3 (و نسخه های بالاتر از آن) استفاده کنید.
Rails یک چارچوب وب مبتنی بر وب است که از استانداردهای وب مانند JSON، HTML، CSS و جاوا اسکریپت برای نمایش رابط کاربر استفاده می کند.
برای کار با Rails، باید یک دانش پایه از برنامه Ruby و شی گرا داشته باشید.
برای اطلاعات بیشتر از چارچوب Rails به این لینک مراجعه نمایید.
اگر میخواهید SASS را در برنامه Rack فعال کنید، خطوط زیر را به فایل config.ru که در پوشه ریشه برنامه وجود دارد اضافه کنید.
مثال :
| require 'sass/plugin/rack' use Sass::Plugin::Rack |
Merb یک چارچوب کاربردی وب است که سرعت و مدولار بودن را در Rails فراهم می کند.
می توانید SASS را در Merb را با اضافه کردن خط زیر به فایل config / dependencies.rb فعال کنید.
ذخیره سازی
SASS اسناد از قبیل templates و partials را که می توانند بدون تجزیه مجدداً مورد استفاده قرار گیرند ذخیره می کند.
این امر به نسبت زمانی که templates ها به فایل های جداگانه تقسیم شده و سپس وارد یک فایل بزرگتر می شوند موجب کامپایل فایل های SASS با سرعت بیشتری می شود.
این قابلیت حتی سبب می شود که بتوانید فایل های ذخیره شده ای را که حذف نموده اید؛ بار دیگر بارگذاری نمایید.
آپشن ها مبحث دیگری است که در آموزش استفاده از Sass به آن خواهیم پرداخت.
آپشن ها
می توانید آپشن ها را در فایل environment.rb فایل Rails یا فایل config.ru برنامه Rack با استفاده از خط زیر تنظیم کنید.
مثال :
| Sass::Plugin.options[:style] = :compact |
همچنین می توان آپشن های موجود در init.rb فایل Merb را با استفاده از خط زیر تنظیم کرد.
مثال :
| Merb::Plugin.config[:sass][:style] = :compact |
برخی از آپشن های موجود با SASS و SCSS در دو جدول زیر توضیح داده شده اند.
جدول یک
| شماره آپشن | آپشن، ویژگی ها و توضیحات آن |
| ۱ | style:
این آپشن استایل خروجی را نمایش می دهد. |
| ۲ | syntax:
به کمک این آپشن می توانید از اکستنشن های سینتکس CSS و sass برای scss استفاده نمایید. |
| ۳ | property_syntax:
این آپشن از سینتکس استفاده کی کند تا بتواند از ویژگی های بهره ببرد.
اگر نتیجه آن اشتباه در آمد در آن صورت یک خطا را نمایش خواهد داد.
برای مثال “background: #F5F5F5” در نظر بگیرید که در آن background نام یک ویژگی یا property است و #F5F5F5
مقدار این ویژگی یا property.
باید بعد از نام property از colon استفاده نمایید. |
| ۴ | cache:
این آپشن سرعت کامپایل فایل های SASS را افزایش می دهد و به طور پیش فرض بر روی trueتنظیم شده است. |
| ۵ | read_cache:
اگر cache تنظیم نشده باشد و در عوض read_cache تنظیم شده باشد در آن صورت این آپشن فایل های SASS را می
خواند. |
| ۶ | cache_store:
این آپشن می تواند از طریق تنظیم نتایج ذخیره شده با استفاده از Sass::CacheStores::Base به این نتایج دسترسی
داشته و آن ها را استفاده نماید. |
| ۷ | never_update:اگر فایل های template تغییر کردند در آن صورت این دستور هرگز اجازه نمی دهد که فایل CSS به روز رسانی شود.
این آپشن به صورت پیش فرض بر روی false تنظیم شده است. |
| ۸ | always_update:
این آپشن هر گاه که فایل های template تغییر کردند فایل CSS را به روز رسانی می نماید. |
| ۹ | always_check:
هر گاه سرور شروع به کار کرد در آن صورت این آپشن به روز رسانی ها را بررسی می نماید.
اگر یک به روز رسانی در فایل template و در SASS وجود داشته باشد در آن صورت فایل CSS به وسیله این آپشن دوباره
نوشته و مجدداً کامپایل می شوند. |
| ۱۰ | poll:
این آپشن از طریق تنظیم polling backend به true از آن برای Sass::Plugin::Compiler#watch که template و به روز
رسانی های فایل CSS را بررسی می کند استفاده می نماید. |
| ۱۱ | full_exception:
این آپشن هر گاه یک اکستنشن در کد در داخل فایل generated CSS رخ دهد یک توضیح خطا را نمایش می دهد.
علاوه بر این وقتی خطایی در منبع فایل CSS رخ دهد این آپشن یک line number را به نمایش می گذارد. |
| ۱۲ | template_location:
این آپشن در برنامه برای دایرکتوری template یک مسیر فراهم می آورد |
در ادامه آموزش استفاده از Sass از جدول دوم می توانید جهت اطلاعات بیشتر استفاده نمایید.
جدول دو
| شماره آپشن | آپشن، ویژگی ها و توضیحات آن |
| ۱۳ | css_location:
این آپشن در برنامه برای stylesheets های CSS یک مسیر فراهم می آورد. |
| ۱۴ | unix_newlines:
هنگام نوشتن فایل ها در خالت تنظیم شده true این آپشن Unix style newlines را فراهم می کند. |
| ۱۵ | filename:
این آپشن نام ابتدای filename است که در ابتدا به نمایش در می آید. علاوه بر آن، این آپشن به گزارش خطاها نیز می
پردازد. |
| ۱۶ | line:
این آپشن خط اول SASS template را مشخص می سازد و علاوه بر آن خطاها را برای line numbers به نمایش می
گذارد. |
| ۱۷ | load_paths:
از این آپشن برای بارگذاری مسیر برای SASS template که شامل استفاده از دستور import@ است؛ استفاده می شود. |
| ۱۸ | filesystem_importer:
از این آپشن برای وارد کردن سیستم فایل که از Sass::Importers::Base sub class برای به کار گیری مسیرهای
بارگذاری رشته ای استفاده می کند؛ استفاده می شود. |
| ۱۹ | sourcemap:
این آپشن نقشه های منبع را که دستورالعمل مرورگر را برای یافتن استایل های SASS تولید می کند؛ ایجاد می نماید.
این آپشن از سه مقدار بهر می برد :- auto:
شامل URI های نسبی است. اگر URI نسبی وجود نداشته باشند، در آن صورت از “file:” URI استفاده می کند. - file:
از فایل “file:” URI استفاده می کند، که به صورت محلی کار می کند، نه در سرور راه دور. - inline:
این مقدار شامل متن منبع در نقشه منبع است که برای ایجاد فایل های منبع بزرگ منبع استفاده می شود.
|
| ۲۰ | line_numbers:این آپشن از طریق تنظیم line number بر روی true خطاهای موجود برای آن را در فایل CSS نمایش می دهد. |
| ۲۱ | trace_selectors:
این آپشن کمک می کند که زمانی که سنجشگرهای imports و mixins بر روی حالت true تنظیم شده اند آن ها را
ترسیم نماییم. |
| ۲۲ | debug_info:
این آپشن debug information های فایل SASS را برای استفاده line number در هنگام تنظیم آن بر روی true فراهم
می کند. |
| ۲۳ | custom:
این آپشن داده ها را برای تابع SASS در برنامه های جداگانه ایجاد می نماید. |
| ۲۴ | quiet:
این آپشن با تنظیم هشدار ها بر روی true آن ها را غیر فعال می نماید. |
در ادامه آموزش استفاده از Sass دو مبحث سینتکس Selection و کدگذاری را بررسی می نماییم.
سینتکس Selection
می توانید با استفاده از ابزار خط فرمان SASS سینتکسی که در قالب SASS استفاده می کنید را تعیین کنید.
به طور پیش فرض، SASS از سینتکس indented استفاده می کند که جایگزین سینتکس CSS مبتنی بر CSS است.
می توانید از برنامه خط فرمان SCSS، که شبیه برنامه SASS است، استفاده کنید.
اما به طور پیش فرض، سینتکس SCSS بررسی خواهد شد.
کد گذاری
SASS از کد گذاری کاراکترهای stylesheets به وسیله مشخص سازی مشخصات CSS استفاده می کند.
در ادامه به بررسی این مشخصات می پردازیم.
- در این مشخص سازی ابتدا بایت Unicode بررسی می شود و سپس اعلام charset@ و بعد از آن کدگذاری رشته روبی Ruby.
- در این مرحله اگر چیزی تنظیم نشود در آن صورت کد گذاری charset به عنوان UTF-8 در نظر گرفته می شود.
- در این مرحله باید با استفاده از اعلام charset@ کد گذاری کاراکتر ار مشخص کنید.
فقط توجه داشته باشید که در ابتدای stylesheet استالشیت از “charset encoding name@” استفاده نمایید؛ با این کار SASS این طور در نظر می گیرد که آنچه که دریافت کرده است کد گذاری کاراکتر است. - اگر فایل خروجی SASS شامل کاراکتر های غیر ASCII باشد، در آن صورت از اعلام charset@ استفاده خواهد کرد.
کلام آخر
در این جلسه، یعنی چهارمین جلسه از دوره آموزش Sass در پی وی لرن به آموزش استفاده از Sass پرداختیم و به شما آموختیم که چگونه از این پیش پردازنده قدرتمند استفاده نمایید.
در آموزش استفاده از Sass با نحوه ذخیره سازی یا caching در Sass آشنا شدید و در حدود بیست و چند آپشن کاربردی که در موقعیت های مختلف می توانید از آن ها در Sass بهره ببرید به با توضیحات مفصل به شما معرفی گردید.
در جلسه بعدی سعی می کنیم به آموزش اکستتنشن های این پیش پردازنده بپردازیم و تعدادی از کاربردی ترین اکستنشن های Sass را به علاقمندان این دوره معرفی معرفی می نماییم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
