آشنایی با فایل config.rb و Helperهای کاربردی در فریمورک Compass

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۲۰ آبان ۱۳۹۳

به نام خدا

با سلام خدمت شما دوستان سون‌لرنی.

75_compass

در این مطلب میخواهیم به معرفی فایل config.rb و چند Helper کاربردی در Compass بپردازیم. خانم کلانتری پست بسیار مفیدی در مورد شروع کار با compass منتشر کردند که اگر اون پست رو نخوندید، پیشنهاد میکنم ابتدا اون رو مطالعه کنید.

فهرست محتوای این مقاله

فایل config.rb

همونطور که میدونید وقتی یک پروژه ایجاد میکنید، داخل پروژه یک فایل با نام config.rb ایجاد میشه که همونطور که از نام فایل هم معلوم هست، پروژه ی مارو پیکره بندی میکنه که ما حتما باید قبل از شروع پروژه این فایل رو در صورت لزوم اصلاح کنیم.

این فایل با زبان روبی نوشته شده و معمولا به صورت زیر هست:

http_path = "/"
css_dir = "/"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"

# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

در خط اول محل قرار گیری پروژه هست که نیازی به تغییر نداره. css_dir محل کامپایل شدن فایل‌های css مارو مشخص میکنه و sass_dir محل قرار گیری فایل‌های sass یا scss و images_dir محل قرار گیری تصاویر و javascripts_dir محل قرار گیری فایل‌های جاوااسکریپت و fonts_dir هم محل قرار گیری یا پوشه ی اصلی فونت هارو مشخص میکنه.

اگر بخواهیم به صورت حرفه ای از compass استفاده کنیم توابعی هست که به اطلاعات این متغیر‌ها نیازمند هستند، پس باید مقدار این متغیر هارو به صورت صحیح وارد کنیم.

متغیر output_style هم نحوه ی خروجی کدهای css رو تعیین میکنه که چهار مقدار :expanded ، :nested ، :compactو :compressed رو میگیره.

یک متغیر دیگر هم به نام line_coments هست که در فایل CSS اطلاعاتی از جمله شماره خط و فایل SCSS یا SASS رو معلوم میکنه و مقدار true یا false میگیره.

این فایل میتونه شامل اطلاعات دیگری هم باشه، مثلا میتونید برای استفاده از فریمورک هایی که برای compass نوشته شدند، ابتدا آنهارا توسط cmd دانلود کرده و سپس در این فایل توسط دستور require اون رو به پروژه وصل کرده و سپس در فایل sass خود، اون رو import کنید.

اگر برای کامپایل کردن فایل‌های خود از نرم افزار prepros استفاده میکنید، در سایدبار سمت راست نرم‌افزار، گزینه ی Use Compass و full compass support رو فعال کنید.

prepros

 Compass Helpers

یکی از ویژگی‌های قدرتمند و مفید این فریمورک، Helper ها هستند. این Helper‌ها مجموعه ای از توابع هستند که بر اساس زبان sass نوشته شده اند. در این مطلب میخواهیم به دو Helper کاربردی که عبارتند از image-url و font-face بپردازیم.

اضافه کردن تصویر

اجازه دهید با یک مثال این helper را توضیح دهیم. در CSS هنگام اضافه کردن تصویر(بکگراند) به عناصر، از تابع url() استفاده میکردیم، به این صورت که باید مکان(آدرس) تصویر را بر اساس فایل کنونی CSS قرار میدادیم، ولی با استفاده از helper image-url() ، تنها کافی است مکان فایل را از پوشه ی تصاویر مشخص کنیم.

فرض کنید پروژه ی ما به صورت زیر است و ما یک فایل با نام img.png در پوشه ی img داریم و میخواهیم آنرا به استایل متصل کنیم.

project

CSS:

div {  
    background-image: url('/img/img.png');  
}

و حالا این کد با SCSS:

div {  
    background-image: image-url('img.png');  
}

, و کامپایل شده ی این کد به صورت زیر میباشد:

div {  
    background-image: url('/img/img.png?1402075744');  
}

همونطور که دیدید با استفاده از این helper، تنها کافی است نام فایل یا مکان فایل را از پوشه ی اصلی تصاویر که آنرا در فایل config.rb مشخص کردیم، قرار دهیم. اگر فایل وجود نداشته باشد، هنگام کامپایل کردن با  ارور مواجه خواهید شد.

چند تابع دیگر هم هست که کارش مانند این helper میباشد و شما میتونید در مکان مناسب از آنها استفاده کنید.

  • stylesheet-url : میتوانید در پارامتر این تابع نام فایل CSS را وارد کنید تا در خروجی آدرس آن فایل را در تابع url() قرار دهد.
  • font-url : میتوانید در پارامتر این تابع نام فونت مورد نظر را بنویسید تا در خروجی آدرس آن فایل را در تابع url() قرار دهد.
نکته :

حتما هنگام استفاده از این helper آدرس فایل را درون کوتیشن یا دابل کوتیشن قرار دهید.

اضافه کردن فایل های @Font-Face

اضافه کردن آدرس فایل‌های فونت با استفاده از درستور @font-face در CSS همیشه از کارهایی بوده که شخصا با کپی و پیست کردن انجام میدادم؛ Compass یک helper کاملا کاربردی برای راحتی کدنویس‌هایی چون من ایجاد کرده که میتونیم از این پس از اون استفاده کنیم. مثلا برای فراخوانی یک فونت در css باید کد زیر رو مینوشتیم:

@font-face {  
  font-family: "MyFont";  
  src:  url('/fonts/font.ttf') format('truetype'),  
        url('/fonts/font.otf') format('opentype'),  
        url('/fonts/font.woff') format('woff'),  
        url('/fonts/font.eot') format('embedded-opentype');  
}

ولی حالا با استفاده از font-files helper ، کافیست ابتدا میکسین font-face را ایمپورت کنیم و سپس از این helper استفاده کنیم.

SCSS:

// import the @font-face mixin
@import "compass/css3/font-face"; // or @import "compass/css3"

// syntax of font-face mixin:
// -> @include font-face($font-name, $font-files, $eot, $weight, $style)
// an example:
@include font-face("my font", font-files('myfont.woff', 'myfont.ttf', 'myfont.svg'), 'myfont.eot', normal, normal);

همونطور که در کد بالا دیدید، در پارامتر اول میکسین نام فونت و سپس با استفاده از font-files helper ، مکان فایل هارا در پوشه ی مربوط به فونت‌ها مشخص کردیم، در پارامتر سوم مکان نسخه ی eot فونت را مشخص کردیم و سپس در دوپارامتر بعدی به ترتیب font-weight و font-style را تعیین کردیم. کامپایل شده ی کد بالا:

@font-face {
  font-family: "my font";
  src: url('/fonts/myfont.eot?1402075744');
  src: url('/fonts/myfont.eot?&1402075744#iefix') format('embedded-opentype'), url('/fonts/myfont.woff?1402075798') format('woff'), url('/fonts/myfont.ttf?1402075902') format('truetype'), url('/fonts/myfont.svg?1402076003') format('svg');
  font-weight: normal;
  font-style: normal;
}

سخن آخر

همانطور که دیدید sass یکی از قدرتمند‌ترین CSS Preprocessor هاست، البته نه تنها CSS Preprocessor! یکی از CSS Preprocessor‌ها یا از پیش پردازنده‌های زبان سی‌اس‌اس "Stylus" هست که دوست خوبمون آقای اسفندیاری در حال تدریس این زبان هست. این از پیش پردازنده‌ها برای سهولت استایل نویسی به وجود آمدند تا بتونیم طعم شیرین‌تری از استایل نویسی رو تجربه کنیم.

موفق باشید.

چه امتیازی به این مقاله می دید؟
نویسنده علی امینی
یک وب دیزاینر هستم که میشه گفت بر زبان های HTML, CSS, JavaScript مسلطم و همیشه با کتابخانه jQuery کار میکنم. از میان زبان های سمت سرور PHP رو میپسندم و CMS مورد علاقه من WordPress هست. هیچ IDE نمیتونه جای SublimeText رو برام بگیره و همیشه خودمو به روز نگه میدارم و به کدنویسی عشق می ورزم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.