۱۴
اسفند

جلسه ۳۵ : استفاده از Less در مرورگر

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. این جلسه استفاده از Less در مرورگر به شما آموزش داده می شود.Less زمانی در مرورگر مورد استفاده قرار می گیرد که شما میخواهید فایل Less را بصورت پویا و نه بصورت سرور ساید کامپایل کنید.اینکار برای این انجام میشود که فایل less یک فایل جاوا اسکریپت بزرگ است.

استفاده از Less در مرورگر

برای شروع، ما نیاز به اضافه کردن اسکریپت LESS برای استفاده از LESS در مرورگر داریم:

مثال :

<script src = "less.js"></script>

1	<script src = "less.js"></script>

برای پیدا کردن تگ استایل در صفحه، ما باید خط زیر را در صفحه اضافه کنیم.

همچنین تگ استایل را با CSS کامپایل شده ایجاد کنیم.

مثال :

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

1	<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

گزینه های تنظیم Less در مرورگر

قبل از تگ اسکریپت، گزینه ها را می توان بر اساس شیء LESS،بصورت برنامه ای تنظیم کرد.

این عمل همه کاربرد برنامه های LESS و تگ های لینک اولیه را تحت تاثیر قرار می دهد.
به عنوان مثال، ما می توانیم گزینه ای را به صورت زیر تنظیم کنیم:

مثال :

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

less = {

env: "development"

};

</script>

همچنین می توانیم گزینه را در فرمت دیگری در تگ اسکریپت به صورت زیر تعریف کنیم:

مثال :

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

less = {

env: "development"

};

</script>

همچنین شما می توانید این گزینه ها را به تگ لینک اضافه کنید:

مثال :

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }'

rel = "stylesheet/less" type = "text/css" href = "less/style.less">

نقاطی که باید برای گزینه های صفت مورد توجه قرار گیرند:

درجه اهمیت به ای شکل می باشد: window.less < script tag < link tag
کلمات را نمی توان به صورت حروف بزرگ برگرداند.
صفات داده با مقادیر غیر رشته باید JSON معتبر باشد.

حالت تماشا

حالت تماشا را می توان با تنظیم گزینه env برای توسعه فعال کرد و ()watch را باید بعد از فایل less.js اضافه کنید. اگر می خواهید حالت تماشا را به صورت موقت فعال کنید، # را به URL اضافه کنید.

مثال :

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

تغییر متغیرها

تغییر زمان اجرای متغیر LESS فعال است. فایل LESS وقتی مقدار جدید میگیرد دوباره کامپایل می شود.

کد زیر استفاده اساسی از تغییر متغیر ها را نشان می دهد :

مثال :

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

less.modifyVars({

'@buttonFace': '#eee',

'@buttonText': '#fff'

});

اشکال زدایی
ما می توانیم این گزینه را اضافه کنیم! dumpLineNumbers: درخواست mediaquery به آدرس url یا dumpLineNumbers همانطور که در بالا ذکر شد.

گزینه Mediaquery را می توان با FireLESS استفاده کرد (نام فایل اصلی LESS و شماره خط سبک CSS ایجاد شده LESS را نمایش می دهد.)

گزینه ها

قبل از بارگذاری فایل اسکریپت less.js، گزینه ها باید در یک شیء LESS بصورت گلوبال تنظیم شوند.

مثال :

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>

less = {

env: "development",

logLevel: 2,

async: false,

fileAsync: false,

poll: 1000,

functions: {},

dumpLineNumbers: "comments",

relativeUrls: false,

globalVars: {

var1: '"string value"',

var2: 'regular value'

rootpath: ":/a.com/"

};

</script>

async: یک نوع بولین است.به طور پیشفرض، غلط است.

dumpLineNumbers: یک نوع رشته است. در فایل خروجی CSS، اطلاعات خط منبع زمانی که dumpLineNumbers تنظیم شده است اضافه می شود.

همچنین در اشکال زدایی کمک می کند.

env: یک نوع رشته است. env ممکن است زمان توسعه یا تولید اجرا شود. توسعه هنگامی که URL سند با فایل //: آغاز می شود،

یا در دستگاه محلی شما وجود دارد،به صورت خودکار تنظیم می شود.

errorReporting : هنگامی که کامپایل با خطا مواجه شود،می توان این متد را تنظیم کرد.

fileAsync : یک نوع بولین است. هنگامی که یک صفحه با پروتکل پرونده وجود دارد،

می تواند درخواست کند که به صورت غیر همزمان وارد شود یا خیر.

functions:یک نوع شی است.

logLevel :یک نوع شماره است. سطح ورود به سیستم را در کنسول جاوا اسکریپت نمایش می دهد.

۲: اطلاعات و خطاها

۱: خطاها

۰: هیچ چیز

poll:در حالت تماشا، زمان نمایش در میلی ثانیه بین نظرسنجی ها را نشان می دهد. نوع آن عدد صحیح است؛ به طور پیش فرض، روی ۱۰۰۰ تنظیم شده است.
relativeUrls : یو آر ال ها بصورت نسبی تنظیم می شوند و به طور پیش فرض مقدار این گزینه “غلط” است.

این به این معنی است که URL ها قبل از ورود به فایل less نسبی هستند. این متغیر، یک نوع بولین است.

GlobalVars : فهرست متغیرهای جهانی را به کد وارد می کند. متغیر نوع رشته باید در نقل قول باشد.

modifyVars : بر خلاف گزینه متغیر جهانی است. این اعلام در پایان فایل less فراخوانی می شود.

rootpath :مسیرها را در ابتدای هر منبع URL تنظیم می کند.

useFileCache – استفاده از حافظه در فایلCache. حافظه پنهان در فایل های less استفاده می شود تا modifyVars را فراخوانی کند.

همچنین همه فایل های less دوباره بازیابی نمی شوند.

کلام آخر

در این جلسه با انواع متغییر ها در LESS و همچنین نحوه استفاده از Less در مرورگر آشنا شدید.با ما همراه باشید تا در جلسه بعد پشتیبانی مرورگر در LESS را یاد بگیرید.

به اشتراک بگذارید

Less در مرورگر ,استفاده از Less در مرورگر ,اشکال زدایی less ,حالت تماشا در less

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۳۵ : استفاده از Less در مرورگر

مقدمه

استفاده از Less در مرورگر

گزینه های تنظیم Less در مرورگر

حالت تماشا

۲: اطلاعات و خطاها

۱: خطاها

۰: هیچ چیز

کلام آخر

لیست مطالب دوره

مقدمه

ویژگی های زبان برنامه نویسی LESS

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