مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. در این فصل، ما درک می کنیم که چگونه یک پلاگین را می توان برای گسترش قابلیت های سایت بارگذاری کرد. نصب افزونه lessc برای استفاده از پلاگین ها لازم است. پلاگین ها مورد استفاده قرار می گیرند تا کار شما راحت تر شود، از این رو مباحث این جلسه را به پلاگین ها در LESS اختصاص داده ایم.
آشنایی با مبحث پلاگین ها در LESS
خط فرمان
برای نصب پلاگین ها در LESS با استفاده از خط فرمان، ابتدا باید نصب افزونه lessc را با موفقیت به اتمام برسانید. نصب افزونه lessc را می توان با استفاده از افزونه less در ابتدا نصب کرد.
خط فرمان زیر کمک خواهد کرد که پلاگین clean-css را نصب کنید :
مثال :
| npm install less-plugin-clean-css |
به طور مستقیم می توانید از افزونه نصب شده با استفاده از دستور زیر استفاده کنید:
مثال :
| lessc --plugin = path_to_plugin = options |
استفاده از یک پلاگین در کد
مثال :
| var pluginName = require("pluginName"); less.render(myCSS, { plugins: [pluginName] }) .then(function(output) { }, function(error) { }); |
در مرورگر
قبل از اسکریپت less.js، نویسنده پلاگین باید فایل جاوا اسکریپت را در صفحه قرار دهد.
مثال :
| <script src = "plugin.js"></script> <script> less = { plugins: [plugin] }; </script> <script src = "less.min.js"></script> |
لیست پلاگین ها در LESS
جدول زیر پلاگین های موجود در LESS را لیست می کند.
پلاگین و توضیحات | شماره |
Autoprefixer
ابرای اضافه کردن پیشوند به CSS پس از ترجمه از LESS استفاده می شود. | ۱ |
CSScomb
کمک می کند تا نگهداری سبک خود را بهبود ببخشید. | ۲ |
clean-css
خروجی CSS را از LESS کم میکند. | ۳ |
CSSWring
فشرده سازی یا کم کردن خروجی CSS از LESS. | ۴ |
| css-flip برای تولید CSS از چپ به راست (LTR) یا راست به چپ (RTL) استفاده می شود. | ۵ |
| functions تابع LESS را در خود LESS می نویسد. | ۶ |
| glob برای وارد کردن چندین فایل استفاده می شود. | ۷ |
| group-css-media-queries پردازش پست برای LESS را انجام می دهد. | ۸ |
| inline-urls به صورت خودکار URL را به داده uri تبدیل می کند. | ۹ |
npm-import
برای less بسته از npm وارد می کند. | ۱۰ |
| pleeease برای پردازش پست استفاده می شود. | ۱۱ |
| rtl دستورات فایل LESS را از ltr (چپ به راست) به rtl (راست به چپ) تغییر می دهد. | ۱۲ |
وارد کنندگان Framework/Library
| وارد کننده و توضیحات | شماره |
| Bootstrap قبل از کد سفارشی LESS، کد LESS بوت استرپ وارد می شود. | ۱ |
| Bower Resolve فایل های less از بسته های Bower وارد می شوند. | ۲ |
| Cardinal CSS for less.js قبل از کد LESS سفارشی، کد LESS برای Cardinal وارد می شود. | ۳ |
| Flexbox Grid محبوبترین فریم ورک ها و وارد کننده کتابخانه هاست. | ۴ |
| Flexible Grid System سیستم شبکه انعطاف پذیر را وارد می کند. | ۵ |
| Ionic فریم ورک Ionic را وارد می کند. | ۶ |
| Lesshat mixinsهای Lesshat را وارد می کند. | ۷ |
| Skeleton اسکلت کد less را وارد می کند. | ۸ |
کتابخانه های تابع
توضیحات | شماره |
| advanced-color-functions برای ایجاد رنگ های بیشتر استفاده می شود. | ۱ |
| cubehelix با استفاده از مقدار تصحیح گاما ۱، تابع cubehelix می تواند یک رنگ بین دو رنگ را بازگرداند. | ۲ |
| lists تغییرات کتابخانه توابع را فهرست می کند. | ۳ |
کلام آخر
از جمله توابع دیگری که در پلاگین های LESS وجود دارند عبارتند از :
pluginManager یک نگه دارنده را فراهم می کند که می تواند مدیران فایل، پست پردازنده ها یا بازدید کنندگان را اضافه کند.
تابع setOptions رشته را منتقل می کند.
تابع printUsage برای توضیح گزینه ها استفاده می شود.
امیدوارم از مطالب ذکر شده بهره کافی را برده باشید.با ما همراه باشید تا در جلسه بعد استفاده از برنامه در LESS را آموزش ببینید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
