خب، بذار با یه داستان شروع کنیم. یه زمانی بود که برنامهنویسان وب باید با CSS سروکله میزدند. CSS، اون موجود زنده پیچیدهای که استایل دادن به صفحات وب رو ممکن میکرد. اما یه مشکل بزرگ داشت: همه چی باید دستی و بهصورت خط به خط نوشته میشد. تصور کن که میخوای یه رنگ یا فونت رو توی کل سایتت تغییر بدی، باید بری و تکتک خطوط رو تغییر بدی. اینجاست که موضوع جذاب Less وارد میشه.
یه روز برنامهنویسی به اسم "آلکسیس سیلرز" که از این وضعیت خسته شده بود، ایدهای به ذهنش رسید. چرا نشه یه زبانی داشت که CSS رو سادهتر و قابل مدیریتتر کنه؟ و اینطوری Less متولد شد. Less یه پیشپردازنده CSS هست که به شما اجازه میده کدهای CSS رو به شکلی مدرنتر و با قابلیتهای بیشتر بنویسید.
حالا یه لحظه تصور کن Less وجود نداشت. باید هنوزم با همون روشهای قدیمی CSS کار میکردیم. هر تغییر کوچکی یه کابوس بزرگ میشد. تغییر رنگ برند؟ تغییر دادن سایز فونت؟ همه اینها میشد یه پروژه بزرگ که کلی وقت و انرژی میگرفت. و از همه بدتر، خلاقیت توی طراحی وب هم محدود میشد. دیگه خبری از استایلهای پیچیده و مدرن نبود. دیگه نمیتونستیم سایتهای جذاب و چشمنواز داشته باشیم.
Less که مخفف Leaner Style Sheets هست، یه زبان سبک و کمحجم برای پیشپردازش CSS هست که با اضافه کردن قابلیتهایی مثل متغیرها، توابع و عملیات ریاضی، نوشتن کدهای CSS رو خیلی راحتتر و سریعتر میکنه. با Less میتونی استایلهای پیچیدهتری بنویسی و کدهای CSS رو بهصورت مرتبتر و قابل مدیریتتر سازماندهی کنی.
خب، حالا که با کلیات Less آشنا شدیم، بیایم یه نگاه دقیقتر بندازیم به قابلیتهای شگفتانگیزش. قابلیتهای Less باعث میشه که نوشتن و مدیریت کدهای CSS خیلی راحتتر و کارآمدتر بشه. با استفاده از Less میتونی کدهات رو سازمانیافتهتر و خواناتر بنویسی و استایلهای پیچیدهتری ایجاد کنی.
متغیرها یکی از بهترین قابلیتهای Less هستن. با استفاده از متغیرها میتونی مقادیر ثابتی مثل رنگها، فونتها و اندازهها رو ذخیره کنی و هر جا که لازم داشتی ازشون استفاده کنی. اینجوری اگه بخوای یه مقدار رو تغییر بدی، فقط کافیه متغیرش رو تغییر بدی و تموم!
مثال:
@primary-color: #3498db;
@font-size: 16px;
body {
color: @primary-color;
font-size: @font-size;
}
نستینگ بهت اجازه میده که کدهای CSS رو به صورت سلسلهمراتبی و مرتب بنویسی. اینطوری کدها خیلی خواناتر و قابل مدیریتتر میشن. فرض کن داری یه لیست توی یه ناوبری (navigation) استایل میدی. با نستینگ میتونی خیلی راحت و تمیز این کار رو انجام بدی.
مثال:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
color: @primary-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
}
میکسینها بهت اجازه میدن که تکههای کد قابل استفاده مجدد بسازی و هر جا که نیاز داشتی ازشون استفاده کنی. این قابلیت مثل توابع در زبانهای برنامهنویسی هست. با میکسینها میتونی یه تکه کد رو تعریف کنی و هر جا که لازم داشتی فراخوانیش کنی.
مثال:
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box {
.border-radius(10px);
}
یه قابلیت خیلی باحال دیگه Less اینه که میتونی عملیات ریاضی رو توی کدهات انجام بدی. اینطوری میتونی اندازهها و فواصل رو به صورت دینامیک محاسبه کنی.
مثال:
@base-padding: 10px;
.container {
padding: @base-padding * 2;
margin: @base-padding / 2;
}
Less یه سری توابع درونساخت داره که میتونی ازشون برای انجام کارهای مختلف استفاده کنی. مثلاً میتونی رنگها رو روشنتر یا تیرهتر کنی، رشتهها رو دستکاری کنی و کلی کارهای دیگه.
مثال:
@primary-color: #3498db;
header {
background-color: lighten(@primary-color, 20%);
}
با Less میتونی فایلهای Less دیگه رو به کد خودت ایمپورت کنی و ازشون استفاده کنی. این قابلیت بهت اجازه میده که کدها رو به صورت ماژولار و قابل مدیریت بنویسی.
مثال:
// variables.less
@primary-color: #3498db;
@font-size: 16px;
// styles.less
@import 'variables.less';
body {
color: @primary-color;
font-size: @font-size;
}
قابلیت اکستند بهت اجازه میده که استایلهای یه کلاس رو به کلاسهای دیگه اعمال کنی. اینطوری میتونی از تکرار کدها جلوگیری کنی و کدهات رو تمیزتر نگه داری.
مثال:
.button {
padding: 10px 20px;
background-color: @primary-color;
color: #fff;
}
.primary-button {
&:extend(.button);
border: none;
}
Less یکی از محبوبترین پیشپردازندههای CSS هست که با افزودن قابلیتهای پیشرفته، نوشتن و مدیریت کدهای CSS را سادهتر و کارآمدتر میکنه. اما مثل هر ابزار دیگهای، Less هم مزایا و معایب خاص خودش رو داره. در ادامه برخی از مزایا و معایبش رو بررسی میکنیم.
با توجه به مزایا و معایب مطرح شده، انتخاب بین Less و سایر پیشپردازندههای CSS بستگی به نیازها و محدودیتهای پروژهت داره. Less میتونه برای پروژههای کوچک و متوسط یه انتخاب عالی باشه، در حالی که برای پروژههای بزرگ و پیچیده ممکنه نیاز به ابزارهای قدرتمندتری داشته باشی.
❞ بهترین کد، کدیه که با تلاش کمتر نوشته بشه اما تاثیر بیشتری داشته باشه. Less این امکان رو برای CSS فراهم میکنه.❝
Less در مقایسه با دیگر پیشپردازندههای CSS مثل Sass و Stylus ویژگیها و مزایای خاص خودش رو داره. در زیر جدولی از مقایسه این سه ابزار رو میبینیم:
ویژگی | Less | Sass | Stylus |
سینتکس | ساده و کمحجم | پیچیده و قدرتمند | ساده و کمحجم |
سرعت کامپایل | سریع | متوسط | سریع |
جامعه کاربری | بزرگ | بسیار بزرگ | کوچکتر |
مستندسازی | خوب | عالی | متوسط |
توابع | ✔️ | ✔️ | ✔️ |
متغیرها | ✔️ | ✔️ | ✔️ |
نستینگ | ✔️ | ✔️ | ✔️ |
پشتیبانی از CSS | ✔️ | ✔️ | ✔️ |
Less یه پیشپردازنده ساده و کمحجم هست که با سینتکس قابل فهم و راحتش، برای کاربران تازهکار و پروژههای کوچیک و متوسط خیلی مناسبه. یادگیری Less به خاطر شباهت زیادش به CSS خیلی سریعه. این ابزار قابلیتهایی مثل متغیرها، میکسینها و عملیات ریاضی رو داره که نوشتن و مدیریت کدهای CSS رو برات خیلی راحتتر میکنه.
Sass که مخفف Syntactically Awesome Stylesheets هست، یکی از قدرتمندترین و محبوبترین پیشپردازندههای CSS محسوب میشه. Sass دو سینتکس مختلف داره: SCSS که شبیه به CSS هست و SASS که سینتکس سادهتر و کمحجمتری داره. این ابزار از ویژگیهای پیشرفتهای مثل ارثبری، توابع پیشرفته و قابلیتهای قدرتمند میکسین پشتیبانی میکنه. Sass بیشتر توی پروژههای بزرگ و پیچیده استفاده میشه. جامعه کاربری بزرگ و مستندات عالی اونم باعث میشه که یادگیری و حل مشکلات خیلی راحتتر باشه.
پیشنهاد میکنم مقاله Sass چیست رو بخونی تا جزئیات بیشتری از این پیشپردازنده بدونی😊
Stylus یه پیشپردازنده قدرتمند و انعطافپذیر هست که بهت اجازه میده از سینتکس خیلی کمحجم و ساده تا سینتکسهای پیچیدهتر استفاده کنی. این ابزار قابلیتهای مشابهی با Less و Sass داره، ولی انعطافپذیری بیشتری توی سینتکس و نوشتن کدها فراهم میکنه. Stylus بیشتر توی پروژههای Node.js و جاوااسکریپت استفاده میشه و به خاطر انعطاف بالا، توسعهدهندگان حرفهای رو جذب خودش کرده. جامعه کاربری Stylus کوچیکتر از Less و Sass هست، ولی با این وجود، یه ابزار قدرتمند و کارآمد برای توسعهدهندگان حرفهای به شمار میاد.
انتخاب بین Less، Sass و Stylus بستگی به نیازهای خاص پروژه و تیم شما داره:
اگه به دنبال یه ابزار ساده و سریع برای پروژههای کوچیک و متوسط هستی، Less انتخاب مناسبیه.
اگه به دنبال ابزاری قدرتمند و با قابلیتهای پیشرفته برای پروژههای بزرگ و پیچیده هستی، Sass بهترین انتخابه.
اگه به انعطافپذیری بالا و سینتکس قابل تنظیم نیاز داری، Stylus میتونه گزینهای مناسب برای تو باشه.
در نهایت، هر سه ابزار Less، Sass و Stylus بهت کمک میکنن تا کدهای CSS خودت رو بهتر بنویسی و پروژههای وب خودت رو به صورت کارآمدتر و سازمانیافتهتری مدیریت کنی. انتخاب هرکدوم از این ابزارها بستگی به نیازها و محدودیتهای پروژهت داره.
خب، حالا که فهمیدیم Less چیه و چه مزایایی داره، وقتشه که یاد بگیریم چطور نصبش کنیم.
برای اجرای مثالهای Less، نیاز به Node.js داریم. برای دانلود Node.js، به لینک nodejs.org برو و دانلود و نصبش کن.
حالا Less رو از طریق NPM (Node Package Manager) روی سرور نصب کن. دستور زیر رو توی خط فرمان وارد کن:
npm install -g less
بعد از نصب موفقیتآمیز Less، خطوط زیر رو توی خط فرمان میبینی:
-- less@2.6.1
+-- errno@0.1.4
| `-- prr@0.0.0
+-- graceful-fs@4.1.3
+-- image-size@0.4.0
+-- mime@1.3.4
+-- mkdirp@0.5.1
| `-- minimist@0.0.8
+-- promise@7.1.1
| `-- asap@2.0.3
+-- request@2.69.0
| +-- aws-sign2@0.6.0
| +-- aws4@1.3.2
| | `-- lru-cache@4.0.0
| | +-- pseudomap@1.0.2
| | `-- yallist@2.0.0
| +-- bl@1.0.3
| | `-- readable-stream@2.0.6
| | +-- core-util-is@1.0.2
| | +-- inherits@2.0.1
| | +-- isarray@1.0.0
| | +-- process-nextick-args@1.0.6
| | +-- string_decoder@0.10.31
| | `-- util-deprecate@1.0.2
| +-- caseless@0.11.0
| +-- combined-stream@1.0.5
| | `-- delayed-stream@1.0.0
| +-- extend@3.0.0
| +-- forever-agent@0.6.1
| +-- form-data@1.0.0-rc4
| | `-- async@1.5.2
| +-- har-validator@2.0.6
| | +-- chalk@1.1.1
| | | +-- ansi-styles@2.2.0
| | | | `-- color-convert@1.0.0
| | | +-- escape-string-regexp@1.0.5
| | | +-- has-ansi@2.0.0
| | | | `-- ansi-regex@2.0.0
| | | +-- strip-ansi@3.0.1
| | | `-- supports-color@2.0.0
| | +-- commander@2.9.0
| | | `-- graceful-readlink@1.0.1
| | +-- is-my-json-valid@2.13.1
| | | +-- generate-function@2.0.0
| | | +-- generate-object-property@1.2.0
| | | | `-- is-property@1.0.2
| | | +-- jsonpointer@2.0.0
| | | `-- xtend@4.0.1
| | `-- pinkie-promise@2.0.0
| | `-- pinkie@2.0.4
| +-- hawk@3.1.3
| | +-- boom@2.10.1
| | +-- cryptiles@2.0.5
| | +-- hoek@2.16.3
| | `-- sntp@1.0.9
| +-- http-signature@1.1.1
| | +-- assert-plus@0.2.0
| | +-- jsprim@1.2.2
| | | +-- extsprintf@1.0.2
| | | +-- json-schema@0.2.2
| | | `-- verror@1.3.6
| | `-- sshpk@1.7.4
| | +-- asn1@0.2.3
| | +-- dashdash@1.13.0
| | | `-- assert-plus@1.0.0
| | +-- ecc-jsbn@0.1.1
| | +-- jodid25519@1.0.2
| | +-- jsbn@0.1.0
| | `-- tweetnacl@0.14.1
| +-- is-typedarray@1.0.0
| +-- isstream@0.1.2
| +-- json-stringify-safe@5.0.1
| +-- mime-types@2.1.10
| | `-- mime-db@1.22.0
| +-- node-uuid@1.4.7
| +-- oauth-sign@0.8.1
| +-- qs@6.0.2
| +-- stringstream@0.0.5
| +-- tough-cookie@2.2.2
`-- tunnel-agent@0.4.2
`-- source-map@0.5.3
حالا که Less رو نصب کردی، بریم یه مثال ساده از Less ببینیم تا متوجه بشی چطوری کار میکنه.
فایل HTML (hello.html):
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>Welcome to 7Learn</h1>
<h3>Hello!!!!!</h3>
</body>
</html>
فایل Less (style.less)
@primarycolor: #FF7F50;
@color: #800080;
h1 {
color: @primarycolor;
}
h3 {
color: @color;
}
برای اجرای Less و تبدیل فایل style.less به style.css، از دستور زیر استفاده کن:
lessc style.less style.css
وقتی این دستور رو اجرا کنی، فایل style.css به صورت خودکار ایجاد میشه. هر وقت فایل Less رو تغییر بدی، باید این دستور رو دوباره اجرا کنی تا فایل CSS بهروزرسانی بشه.
فایل CSS (style.css)
h1 {
color: #FF7F50;
}
h3 {
color: #800080;
}
خروجی
حالا فایل HTML رو توی مرورگرت باز کن و خروجی رو ببین. این کد باعث میشه که h1 به رنگ نارنجی و h3 به رنگ بنفش دربیاد. به همین راحتی!
حالا که با Less و قابلیتهاش آشنا شدیم، بذار یه چندتا مثال از کدنویسی با Less بزنیم تا ببینیم چطوری میشه ازش استفاده کرد.
بذاریم با یه مثال ساده شروع کنیم. فرض کن میخوایم یه دکمه با استایل خاص درست کنیم. میتونیم از متغیرها و میکسینها برای این کار استفاده کنیم تا استایلمون قابل تنظیم و تغییر باشه.
@btn-color: #3498db;
@btn-padding: 10px 20px;
.btn {
background-color: @btn-color;
padding: @btn-padding;
border: none;
color: #fff;
text-align: center;
cursor: pointer;
&:hover {
background-color: darken(@btn-color, 10%);
}
}
در این مثال، از دو متغیر برای رنگ و پدینگ دکمه استفاده کردیم. کلاسی به نام .btn تعریف کردیم که استایل دکمه رو تنظیم میکنه. همچنین، با استفاده از &:hover، استایل دکمه در حالت هاور رو تنظیم کردیم که رنگ دکمه کمی تیرهتر بشه.
حالا فرض کن میخوایم یه هدر جذاب بسازیم. با استفاده از متغیرها میتونیم رنگ و سایز فونت هدر رو تنظیم کنیم.
@header-bg: #2c3e50;
@header-color: #ecf0f1;
header {
background-color: @header-bg;
color: @header-color;
padding: 20px;
text-align: center;
}
در این مثال، رنگ پسزمینه و رنگ متن هدر رو با استفاده از متغیرها تعریف کردیم. کلاسی به نام header داریم که این مقادیر رو به خودش اختصاص میده. پدینگ و ترازبندی متن رو هم تنظیم کردیم تا هدر وسطچین و با فاصله مناسب باشه.
و حالا بریم سراغ یه مثال کمی پیچیدهتر. میخوایم یه فرم زیبا بسازیم که استایلدهی اون با استفاده از Less خیلی راحتتر و شیکتر بشه.
@form-bg: #ecf0f1;
@form-padding: 20px;
form {
background-color: @form-bg;
padding: @form-padding;
border: 1px solid #bdc3c7;
input {
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
}
button {
background-color: @btn-color;
color: #fff;
padding: @btn-padding;
border: none;
cursor: pointer;
}
}
توی این مثال، یه فرم داریم که پسزمینه و پدینگش با استفاده از متغیرها تنظیم شده. برای المانهای داخل فرم مثل input و button هم استایلهایی تعیین کردیم. اینطوری فرم ما هم زیبا و هم خوانا میشه و استفاده از Less کدنویسی رو خیلی راحتتر میکنه.
با استفاده از این مثالها میتونی ببینی چطوری Less میتونه نوشتن و مدیریت کدهای CSS رو آسونتر کنه. امیدوارم این مثالها بهت کمک کنن تا بهتر Less رو درک کنی و ازش توی پروژههات استفاده کنی.
Less یه پیشپردازنده CSS هست که با استفاده از قابلیتهایی مثل متغیرها، نستینگ و توابع، نوشتن کدهای CSS رو برات خیلی سادهتر و کارآمدتر میکنه.
با استفاده از npm و دستور npm install -g less میتونید Less رو نصب کنید.
Less کلی مزایا داره! مثلاً استفاده از متغیرها، توابع، نستینگ و کلی قابلیت دیگه که نوشتن و مدیریت کدهای CSS رو خیلی راحتتر و بهتر میکنه.
نه، Less یه افزونه برای CSS هست. در واقع کدهای Less در نهایت به CSS تبدیل میشن.
در این مقاله بررسی کردیم که Less چیه و چرا میتونه ابزار فوقالعادهای برای نوشتن کدهای CSS باشه. با قابلیتهایی مثل متغیرها، نستینگ، میکسینها و عملیات ریاضی، Less میتونه کدهای CSS رو خیلی سادهتر و مدیریتپذیرتر کنه. یادگیریش هم خیلی آسونه و اگه با CSS آشنا باشی، خیلی سریع میتونی روش مسلط بشی. البته، مثل هر ابزاری، Less هم معایبی داره و ممکنه برای پروژههای بزرگ و پیچیده به اندازه Sass مناسب نباشه. در نهایت، انتخاب بین Less و سایر پیشپردازندهها بستگی به نیازهای خاص پروژهت داره. امیدوارم این مقاله بهت کمک کرده باشه که تصمیم بهتری بگیری و پروژههات رو با استایلهای بهتر و کارآمدتر جلو ببری.