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

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

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

1.Sass

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

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

سینتکس 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 می شود.

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>

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

</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 دیگر لازم نیست که { } استفاده کنید :

Body

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

a.button