آموزش LESS

دسته بندی: آموزش طراحی وب

آموزش LESS 

آشنایی با LESS

Less یا Leaner Style Sheets یک پیش پردازنده CSS است که شما را قادر به سفارشی کردن، مدیریت و استفاده از صفحات سبک (style sheets) برای صفحه وب می کند. Less یک فرمت CSS و یک زبان برنامه نویسی پویا است که می تواند در سمت مشتری یا سرور اجرا شود. Less یک زبان متن باز است.

Less برای اولین بار در Ruby نوشته شده بود، اما نسخه های بعدی در جاوااسکریپت نوشته و Ruby نادیده گرفته شد. Less توسط Alexis Sellier در سال 2009 طراحی و ساخته شد.

پیش پردازنده 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 از طریق 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);  
});  

 

به این نوشته امتیاز دهید 1 2 3 4 5 (1 رای)