کدهای پایه SASS و شروع با Compass

در این مطلب قصد دارم کد‌های پایه را برای شروع کار بگم اما قبل از آن می‌خوام یکی از فریم‌ورک‌هایی که بر پایه SASS ساخته شده به نام Compass را نصب کنید. یکی از ویژگی‌های منحصربفرد sass فریم‌ورکای زیادی که براش وجود داره. و کامپس اولین فریم‌ورکی که توسط Chris Eppstein از نویسندگان هسته sass برایش نوشته شده.

Compass با تمرکز بر قدرت‌مندتر ساختن و راحت‌تر کردن SASS ساخته شده که Mixin و توابع مختلفی را در رابطه با CSS3 ،Typography ،Utilities ،Layout ،Reset ارایه کرده است.

نصب کامپس

برای نصب کامپس هم همانند sass ابتدا باید رابی را نصب کرده باشید(پیشنهاد می‌کنم ‘از SASS نترسید!‘ را قبل از نصب بخوانید).

ترمینال را باز کنید و کد زیر را وارد کنید:

gem install compass

نصب شد؟

ساخت اولین پروژه

با استفاده از کامپس می‌خوایم فولدر پروژه را با تنظیمات پیش‌فرض بسازیم، دستور زیر را در ترمینال وارد کنید:

compass create first-project

به جای ‘first-project’ نام فولدر پروژتون را بنویسید و اجرا کنید… چنین پیغامی را نمایش می‌دهد و تمامی فولدر‌ها و فایل‌های اولیه برای شروع پروژه را می‌سازد:

directory first-project/ 
directory first-project/sass/ 
directory first-project/stylesheets/ 
create first-project/config.rb 
create first-project/sass/screen.scss 
create first-project/sass/print.scss 
create first-project/sass/ie.scss 
create first-project/stylesheets/ie.css 
create first-project/stylesheets/print.css 
create first-project/stylesheets/screen.css

از این به بعد به جای فرمانی که در مطلب قبل خواندیم(+) از خط فرمان زیر برای کامپایل کردن فایل‌های sass استفاده می‌کنیم:

compass watch

این دستور را وارد کنید تا هربار فایل .scss را تغییر می‌دهید(به عنوان مثال: screen.scss)، اتوماتیک کامپایل و فایل .css را بروز کند(به عنوان مثال: screen.css).

کد‌های پایه

Variables

از متغیر‌ها برای ذخیره‌سازی داده‌ها استفاده می‌شود، داده‌هایی مانند رنگ، نام فونت اندازه‌ها و تمامی مقادیر cssیی که فکر می‌کنید ممکن است در پروژه چندبار استفاده شود. برای تعریف متغیر، sass از علامت $ قبل از نام متغیر استفاده می‌کند:

$font-stack:    Helvetica, sans-serif;
$font-code:     Arial, sans-serif;
$primary-color: #333;
$secondary-color: khaki;
body {
font: 100% $font-stack;
color: $primary-color;
}
code {
font: 100% $font-code;
background: $primary-color;
color: $secondary-color;
}

کامپایل می‌شود به:

body {
font: 100% Helvetica, sans-serif;
color: #333333;
}
code {
font: 100% Arial, sans-serif;
background: #333333;
color: khaki;
}

Nesting

وقتی کد html را می‌نویسیم خیلی به تودرتو بودن کد‌ها اهمیت میدیم و آن را با دقت رعایت می‌کنیم اما در css چنین چیزی وجود ندارد و مجبور میشیم کدهای تکراری را پشت سر هم بنویسیم. اما با sass قضیه فرق می‌کند:

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li { 
display: inline-block; 
a {
display: block;
padding: 6px 12px;
text-decoration: none;
color: #990;
&:hover {
color: #aa0;
}
}
}
}
}

کامپایل می‌شود به:

nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 6px 12px;
text-decoration: none;
color: #990;
}
nav ul li a:hover {
color: #aa0;
}

در واقع ما selectorهای ul, li, a را داخل بلاک nav نوشتیم. این کار باعث خوانایی بیشتر کد ما می‌شود(البته اگر شورش را در نیاریم!) و از دوباره کاری نوشتن نام تکراری selector‌ها جلوگیری می‌کند.

Import

با استفاده از این دستور می‌توانید کد یک فایل دیگر را به فایل خودتون اضافه کنید(چه از نوع css، چه از نوع sass). اما دو تا نکته اینکه میتونید چنتا فایل را فقط با استفاده از یک دستور import بنویسید:

@import "reset.scss", "grid.scss", "mixins.scss";

و نکته دوم هم اگر فایلی که میخواهید import کنید با فرمت scss یا sass (فرمت دیگری از کد‌های sass وجود دارد به نام: Sass Indented Syntax) باشد نیازی به نوشتن فرمت نیست و sass هوشمندانه فایل‌های scss و sass را پیدا می‌کند.

@import "reset", "grid", "mixins";

یکم با این کد‌ها کار کنید تا کم کم در مورد توانایی‌های خاص این موجود عزیز نیز صحبت کنیم.

اگر مشتاقید مطالب زیر را پیشنهاد می‌کنم:

پرهام سال‌هاست در مورد تجربه‌ی کاربری تحقیق می‌کند و همیشه به دنبال راهی عملی برای استفاده از تجربه‌کاربری در طراحی محصولات بوده. او در حال حاضر مدیر ارشد محصول در شرکت صبا‌ایده(آپارات، فیلیمو، صباویژن) است.

1 دیدگاه برای «کدهای پایه SASS و شروع با Compass»

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *