در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

LESS & SASS چیست؟

با سلام خدمت دوستان عزیز، من خیلی اوقات از CSS برای استایل صفحاتم استفاه میکردم ولی در واقع چیزی میخواستم که بتونم باهاش بهتر کدهای CSS رو مدیریت کنیم، چیزی که بتونم قالب سایتامو بهتر بزنم ،رنگ های سایتام بهتر باشه و ... تا اینکه با LESS , SASS آشنا شدم. این دو مفهوم از اون چیزی که به نظر میرسند خیلی گسترده ترند، در syntax خیلی به هم شبیه هستند اماتفاوت هایی هم دارند ، از جمله این شباهت ها میتوان به این موارد اشاره کرد :

  • کلاس ها (Class)
  • پارامتر ها .
  • قانون کلاس های تو در تو که باعث میشود از کد های تکراری جلوگیری شود.
  • توابعی که باعث میشه بتونیم از محاسبات ریاضی در CSS استفاده کنیم.
  • تابع هایی برای رنگ ها که باعث میشود بهتر رنگ ها را انتخاب کنید.
  • قابلیتی که باعث میشد گروهی از استایل ها را فراخوانی کنید.
  • scope : قابلیتی که باعث میشود استایل هایتان را به صورت local مدیریت کنید.
  • ارزیابی هایی از جاوا اسکریپت که باعث میشود آن را در طراحی سایتتان استفاده کنید.

مهم ترین تفاوت بین LESS و SASS این است که LESS یک library از جاوااسکریپت است و یک زبان کلاینت - ساید (client-side) و در طرفی دیگر SASS فقط روی Ruby اجرا میشود و زبان سمت سرور یا (Server-side) است.خیلی از توسعه دهنده ها ممکن است از LESS استفاده نکنند چون همانطور که گفته شد LESS یک library جاوااسکریپت است و ممکن است که کاربر جاوااسکریپت را غیر فعال کند ولی SASS چنین مشکلی ندارد .چند راه حل برای LESS وجود دارد،یکی از راه ها این است که LESS را فقط در حین روند توسعه (Development) استفاده کنید و بعد از این که کارتان تمام شد آن را به صورت یک خروجی CSS تبدیل کنید و بعد آن را توسط یک برنامه minifier به صورت خلاصه و پشت سر هم تبدیل کنید و آن را درون یک فایل جدا CSS بریزید تا به جای فایل های LESS استفاده شوند و یا از برنامه LESS.app استفاده کنید. با این کارها، دیگه کاربر نیازی به فعال بودن java-script بر روی مرورگرش نداره.یکی از خوبی های SASS این است که نیازی نیست آن را به صورت جدا درون فایل CSS بریزید و برای اینکه آن را روی سرور بذارید میتوانید به صورت مستقل اینکار را بکنید و یا فایل CSS را با آن قاطی کنید ولی برای آنکه آن را اجرا کنید باید Ruby را نصب کنید و سپس SASS را نصب کنید .

چگونه LESS را install کنیم ؟

  1. ابتدا باید فایل های مربوطه رو از سایت http://lesscss.org دانلود کنید.
  2. از فایل less.js یک کپی بگیرید و داخل پوشه وب سایتتون قرار بدید
  3. یک فایل درست کنید و در آن استایل ها تون که به صورت less می باشد بنویسید (مانند:style.less)
  4. و این کد را که در پایین نوشتم در قسمت کد HTML بزنید :
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
</head>

همچنین یک Server-side version of LESS وجود داره که یک راه آسون برای برای نصب LESS است. همچنین برای نصب LESS روی سرور از این (Node Package Manager (NPM ابزار استفاده کنید.

متغیر ها (Variables)

اگر شما یک توسعه دهنده باشید متغیر ها قطعا جزو بهترین دوستان شما هستند و خواهند بود مثلا به جای اینکه بخواین یک رنگ را به چند تا بخش مختلف اعمال کنید با نوشتن یک متغیر کارمان بسیار آسان تر میشود. یعنی می تونیم از یک متغیر در چندین قسمت مخلف استفاده کنیم.این مثال را ببینید:

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

اگر ما این سه رنگ را به 3 تا تگ div اعمال کنیم رنگ ها به صورت زیر میشود .

LESS & SASS چیست؟

تنها تفاوتی که در متغیر های درون LESS و SASS وجود دارد این است که در LESS ما از علامت @ استفاده میکنیم و در SASS از $ استفاده میکنیم و چند تا تفاوت در بین Scope های این دو هم وجود دارد .

mixin ها

بعضی مواقع هست که شما مجبور میشید کلاس های مختلفی به تگ هاتون بدید و همش از صفحه stylesheet به html برید که زیاد کار جالبی نیست ولی LESS راه حلی برای این مشکل دارد برای اینکه اینکارو انجام بدید من یک نمونه اینجا گذاشتم:

.border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
.border;
}

ul.menu {
background: #ccc;
.border;
}

همانطور که میبینید ما با این کار از زیاد تکرار شدن کدمون جلوگیری میکنیم و این کد خیلی کامل و خوب کار میکند .

LESS & SASS چیست؟

اگر بخواهید این کارو با SASS انجام بدید باید کد زیر رو بزنید .

@mixin border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
@include border;
}

ul.menu {
background: #ccc;
@include border;
}

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

فیلم آموزشی

این مطلب مقدمه ای بر قابلیت های SASS و LESS بود، به امید خدا سعی می کنم در مطالب بعدی به صورت کامل تر به مبحث LESS در نوشتن استایل ها بپردازم.

موفق باشید...

نویسنده:برنا درودی

منبع: جزیره طراحی و توسعه وب وب سایت توسینسو

هر گونه کپی برداری از این مطلب بدون ذکر نام نویسنده دارای اشکال اخلاقی میباشد .

#sass_در_css_چیست #مدیریت_کدهای_css #نوشتن_استایل_در_css #less_در_css_چیست #آموزش_css #تفاوت_های_less_و_sass #معرفی_less_و_sass_در_css #تفاوت_less_و_sass_با_css
1 نظر
حسین احمدی

مرسی از مطلبت، فقط باید یک نکته رو یادآوری کنم، محیط هایی مثل Visual Studio یا Web Storm قابلیتی رو دارند که وقتی هر بار فایل های less ذخیره میشوند، یک فایل css به صورت خودکار ار روی فایل less ایجاد میشه. توی Web Storm باید ابزار LESS Generator توی تنظیمات مشخص شده باشه.

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....