فریمورک کمپس compass و کمپوننت هایش برای پیش پردازنده ساس
چگونه فریمورک کمپس به ساده شدن ساس کمک میکند؟ در ادامه مقاله قبل میخواهیم در این مقاله توضیح دهیم که میتوان ساس را با وجود سادگی اش، ساده تر هم نوشت. مثلا از کمپوننت های آماده برای ساس استفاده کرد. کدهای نهایی این مقاله را از اینجا دانلود کنید!
گام 1: ایجاد config.rb و استفاده از کامند compass watch
همانطور که scss را نصب کردیم compass را نصب میکنیم.
gem install compassاز ادامه کدهای مقاله قبل که شامل html و scss بود آغاز میکنیم.
- در فایل style.scss ابتدا فریمورک کمپس را ایمپورت میکنیم.
- برای دیفالت شدن استایل دهی های پیش فرض از compass/reset بهره میبریم. (کد های زیر)
@import 'compass'
@import 'compass/reset'با وجود این reset دیگر تفاوتی بین سایز فونت های هدینگ یک و دو نیست. یا مثلا تگ های li که داخل ul قرار میگیرند قبلشان آن نقطه های توپر وجود ندارد. همچنین تگ های a هم آندرلاین ندارند. همه چیز ریست شده است. جالب نیست؟ (در ویدیو کامل توضیح دادیم.)
گام 2: تبدیل کدهای قابل جایگزین ساس با کدهای فریمورک کمپس
در برگه modules/_menu.scss از flexbox استفاده کردیم. حالا کمپوننت معادل آن در کمپس را جایگزینش میکنیم و خواهیم دید همان ظاهر در بروزر حفظ میشود.
@include display-flex;
@include justify-content(space-between);همچنین برای المنت menu__item از این کمپوننت استفاده میکنیم:
@include flex(1);گام 3: استفاده از کمپوننت های فریمورک کمپس
در این گام چند کمپوننت از فریمورک کمپس را می آوریم و اینجا قرار میدهیم. مثلا box-shadow و text- shadow
@include text-shadow($green 1px 1px 0);
@include box-shadow( $green 2px 2px 10px);گام بعدی: فریمورک کمپس به همراه بوتسترپ
در مقاله بعدی میخواهیم پیش پردازنده ساس را همراه فریمورک کمپس و فریمورک سوزی استفاده کنیم. این ترکیب جذاب را به دنیای برنامه نویسان حرفه ای نزدیک میکند.
این داستان به این ترکیب جذاب ختم نمیشود. اگر فکر میکنید با یاد گرفتن بوتسترپ و ساس و کمپس دیگر چیزی برای یادگیری نیست اشتباه میکنید! فریمورک سوزی و لایبرری breakpoint در انتظار شما هستند تا با شما دیدار و گفتگویی داشته باشند. برای اطلاعات بیشتر دوره های لیندا را تماشا کنید!
دانلود دوره آموزشی Responsive CSS with Sass and Compassرمز فایل زیپ: www.p30download.com
دانلود دوره آموزشی Sass Essential Trainingرمز فایل زیپ: www.download.ir