آموزش LESS
دسته بندی ( ۴ آموزش )
نمایش دسته بندی ها (۴ آموزش)
مباحث اولیه، در LESS
مباحث اولیه، در LESS 4

معرفی LESS به عنوان یک پیش پردازنده (pre-processor) برای CSS و راه حلی برای تولید کردن کد های CSS به صورت پویا (Dynamic)

چنانچه تاکنون با CSS کار کرده و کدهای CSS زیادی را نوشته باشید، حتما با این مشکل برخورد کرده اید که کدهای CSS به صورت استاتیک (ایستا - Static) نوشته می شوند و نه پویا (داینامیک - Dynamic).

یعنی به عنوان مثال، فرض کنید که 10 عنصر مختلف داریم که قصد داریم رنگ پس زمینه همه آنها یکسان باشد و در 10 محل مختلف از کدهای CSS ، کدهای مربوط به آن 10 عنصر نوشته شده است، بنابراین با توجه به استاتیک (ایستا - Static) بودن کدهای CSS ، ما مجبور هستیم که کد مربوط به رنگ پس زمینه مورد نظرمان را در 10 محل مختلف از کدهای CSS بنویسیم. چنانچه نظرمان در مورد رنگ انتخاب شده، تغییر کند و بخواهیم یک رنگ دیگر را جایگزین رنگ قبلی کنیم، مجبوریم که به تک تک آن 10 محل در کدهای CSS رفته و کدهای رنگ قبلی را با کدهای رنگ جدید جایگزین نماییم.

اما اگر قابلیت نوشتن کدهای CSS به صورت پویا (داینامیک - Dynamic) را داشتیم، می توانستیم یک متغیر (Variable) را تعریف نموده و کد مربوط به رنگ پس زمینه را در آن ذخیره نماییم و سپس نام متغیر را در آن 10 محل از کدهای CSS ذکر می‌ کردیم، بنابراین هر زمان که قصد داشتیم یک رنگ جدید را جایگزین رنگ قبلی کنیم، تنها کافی بود که کد رنگ ذخیره شده در آن متغیر را تغییر دهیم و بنابراین تنها نیاز به تغییر یک خط از کدهای CSS داشتیم.

پس تولید کردن کدهای CSS به صورت پویا (داینامیک - Dynamic) می تواند بسیار به ما کمک کند که کدهای CSS را به صورت منظم تر و سریعتر و با قواعد استاندارد تری تولید نماییم (استفاده از متغیرها، توابع و ...).

LESS بر اساس گسترش CSS به وجود آمده است، بنابراین کدهای LESS در واقع همان کدهای CSS هستند که یک سری قواعد به آنها اضافه شده است و این قواعد کمک می کنند که بتوانیم کدهای CSS را به صورت پویا (داینامیک - Dynamic) تولید نماییم.

دقت داشته باشید که این قواعد اضافه شده، هرگز در کدهای CSS ای که در وب سایت به کار می بریم، ذکر نخواهند شد. بلکه تنها در مرحله پیش پردازش کدهای LESS به تولید کدهای CSS نهایی کمک می کنند، یعنی ما یکسری کد LESS را بر اساس قواعد آن می نویسیم و سپس با استفاده از پردازش کننده مربوط به LESS ، آن کدها را پردازش می کنیم که منجر به تولید کدهای CSS نهایی می‌ شود و این کدهای CSS نهایی، تنها دارای قواعد مربوط به CSS می باشند.

برای کدهای LESS ، پردازش کننده های (Processor) مختلفی وجود دارد. چون شما در مرحله یادگیری LESS قرار دارید، ما در کلیدستان سعی می‌ کنیم که یک پردازش کننده را انتخاب نماییم که نصب و استفاده از آن ساده باشد، بنابراین شما پس از گذراندن این آموزش ها می توانید پردازش کننده دلخواه خود را انتخاب نمایید.

LESS بر اساس زبان برنامه نویسی JavaScript طراحی شده است و به صورت منبع باز (open-source) می باشد، بنابراین شما می توانید به کدهای اصلی آن دسترسی داشته باشید.

در کلید آموزشی بعدی یک پردازش کننده (Processor) کدهای LESS را انتخاب نموده و چگونگی نصب و استفاده از آن را شرح خواهیم داد.

نویسنده علیرضا گلمکانی
شماره کلید 26290
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

جستجو در کلیدستان، توسط گوگل

جستجو در عنوان کلیدها

دسترسی سریع

کلید
×

شماره کلید


دسته بندی
×

شماره دسته کلید


جستجو
×

جستجو