۱۴
اسفند

جلسه ۰۲ : نصب و راه اندازی LESS

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

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

فهرست

مقدمه

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

سیستم مورد نیاز برای less

سیستم عامل مورد نیاز:اکثر سیستم ها
مرورگر پشتیبان:اینترنت اکسپلورر (اینترنت اکسپلورر +۸)، فایرفاکس، گوگل کروم، سافاری.

نصب و راه اندازی LESS

مرحله ۱ : ما برای احرای مثال‌های less نیاز به نصب NodeJs داریم برای دانلود NodeJs، لینک را باز کنید، یک صفحه به صورت زیر

نشان داده می شود:

نصب NodeJs

سپس از صفحه ی بالا، NodeJs را دانلود کنید.

مرحله ۲ : راه اندازی نصب; Node.js را در سیستم خود اجرا کنید.

مرحله ۳ : سپس از طریق NPM(مدیریت پکیج در Node)، باید Less را بر روی سرور مورد نظر نصب کنید. برای این کار، دستورات زیر را در command prompt وارد کنید:

مثال :

npm install -g less

1	npm install -g less

مرحله ۴ : پس از نصب موفق LESS، خطوط زیر را در خط فرمان خواهید دید:

مثال :

-- less@2.6.1
   +-- errno@0.1.4
   | `-- prr@0.0.0
   +-- graceful-fs@4.1.3
   +-- image-size@0.4.0
   +-- mime@1.3.4
   +-- mkdirp@0.5.1
   | `-- minimist@0.0.8
   +-- promise@7.1.1
   | `-- asap@2.0.3
   +-- request@2.69.0
   | +-- aws-sign2@0.6.0
   | +-- aws4@1.3.2
   | | `-- lru-cache@4.0.0
   | |   +-- pseudomap@1.0.2
   | |   `-- yallist@2.0.0
   | +-- bl@1.0.3
   | | `-- readable-stream@2.0.6
   | |   +-- core-util-is@1.0.2
   | |   +-- inherits@2.0.1
   | |   +-- isarray@1.0.0
   | |   +-- process-nextick-args@1.0.6
   | |   +-- string_decoder@0.10.31
   | |   `-- util-deprecate@1.0.2
   | +-- caseless@0.11.0
   | +-- combined-stream@1.0.5
   | | `-- delayed-stream@1.0.0
   | +-- extend@3.0.0
   | +-- forever-agent@0.6.1
   | +-- form-data@1.0.0-rc4
   | | `-- async@1.5.2
   | +-- har-validator@2.0.6
   | | +-- chalk@1.1.1
   | | | +-- ansi-styles@2.2.0
   | | | | `-- color-convert@1.0.0
   | | | +-- escape-string-regexp@1.0.5
   | | | +-- has-ansi@2.0.0
   | | | | `-- ansi-regex@2.0.0
   | | | +-- strip-ansi@3.0.1
   | | | `-- supports-color@2.0.0
   | | +-- commander@2.9.0
   | | | `-- graceful-readlink@1.0.1
   | | +-- is-my-json-valid@2.13.1
   | | | +-- generate-function@2.0.0
   | | | +-- generate-object-property@1.2.0
   | | | | `-- is-property@1.0.2
   | | | +-- jsonpointer@2.0.0
   | | | `-- xtend@4.0.1
   | | `-- pinkie-promise@2.0.0
   | |   `-- pinkie@2.0.4
   | +-- hawk@3.1.3
   | | +-- boom@2.10.1
   | | +-- cryptiles@2.0.5
   | | +-- hoek@2.16.3
   | | `-- sntp@1.0.9
   | +-- http-signature@1.1.1
   | | +-- assert-plus@0.2.0
   | | +-- jsprim@1.2.2
   | | | +-- extsprintf@1.0.2
   | | | +-- json-schema@0.2.2
   | | | `-- verror@1.3.6
   | | `-- sshpk@1.7.4
   | |   +-- asn1@0.2.3
   | |   +-- dashdash@1.13.0
   | |   | `-- assert-plus@1.0.0
   | |   +-- ecc-jsbn@0.1.1
   | |   +-- jodid25519@1.0.2
   | |   +-- jsbn@0.1.0
   | |   `-- tweetnacl@0.14.1
   | +-- is-typedarray@1.0.0
   | +-- isstream@0.1.2
   | +-- json-stringify-safe@5.0.1
   | +-- mime-types@2.1.10
   | | `-- mime-db@1.22.0
   | +-- node-uuid@1.4.7
   | +-- oauth-sign@0.8.1
   | +-- qs@6.0.2
   | +-- stringstream@0.0.5
   | +-- tough-cookie@2.2.2
   | `-- tunnel-agent@0.4.2
   `-- source-map@0.5.3

-- less@2.6.1

+-- errno@0.1.4

| `-- prr@0.0.0

+-- graceful-fs@4.1.3

+-- image-size@0.4.0

+-- mime@1.3.4

