استفاده از css preprocessor برای توسعه وب سایت

همانطور که میدونید برای طراحی و راه اندازی یک وب‌سایت صرفا طراحی اولیه آن نباید در نظر گرفته شود، بدون شک در آینده مجبور به توسعه و طراحی سایر بخش‌های پروژه خواهیم شد. با این وجود ساختار و سبک کدنویسی بخش فرانت‌اند و اینکه ماژولار باشد از اهمیت زیادی برخوردار است.

هرچقدر کدهای بخش فرانت‌اند را ماژولار و منظم بنویسیم باز دستمون برای ساختاری منظم برای توسعه راحتتر بسته است به همین دلیل استفاده از css preprocessor ها کار ما را خیلی راحت‌تر میکند به طوریکه حتی بتوانیم در سایر پروژه‌ها از بخشی از کدها استفاده کنیم.

استفاده از Sass

Sass یکی از قدرتمندترین css preprocessor های موجود است که بهتون توصیه میکنم در استفاده از آن شک نکنید. لازم است تاکید کنم Sass هیچ چیزی به css اضافه نمی کند ولی قابلیت‌هایی به شما می‌دهد که بتوانید از کدنویسی سمت فرانت‌اند هم بیشتر لذت ببرید و هم امکاناتی را در اختیار شما قرار میدهد که تاثیر بسیار مثبتی روی پروژه‌ی شما می‌گذارد.

برای مثال ‌قابلیت‌هایی همچون تعریف متغیر، ایجاد فانکشن و … را در اختیار شما قرار میدهد.

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins , inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

شما میتوانید متغیرهایی را تعریف کنید و در بخش‌های مختلف پروژه از آن استفاده نمایید. همچنین میتوانید فایلهای جامعی برای تعریف فانکشن داشته باشید و برای بخش های مختلف پروژه از آن استفاده نمائید و یا قابلیت nesting برای تگ ها داشته باشید و در نهایت Sass به css کانورت میکند.

برای مثال :

نصب Sass

برای نصب Sass می‌توانید از وب‌سایت رسمی ‌Sass استفاده کنید که به طور کامل برای سیستم عامل‌های مختلف توضیح داده است و اگر هم مایل نیستید از ترمینال برای نصب Sass استفاده کنید نرم افزارهایی برای نصب و استفاده از آن توی وب‌سایت معرفی شده است.

نصب Sass بر روی مک


gem install sass

برای اینکه مطمئن شوید که Sass نصب شده است می‌توانید کد زیر را در ترمینال اجرا کنید که ورژن Sass نصب شده را نمایش می دهد.


sass -v

استفاده از Compass

در صورتیکه میخواهید از Sass استفاده کنید بدون Compass از آن استفاده نکنید! در واقع در بالا اشاره کردیم که شما میتوانید mixinهایی را تعریف کنید تا بتوانید راحت‌تر کدهای سمت فرانت‌اند را توسعه دهید اما زمان بسیار زیادی لازم است تا شما تمام فانکشن‌هایی که لازم دارید را بنویسید به همین خاطر استفاده از Compass که براساس Sass به صورت متن‌باز نوشته شده است را توصیه میکنم.

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


 gem install compass

بعد از نصب آن، داخل فایل های Sass ابتدا Compass را import کنید و سپس از امکانات آن استفاده می‌کنید.


@import "compass/css3"


@import "compass/css3";
 
@import "compass/utilities";
 
#demo {
  @include clearfix;
}
 
.border-radius-example {
  width: 125px;
  height: 125px;
  background: red;
  margin: 20px;
  float: left;
  padding: 5px;
}
 
#border-radius {
  @include border-radius(25px);
}
 
#border-radius-top-left {
  @include border-top-left-radius(25px);
}

استفاده از Susy

در صورتیکه با فریمورک‌هایی همچون Foundation , Bootstrap کار کرده باشید قطعا با طراحی واکنش‌گرا ( responsive ) و گریدبندی آشنا هستید. نقطه قوت این فریم‌ورک‌ها ریسپانسیو بودن و کامپوننت‌هایی است که میتوان استفاده کرد.

برای اینکه شما با استفاده از Sass این ساختار را ایجاد کنید میتوانید خودتون برای گریدبندی و حالتهای مختلف کدنویسی کنید و یا از ابزارهایی همچون Susy استفاده کنید.

با استفاده از Susy شما میتوانید برای هر پروژه و بسته به نیازتون گریدبندی‌های مختلف داشته باشید.

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


gem install susy

برای استفاده از آن باید همچون Compass آن را import نمایید.


@import "compass/css3";
@import "susy";

$susy: (
    columns: 12,
    container: 1200px,
    gutters: 1/4,
    global-box-sizing: border-box,
    debug: (image: hide)
);

در کد بالا شما تنظیمات Susy را برای پروژه می بینید که ۱۲ ستونه است و عرض تگ container آن ۱۲۰۰ پیکسل است و همچنین فضای خالی ( margin ) بین هر ستون است که میتوانیم مشخص کنیم قبل یا بعد از هر ستون قرار بگیرد.

gutter after in susy — منبع : zellwk.com/blog/susy-gutter-positions

در صورتیکه حالت debug را روی حالت نمایش قرار دهید بر روی پروژه مکان هر گرید را میتوانید ببینید.

تنظیمات کلی و پیشفرض susy به صورت زیر است که میتوانید هر کدام را تغییر دهید :


$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 4,
  gutters: .25,
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

در نهایت یک نمونه کد یکی از کاربران که این ساختار را نوشته است می توانید ببینید و تست کنید :

See the Pen Susy Grid Example 1A by Michelle Barker (@michellebarker) on CodePen.

front-end فرانت اند