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

- visibility ٠ mode_comment

به نام خدا

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

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() قرار دهد.

info نکته :

حتما هنگام استفاده از این 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" هست که دوست خوبمون آقای اسفندیاری در حال تدریس این زبان هست. این از پیش پردازنده ها برای سهولت استایل نویسی به وجود آمدند تا بتونیم طعم شیرین تری از استایل نویسی رو تجربه کنیم.

موفق باشید.

comment دیدگاه کاربران
سهیل

آموزش بسیار عالی و فوق العاده مفیدی بود ممنون از سایت خوبتون

حسین حسنی

سلام برداشت من اینه که فقط برای افزایش سرعت در کدنویسی استفاده از sass میتونه مفید واقع بشه که تازه اونم بعد از تبدیل به css افزایش حجم داره نسبت به اینکه از اولش کدها رو خودمون به صورت css بنویسیم.
درسته؟ ❗

سلام
تنها برای افزایش سرعت نیست بلکه میتونید با SASS مدیریت بهتری روی کدها داشته باشید و همچنین از ماژول ها و کدهایی که قبلا نوشتید به راحتی دوباره استفاده کنید. و اگه اهل برنامه نویسی باشید میتونید توابع و میکیسین های کاربردی زیادی برای خودتون بنویسید و در همه ی پروژه ها از اونها استفاده کنید.

موفق باشید.

رضا

سلام و احترام
از آموزش هاتون ممنون ! اما نگاهی به خودتون و تمام سایت های آموزشی دیگه بندازید و ببینید که این شما هستید که بازار کار طراحی وب ایران رو مفت و به قیمت ناچیز نابود کردید. زمانی داشتن علم طراحی وب ارزش داشت و هرکسی از پسش برنمیومد و حتی یک سایت ساده با قیمت 1.5 میلیون تومن فروش می رفت اما حالا اتفاقی که افتاده اینه که سایتی مثل دیجیکالا رو با قیمت 250 هزار تومن میفروشن و فکر میکنید دلیلش چیه که بازار کار ایران رو به نابودیه ؟ آیا دلیلش این نیست که در عرض 1 ماه هر وبسایت آموزشی پول کلانی از دانشجوها میگیره و به اونا آموزش میده و همه اونها بعد از آموزش به کار رجوع میارن و با کمترین قیمت ها میخوان خودشون رو محک بزنن و از این طریق بازار رو نابود میکنن !
و واقعا خودتون بگید اگه طراحی وب توی ایران در حال حاضر درامد مناسب برای چرخوندن یک زندگی رو داشت آیا شما به دوره گذاشتن و پول دراوردن از این طریق مراجعه می کردید ؟ واقعا چند صد دولوپر رو به شما نشون بدم که تا چند سال پیش زندگی خونوادگیشون رو با وب می چرخوندن اما الان متاسفانه اگه ماهی 1 تومن هم در بیارن هنر کردن !!
واقعا چرا همه سایت هایی که زمانی تصمیم داشتن فروشگاه قالب راه بندازن و یا کارهاشون رو تبلیغ کنن ، الان به یک باره همگی در حال گذاشتن دوره های اموزشی کردن و هر سایت حدقل داره ماهانه چندصد دانشجو رو وارد حوزه طراحی وب میکنه و این یعنی نابود شدن این حوزه ! این یعنی دانشجوها فکر میکنن با طراحی وب میلیاردر خواهند شد و وقتی دوره رو دیدن و میخوان وارد بازار کار بشن ، تازه متوجه میشن صدها نفر مثل خودشون وجود داره و بهترین پروژه ها با کمترین قیمت به فروش میرسن !
امیدوارم واقع بین باشید…اینکه ما میخوایم علممون رو منتقل کنیم و صواب ببریم و این شعارها زیاد میدن و در کنار این شعارها پول کلانی هم به جیب میزنن. و در حال حاضر انقدر بازار ایران خراب شده که وب نویس ها مجبور شدن مهارتشون رو برای خارجی ها بزارن و از اون طریق کسب درامد کنن ! واقع بین باشید…این شما و امثال شما و استادهای دانشگاه بودید که میلیون ها تومن پول گرفتن و بعد از آموزش دانشجوهارو رها کردن گفتن حالا خودتون برید وارد بازار کار بشید…در حالیکه بازار کاری در کار نبود…
موفق باشید

سلام دوست عزیز اینطور که شما می فرمایید منظورتون اینه که یک حرفه تنها در انحصار یک عده باشه که فقط اونها درآمد بالا داشته باشن و بتونن زندگی کنن و بقیه بیکار و بی سواد در رشته مورد نظرشون بمونن (مثل قدیم ها که درس خواندن حق اشرافزادگان بود و طبقات متوسط و ضعیف حق درس خواندن نداشتن چون اگر دانششون بالا می رفتم اشراف فکر می کردند که دیگه نموتونن به زیرر دستات و ضعیفان حکم کنند )این در یک کلام یعنی ایجاد دیکتاتوریسم و انحصار منابع موجود در اختیار یک عده… دیکتاتوریسم واژش این نیست که فقط به یک ملت ظلم بشه بلکه در هر زمینه می تونه بوجود بیاد…در ضمن ادم هایی که به خودشون اعتقاد ندارن و دوست ندارن وارد بازار رقابت بشن اینگونه صحبت می کنن که چرا یک چیزی اینقدر عمومی میشه و به عبارتی دست زیاد میشه و اونها دیگه نمی تونن نرخ کارشون رو به دلخواه تعیین کنن و دستمزد های پرت و بالا بدن چرا که مدعی هستند کارشون تک هست و به عبارتی کار هر کسی نیست بجای اینگونه انتقادها و نطرات مونوپولیسمی وانحصار طلبی بهتر سعی کنیم با دیگران رقابت کنیم و محصول باکیفیت تری تولید کنیم اما با قیمت پایین تر اما فروش بالاتر در حالی که ما از روی طمع می خوایم یک محصول رو چون کم و انحصاری هست رو چند صد برابر بفروشیم و یک شبه ره صد ساله بریم پس بهتره بجای این گونه فکر کردن انحصار طلبی دانش خودمون رو بیشتر کیفیت کارمون رو بالاتر ببریم مطمُن باشید اگر محصول با کیفیت ارایه بدید مشتری حتما سراغتون خواهد اومد یک مقدار بهتره تلاشمون رو بیشتر کنیم و کارمون رو بهتر…
موفق باشید

نیاز به لاگین

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