+-- mkdirp@0.5.1

| `-- minimist@0.0.8

+-- promise@7.1.1

| `-- asap@2.0.3

+-- request@2.69.0

| +-- aws-sign2@0.6.0

| +-- aws4@1.3.2

| | `-- lru-cache@4.0.0

| | +-- pseudomap@1.0.2

| | `-- yallist@2.0.0

| +-- bl@1.0.3

| | `-- readable-stream@2.0.6

| | +-- core-util-is@1.0.2

| | +-- inherits@2.0.1

| | +-- isarray@1.0.0

| | +-- process-nextick-args@1.0.6

| | +-- string_decoder@0.10.31

| | `-- util-deprecate@1.0.2

| +-- caseless@0.11.0

| +-- combined-stream@1.0.5

| | `-- delayed-stream@1.0.0

| +-- extend@3.0.0

| +-- forever-agent@0.6.1

| +-- form-data@1.0.0-rc4

| | `-- async@1.5.2

| +-- har-validator@2.0.6

| | +-- chalk@1.1.1

| | | +-- ansi-styles@2.2.0

| | | | `-- color-convert@1.0.0

| | | +-- escape-string-regexp@1.0.5

| | | +-- has-ansi@2.0.0

| | | | `-- ansi-regex@2.0.0

| | | +-- strip-ansi@3.0.1

| | | `-- supports-color@2.0.0

| | +-- commander@2.9.0

| | | `-- graceful-readlink@1.0.1

| | +-- is-my-json-valid@2.13.1

| | | +-- generate-function@2.0.0

| | | +-- generate-object-property@1.2.0

| | | | `-- is-property@1.0.2

| | | +-- jsonpointer@2.0.0

| | | `-- xtend@4.0.1

| | `-- pinkie-promise@2.0.0

| | `-- pinkie@2.0.4

| +-- hawk@3.1.3

| | +-- boom@2.10.1

| | +-- cryptiles@2.0.5

| | +-- hoek@2.16.3

| | `-- sntp@1.0.9

| +-- http-signature@1.1.1

| | +-- assert-plus@0.2.0

| | +-- jsprim@1.2.2

| | | +-- extsprintf@1.0.2

| | | +-- json-schema@0.2.2

| | | `-- verror@1.3.6

| | `-- sshpk@1.7.4

| | +-- asn1@0.2.3

| | +-- dashdash@1.13.0

| | | `-- assert-plus@1.0.0

| | +-- ecc-jsbn@0.1.1

| | +-- jodid25519@1.0.2

| | +-- jsbn@0.1.0

| | `-- tweetnacl@0.14.1

| +-- is-typedarray@1.0.0

| +-- isstream@0.1.2

| +-- json-stringify-safe@5.0.1

| +-- mime-types@2.1.10

| | `-- mime-db@1.22.0

| +-- node-uuid@1.4.7

| +-- oauth-sign@0.8.1

| +-- qs@6.0.2

| +-- stringstream@0.0.5

| +-- tough-cookie@2.2.2

| `-- tunnel-agent@0.4.2

`-- source-map@0.5.3

یک مثال ساده با LESS

hello.html

مثال : فایل hello.html

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

<!doctype html>

<head>

</head>

<body>

<h1>Welcome to TutorialsPoint</h1>

<h3>Hello!!!!!</h3>

</body>

</html>

اکنون فایل style.less را که بسیار شبیه به CSS است ایجاد کنید ، تنها تفاوت این است که با less extension. ذخیره می شود. هر دو فایل، html. وless. باید داخل پوشه nodejs ایجاد شوند.

style.less

مثال :

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

@primarycolor: #FF7F50;

@color:#800080;

h1 {

color: @primarycolor;

}

h3 {

color: @color;

}

با استفاده از دستور زیر، فایل style.less را به style.css کامپایل کنید.

مثال :

lessc style.less style.css

1	lessc style.less style.css

هنگام اجرای دستور فوق، فایل style.css را به صورت خودکار ایجاد میشود. هر بار که فایل LESS را تغییر می دهید، لازم است دستور بالا را در cmd اجرا کنید و سپس فایل style.css به روز می شود.

هنگام اجرای فرمان فوق، فایل style.css، کد زیر را داشته باشد:

مثال :

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

h1 {

color: #FF7F50;

}

h3 {

color: #800080;

}

خروجی

اکنون بگذارید مراحل زیر را انجام دهیم تا ببینید کدام کد بالا کار می کند :

کد HTML بالا را در فایل hello.html ذخیره کنید.
این فایل HTML را در مرورگر باز کنید، خروجی زیر نمایش داده می شود.

کلام آخر

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

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

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

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

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

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

جلسه ۰۲ : نصب و راه اندازی LESS

مقدمه

سیستم مورد نیاز برای less

نصب و راه اندازی LESS

یک مثال ساده با LESS

style.less

خروجی

کلام آخر

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

مقدمه

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

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