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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آشنایی با فریم ورک compass

7 6978 ۸ شهریور ۹۳

سلام. در این مطلب میخوام شما رو با compass آشنا کنم.

Compass چیست

compass یک css authoring framework منبع باز هست که از sass استفاده میکنه. و اما css authoring framework چی هست و چه تفاوتی با css framework داره؟ این سوال رو با یه مثال ساده جواب میدم.

برای مثال بوتسترپ یک css framework هست چون شامل یک سری استایل های از پیش تعریف شده برای کامپوننت های مختلفی مثل tabها، buttonها، menuها و ... هست و خلاصه اینکه شما رو یجورایی به استفاده از این استایل ها محدود میکنه؛ ولی css authoring framework شامل هیچ گونه استایلی نیست و در عوض مجموعه ای از توابع و کلاس های کمکی هست که باعث میشه استایل های مدنظرتون رو خیلی سریعتر بنویسید.

به عنوان مثال توابعی برای نوشتن کدهای css3 داره که دیگه نیازی نیست وقتی از خصوصیت های css3 استفاده میکنید، پیشوندهای مخصوص مرورگرها رو هم بنویسید. همچنین میتونید یه فریم ورک css با استفاده از css authoring framework برای خودتون بنویسید.

ضمنا میتونید از compass برای کامپایل فایل های sass یا scss استفاده کنید.

نصب Compass

Compass روی هر سیستمی که ruby نصب شده باشه اجرا میشه. برای نصب ruby روی ویندوز میتونید از rubyinstaller استفاده کنید که قبلا در قسمت اول سری sass آموزش نصبش رو داشتیم. برای نصب compass هم کافیه خط زیر رو در خط فرمان بنویسید و اینتر بزنید:

با این خط هم sass و هم compass همزمان نصب میشن. compass-1

ایجاد یک پروژه ی Compass

برای استفاده از compass در یک پروژه ی جدید کافیه خط فرمان رو باز کنید و در مسیر مد نظرتون خط زیر رو نوشته و اینتر بزنید:

به جای new-project میتونید هر اسمی که دوست دارید بنویسید. من میخواستم پروژه ای به اسم new-project در درایو D و در پوشه 7learn\14-compass ایجاد کنم پس در خط فرمان اینطوری نوشتم: compass-2 پروژه new-project در صورتی که قبلا ساخته نشده باشه ایجاد میشه و ساختارش به این صورت هست: compass-3 فایل config.rb مخصوص تنظیمات پیکربندی compass هست و میتونید با استفاده از این فایل مثلا مسیر فایل های sass، css، تصاویر، جاوااسکریپت رو مشخص کنید، سبک خروجی فایل css رو تغییر بدید و تنظیماتی از این قبیل.

کامپایل فایل های sass با Compass

برای کامپایل فایل های sass باید با استفاده از خط فرمان به پوشه ی پروژه برید و دستور زیر رو بنویسید و اینتر بزنید:

این دستور، فایل های sass رو زیر نظر میگیره و به محض اینکه تغییری در اونها داده بشه فایل رو کامپایل میکنه. با کلید ctrl+c هم میتونید کامپایل رو متوقف کنید. compass-4 البته دستورات دیگه ای به جز compass watch و compass create برای خط فرمان وجود داره که برای آشنایی با این دستورات میتونید اینجا رو بخونید.

استفاده از Compass

برای اینکه از compass در کدهای sass استفاده کنید کافیه خط زیر رو به اول فایل .scss مد نظرتون اضافه کنید:

modulename اسم ماژولی هست که میخواید از توابع و میکسین هاش استفاده کنید. مثلا اگر میخواید کدهای css reset رو داخل کدهاتون داشته باشید کافیه خط زیر رو به فایل .scss اضافه کنید:

اگر به صفحه code reference سایت compass برید، خواهید دید که این فریم ورک به چند دسته تقسیم شده:

  • CSS3
  • Helpers
  • Layout
  • Reset
  • Typography
  • Utilities

میتونید به هرکدوم از این بخش ها برید و ببینید چه کارهایی میتونید انجام بدید. مثلا وقتی میخواید یه باکسی درست کنید که گوشه های گردی داره مجبورید چنین کدی بنویسید:

