menu

ابزار های توسعه دهنده ی مدرن وب

Sass و Compass

سه شنبه 23 شهریور 1395

در فصل های قبل، موقعی که داشتیم با bootstrap یا foundation کار میکردیم، همینطور وقتی داشتیم با Yeoman کار میکردیم، به Sass برخوردیم و قرار شد که بعدا درباره اش حرف بزنم.

اما Sass چیست؟

بعد از یه مدت که شما با CSS کار کردید، متوجه میشید که CSS واقعا برای نوشتن کدها به صورت Modular یا استفاده از کدهای تکراری مناسب نیست. اینجاست که یه سری از پیش پردازنده های CSS مثل Sass وارد میدان میشه

من قبلا توی دست نوشته هام، به طور مفصل درباره ی Sass توضیح دادم. اینجا

اما نمیشه که کتابی از "ابزارهای توسعه دهنده ی مدرن وب" بنویسی، ولی حرفی از Sass نزنی.

پس من فقط شما را ارجاع میدم که به اینجا مراجعه کنید و ادامه ی مطالب درباره ی Sass را اینجا بخونید

بعد از این که درباره ی Sass در بالا خوندید، نوبت میرسه به Compass

Compass یه فریم ورک هست که بر اساس Sass نوشته شده و واقعا کار با کدهایی مثل CSS3 و Typography ها را خیلی خیلی ساده تر میکنه

مثل Sass، ما باید این فریم ورک را نیز اول نصب کنیم

پس برای نصب اون از طریق Gem اقدام میکنیم

gem install compass

و بعد از اینکه نصب تموم شد، برای اطمینان از نصب، ورژن Compass را چک میکنم

compass -v

الان موقع بررسی Compass هست. از اونجایی که Compass براساس Sass نوشته شده، ما میتونیم توش از کدهای Sass استفاده کنیم و بقیه ی کدها هم خیلی شبیه به Sass هست. یعنی ما همون کدهای مربوط به متغیر ها، import کردن، تابع ها، extend کردن و nesting کردن را داریم

بیاید واسه ی شروع، از یکی از امکانات compass شروع کنیم

(بد نیست برای دیدن یه لیست از کدهای مربوط به compass به اینجا سری بزنید)

یه فایل میسازیم به اسم style.scss و کدهامون را توش میزنیم

یکی از امکانات مهم compass، یه امکانی هست به اسم reset. در واقع این همون کد browser reset ما هست.

برای استفاده از این امکان، کافیه توی فایل css خودمون کد زیر را بزنیم

@import "compass/reset";

و فایل css مون را compile کنیم. ولی برای compile دست نگه دارید! یه آپشن جدید توی کد کامپایل Sass مون داریم

sass --compass style.scss:style.css

در این حالت، با دادن آپشن compass به sass میگیم که با استفاده از فریم ورک compass فایل ما را کامپایل کنه، و نتیجه اش این میشه

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

بریم سراغ یکی دیگه از کتابخونه های compass. یکی از کتابخونه هایی که من خیلی دوستش دارم،css3 هست. در واقع من همیشه خیلی زجر میکشم وقتی مجبور میشم برای کدهای css3 خودم، چهار تا کد برای webkit و moz و o و ms بنویسم و این روند برای من واقعا کسل کننده اس. ولی با compass همه چی ساده است! کافیه کد

@import "compass/css3";

را بزنیم و از امکانات css3 لذت ببریم!

مثلا با زدن کد

.box{
	@include border-radius(10px);
}

توی فایل scss خودمون و کامپایل کردنش خواهیم داشت

.box {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; }

واقعا چقدر راحت و لذت بخش!

بیاید یکی دیگه از css3 ها را هم بزنیم

همونطور که توی این مثال هست، برای داشتن یه box shadow خوشگل کافیه بزنیم

#box-shadow-custom {
  @include box-shadow(red 2px 2px 10px);
}

و نتیجه اش بعد از کامپایل میشه

#box-shadow-custom {
  -moz-box-shadow: red 2px 2px 10px;
  -webkit-box-shadow: red 2px 2px 10px;
  box-shadow: red 2px 2px 10px; }

نمیدونم توجه کرده اید یا نه. اما توی کد بالا ما moz و webkit را داریم، ولی ms و o را نداریم. چرا؟ خب compass اونقدر باهوش هست که بتونه تشخیص بده برای box shadow، فقط moz و webkit نیازه و نیازی به o و ms نیست. (من که خودم هر وقت css3 میزنم، همیشه 5تا کد را با هم میزارم و زیاد توجه نمیکنم که کدوماش نیاز هست واقعا و کدوماش نیاز نیست، اما compass باهوش تر از منه!)

خب، معرفی کلی compass هم به پایان رسید

میدونم، درسته زیاد عمیق (اونجوری که شایسته ی compass هست) وارد مطالب مربوط به compass نشدم، ولی قرار هم نبود بشم! و من فقط به شما یه دید کلی از کاری که compass میکنه و امکانات اون دادم، و استفاده از اون برمیگرده به خود شما

برای استفاده از compass و آشنایی بیشتر هم حتما به Documentation اون سری بزنید

امکانات فوق العاده ای داره!

و امیدوارم که در پروژه های خودتون، از compass بسیار بسیار استفاده کنید و از css زدن ساده (و متفاوت!)، لذت ببرید