illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 3554 ۲۰ آبان ۹۳

به نام خدا

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

75_compass

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

فایل config.rb


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

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

در خط اول محل قرار گیری پروژه هست که نیازی به تغییر نداره. 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:

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

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

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

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

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

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

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


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

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

SCSS:

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

سخن آخر


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

موفق باشید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram