آنچه در این صفحه می خوانید:
معرفی Less
Less یا Leaner Style Sheets یک پیش پردازنده CSS است که شما را قادر به سفارشی کردن، مدیریت و استفاده از صفحات سبک (style sheets) برای صفحه وب می کند. Less یک فرمت CSS و یک زبان برنامه نویسی پویا است که می تواند در سمت کلاینت یا سرور اجرا شود. Less یک زبان اوپن سورس است. Less برای اولین بار در Ruby نوشته شده بود، اما نسخه های بعدی در جاوااسکریپت نوشته و Ruby نادیده گرفته شد. Less توسط Alexis Sellier در سال 2009 طراحی و ساخته شد.
Less یک زبان صفحه سبک پیش پردازنده پویا است که می تواند در CSS کامپایل شود و در سمت مشتری یا سمت سرور اجرا شود. Less تحت تأثیر Sass است و بر نحو جدیدتر "SCSS" Sass تأثیر گذاشته است، که سینتکس قالب بندی CSS مانند آن را اقتباس کرده است. اصطلاح Less یک metalanguage تو در تو است، زیرا CSS معتبر دارای کد Less با همان معناشناسی است.
مکانیسم های زیر را Less ارائه می دهد:
- متغیرها
- nesting
- mixins
- اپراتورها و توابع
تفاوت اصلی بین پیش نویس های CSS Less و سایر CSS این است که Less امکان تلفیق در real-time را از طریق مرورگر Less می دهد.
پیش پردازنده CSS چیست؟
در علم کامپیوتر، پیش پردازنده برنامه ای است که داده های ورودی خود را پردازش می کند تا خروجی را که به عنوان ورودی به برنامه دیگری استفاده می شود، تولید کند. خروجی نوعی پردازش شده از داده های ورودی است که اغلب توسط برخی از برنامه های بعدی مانند کامپایلر ها استفاده می شود. مقدار و نوع پردازش انجام شده بستگی به ماهیت پیش پردازنده دارد. برخی از پردازنده های پیش پردازنده فقط قادر به انجام جایگزینی های متنی نسبتاً ساده و گسترش کلان هستند، در حالی که برخی دیگر قدرت زبان های برنامه نویسی تمام عیار را دارند. یک مثال رایج از برنامه نویسی رایانه، پردازش انجام شده بر روی کد منبع قبل از مرحله بعدی تدوین است. در برخی از زبان های رایانه ای مرحله ای از ترجمه وجود دارد که به عنوان پردازش پیش پرداز شناخته می شود. همچنین می تواند شامل پردازش ماکرو، گنجاندن فایل و پسوند زبان باشد.
پیش پردازنده CSS یک زبان برنامه نویسی است که یک برنامه افزودنی CSS است. این به نحو منظم CSS کامپایل شده است و سپس CSS توسط مرورگر وب خوانده می شود. Less به نظر بسیار شبیه به CSS است، اما ویژگی هایی مانند متغیرها، توابع، mixins ها و عملیات و غیره را فراهم می کند که شما را قادر به ساختن CSS پویا می کند.
ویژگی های Less
- کدی تمیز، جمع و جور و قابل خواندن است و به خوبی سازماندهی شده است.
- از تمامی مرورگرها پشتیبانی می کند (cross-browser)
- سریع تر و آسان تر است.
- با جاوا اسکریپت نوشته شده است. این کامپایل سریعتر از دیگر پیش پردازنده های CSS است.
- دارای متغیرهایی است که تعمیر و نگهداری آن ها سریع تر است.
- شما را قادر می سازد تا سبک هایی با قابلیت استفاده مجدد، تعریف کنید.
- یک گسترش از CSS است و سوپر مجموعه ای از CSS نامیده می شود.
- به اندازه کافی قادر به حل مسئله افزونگی کد است.
- شما به راحتی می توانید با استفاده از import@ فایل های خارجی را مدیریت کنید. Import مورد نیاز است، زیرا بسیاری از افراد الگوهای خود را در چندین فایل تقسیم می کنند، نه اینکه آن را در یک فایل قرار دهند.
- چندین خصوصیت را باهم ادغام می کند. این ویژگی هیجان انگیز Less است که مقادیر متعددی مانند تبدیل (transform)، انتقال (transition)و جعبه سایه (box-shadow)را می پذیرد.
Less در جاوا اسکریپت نوشته شده است و نیاز به Node.js یا مرورگر وب برای اجرا دارد. شما می توانید Less.js را در وب سایت خود قرار دهید و می تواند تمام صفحات سبک مرتبط را در زمان واقعی کامپایل کند، اما این کار زمانبر است و توصیه نمی شود.همچنین می توانید از Node.js به عنوان یک برنامه گرافیکی برای کامپایل صفحات سبک Less استفاده کنید. دلیل استفاده از Node.js این است که بسیار سریع و چشمگیر است.
مقایسه Less با Sass
هر دو Sass و Less پیش پردازنده های CSS هستند، که به جای قوانین استاتیک، نوشتن CSS پاک را در یک ساختار برنامه نویسی امکان پذیر می کنند. Less از Sass الهام گرفته شده است. Sass برای ساده سازی و گسترش CSS طراحی شده است، بنابراین چیزهایی مانند آکولاد از سینتکس خارج می شوند. Less طراحی شده است تا حد ممکن به CSS نزدیک باشد و در نتیجه از CSS موجود می توان به عنوان کد Less معتبر استفاده کرد. نسخه های جدیدتر Sass نیز یک نحو شبیه به CSS به نام به Sassy CSS اختصار SCSS معرفی کردند.
روش نصب Less
نصب Less از طریق NPM سرور:
npm install -g lessفراخوانی کامپایلر از خط فرمان، بعد از نصب Less:
lessc styles.lessکامپایل کردن فایل Less و ایجاد CSS:
lessc styles.less styles.cssدریافت خروجی CSS در کنسول:
var less = require('less');
less. render ('.class {width: (1 + 1)}', function (e, output) {
console.log(output.css);
});