معرفی معروف ترین preproccessorهای css در طراحی وب سایت

Preproccessorهای css به طراحان وب سایت ها این امکان را می دهد تا بتوانند حجم کدهای css را خود را تا حد بالایی کاهش دهند. در واقع استفاده از این Prproccessor ها امروزه در پروژه های بزرگ طراحی سایت ها امری غیر قابل اجتناب است و البته قدرت این preprocessor ها در پروژه های بزرگ به خوبی قابل شناسایی است. در این مقاله قصد داریم Preproccesor های قوی برای کاهش حجم کدهای Css را معرفی کنیم. پس با ما همراه باشید.

Preproccessorهای css به طراحان وب سایت ها این امکان را می دهد تا بتوانند حجم کدهای css را خود را تا حد بالایی کاهش دهند. در واقع استفاده از این Prproccessor ها امروزه در پروژه های بزرگ طراحی سایت ها امری غیر قابل اجتناب است و البته قدرت این preprocessor ها در پروژه های بزرگ به خوبی قابل شناسایی است.

در این مقاله قصد داریم Preproccesor های قوی برای کاهش حجم کدهای Css را معرفی کنیم. پس با ما همراه باشید.

1.Sass

این مقاله را با sass  شروع می کنیم. Sass یکی از Preproccessor های قوی و مشهور برای نوشتن کدهای css در طراحی سایت ها است. برای کار کردن با sass شما به Ruby نیاز دارید . قبل از کار کردن با sass شما نیاز دارید تا ruby را برروی سیستم خود نصب کنید.

در مقاله های قبلی در مورد این preprocessor به طور مفصل صحبت کرده ایم . برای مرور تنها به دو سینتکس موجود در این preproccor اشاره می کنیم :

  1. سینتکس sass :

$serif-font-stack: "Georgia", "Times New Roman", serif

$monospace-font-stack: "Cousin", "Courier"

 

body

    font: normal 18px/22px $serif-font-stack

 

pre, code

    font: 600 bold 18px/22px $monospace-font-stack

 

همانطور که مشاهده می کنید سینتکس های sass بسیار شبیه به  css است  و بعد از کامپایل شدن تبدیل به کد css می شود.

  1. Less.js

Less یکی از preprocessor های محبوب css است و در حال حاضر یکی از مهم ترین رقبای sass  در میان طراحان وب سایت ها محسوب می شود . less نیز همانند sass از حلقه ها ، متغیرها و میکسین ها و... برای نوشتن کد های Css استفاده می کند. عملکرد LESS به این صورت است که کل کد های LESS که نوشتید را میگیرد  و آنها را به کدهای CSS تبدیل می کند. به جای انجام این کار می توانیم فایل LESS  را تبدیل کنیم و خروجی CSS ان را استفاده کنیم و از تبدیل ان با هر بار لود شدن صفحه جلوگیری کنیم.

در تکه کد زیر نحوه ی استفاده از میکسین ها در less توضیح داده شده است :

.button {

    display: inline-block;

    width: 80%;

    max-width: 200px;

    border-radius: 5px;

    background-color: black;

    color: white;

    font-size: 14px;

    margin: 5px;

    padding: 8px;

}

 

.button-checkout- process {

    .button(); /* Mixin */

    background-color: silver;

}

 

نحوه استفاده از less بسیار اسان است . فقط کافی است که فایل جاوا اسکریپت less.js  را دانلود کنید و در فایل html خود به ان ارجاع دهید.

<head>

  <!-- Reference Less JavaScript file -->

  < src="path/to/your/less.js"></>

  <link rel="stylesheet/less" type="text/css" href="your/styles.less" />

</head>

3.stylus

Stylus یک پیش پردازنده ی CSS است از طریق آن شما می توانید برای طراحی سایت ها سریعتر و بهتر کدنویسی کنید. در زیر چند امکان که Stylus  در اختیار ما قرار می دهد آورده شده است.

body {

  font: 12px Helvetica, Arial, sans-serif;

}

a.button {

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

}

 

با استفاده از Stylus دیگر لازم نیست که { } استفاده کنید :

7

Body

  font: 12px Helvetica, Arial, sans-serif;

 

a.button

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

   
 

با استفاده از Stylus دیگر لازم نیست در آخر هر خط سمی کالون ( ; ) بگذارید بصورت زیر :

7

body

  font: 12px Helvetica, Arial, sans-serif

 

a.button

  -webkit-border-radius: 5px

  -moz-border-radius: 5px

  border-radius: 5px

 

فرمت فایلهای Stylus بصورت .styl میباشد.

 

معرفی معروف ترین  preproccessorهای  css  در طراحی وب سایت
شنبه 15 آذر 1393 - 09:38:34 2984 آخرین بازدید : شنبه 25 خرداد 1398 - 17:11:52 0
*
*