همین کد رو به راحتی و با استفاده از میکسین border-radius در compass میتونید بنویسید فقط قبلش حواستون باشه ماژول css3 رو ایمپورت کنید:

یا مثلا اگر میخواید از box-shadow هم استفاده کنید (با دو shadow برای باکس) میتونید کد بالا رو به این شکل بنویسید:

نتیجه ی کامپایل کد بالا:

یکی از قابلیت های فوق العاده ی compass که من شدیدا ازش خوشم میاد css spriting هست. قبلا آقای دریس راجع به این تکنیک مطلبی منتشر کردن، اگر نمیدونین چی هست ابتدا این صفحه رو مطالعه کنید.

اول یه پوشه به اسم images داخل پروژتون (در این آموزش داخل پوشه new-project) ایجاد کنید و داخل پوشه images باز هم یه پوشه درست کنید به اسم icons و آیکون هاتون رو داخل این پوشه قرار بدید. برای این آموزش فرض کنید 4 آیکون به نام های chart.png ، phone.png ، user.png و weather.png با سایز 52px در 52px داریم.

حالا یه فایل .scss (مثلا style.scss) داخل پوشه sass بسازید و کدهای زیر رو بنویسید:

در خط 1،  ماژول sprites رو ایمپورت کردیم.

در خط 2، همه ی تصاویر با فرمت png که داخل پوشه icons هستند رو ایمپورت کردیم.

شاید فکر کنید که برای ایمپورت کردن تصاویر باید اسم پوشه تصاویر (در اینجا images) رو هم بنویسید ولی اشتباه میکنید! از اونجایی که در فایل config.rb مشخص شده که تصاویر در پوشه images قرار دارند، هنگام ایمپورت کردن تصاویر نیازی به نوشتن اسم پوشه images نیست.

دستور خط 3 هم تصویری ایجاد میکنه که همه ی آیکون ها داخل این تصویر هست و ضمنا یک سری کلاس هم تولید میکنه. اگر محتوای فایل style.css رو ببینید کدهایی شبیه تصویر زیر رو میبینید: compass-5 برای استفاده از این کلاس ها، ابتدا یک فایل html (مثلا index.html) داخل پوشه new-project ایجاد کنید و کدهای زیر رو بنویسید:

نتیجه کدهای html بالا، در مرورگر به این صورت هست: compass-6 چون برای آیکون ها سایز مشخص نکردیم به مشکل برخوردیم. برای حل این مشکل فایل style.scss رو باز کنید و کدهای زیر رو آخر فایل اضافه کنید:

خوبه! درست شد... خط اول این کد مقدار width آیکون user.png رو گرفتیم و داخل متغیر $width ذخیره کردیم. خط دوم هم مقدار height آیکون user.png رو گرفتیم و داخل متغیر $height ذخیره کردیم. از اونجایی که سایز همه آیکون ها با هم برابر بودند پس فرقی نمیکنه اسم کدوم تصویر رو بنویسیم. compass-7 یه نکته مهمی که درباره کدهای فایل style.scss باید بگم اینه که هرچی اسم icons در این فایل میبینید درواقع به پوشه icons که داخل پوشه images بود اشاره میکنه. اگر اسم پوشه icons چیز دیگه ای بود، مثلا my-icons، اونوقت همه ی این کلمات icons که در فایل style.scss نوشته شده باید به my-icons تبدیل میشد.

خب دوستان خسته نباشید! آموزش تموم شد :)

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

دیدگاه ها 7 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    علی امینی(۸ شهریور ۱۳۹۳)

    سلام؛ خسته نباشید.
    واقعا مفید بود.
    تشکر

  • ‏‏

    تشکر خانوم کلانتری بابت آموزشهای تکتون.

  • ‏‏

    سلام ممنون
    یه سوال؛ امکانش هست آموزش طراحی و پیاده سازی درگاه های پرداخت آنلاین رو قرار بدید؟
    ممنون

  • ‏‏
    habib azar(۱۳ مهر ۱۳۹۳)

    تشکر خانم مهشاد کلانتری . خیلی خیلی مفید بود انسالله موفق باشی 😆

  • ‏‏
    arash habib(۱۷ مهر ۱۳۹۳)

    تشکر خانم مهشاد کلانتری . : انسالله موفق باشی 😛

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram