آموزش LESS

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

آموزش LESS 

آنچه در این صفحه می خوانید:

معرفی Less

Less یا Leaner Style Sheets یک پیش پردازنده CSS است که شما را قادر به سفارشی کردن، مدیریت و استفاده از صفحات سبک (style sheets) برای صفحه وب می کند. Less یک فرمت CSS و یک زبان برنامه نویسی پویا است که می تواند در سمت کلاینت یا سرور اجرا شود. Less یک زبان اوپن سورس است. Less برای اولین بار در Ruby نوشته شده بود، اما نسخه های بعدی در جاوااسکریپت نوشته و Ruby نادیده گرفته شد. Less توسط Alexis Sellier در سال 2009 طراحی و ساخته شد.

Less یک زبان صفحه سبک پیش پردازنده پویا است که می تواند در CSS کامپایل شود و در سمت مشتری یا سمت سرور اجرا شود. Less تحت تأثیر Sass است و بر نحو جدیدتر "SCSS" Sass تأثیر گذاشته است، که سینتکس قالب بندی CSS مانند آن را اقتباس کرده است. اصطلاح Less یک metalanguage تو در تو است، زیرا CSS معتبر دارای کد Less با همان معناشناسی است.

مکانیسم های زیر را Less ارائه می دهد:

  • متغیرها
  •  nesting
  • mixins
  • اپراتورها و توابع

تفاوت اصلی بین پیش نویس های CSS Less و سایر CSS این است که Less امکان تلفیق در real-time را از طریق مرورگر Less می دهد.

پیش پردازنده 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 با Sass

هر دو Sass و Less پیش پردازنده های CSS هستند، که به جای قوانین استاتیک، نوشتن CSS پاک را در یک ساختار برنامه نویسی امکان پذیر می کنند. Less از Sass الهام گرفته شده است. Sass برای ساده سازی و گسترش CSS طراحی شده است، بنابراین چیزهایی مانند آکولاد از سینتکس خارج می شوند. Less طراحی شده است تا حد ممکن به CSS نزدیک باشد و در نتیجه از CSS موجود می توان به عنوان کد Less معتبر استفاده کرد. نسخه های جدیدتر Sass نیز یک نحو شبیه به CSS به نام به Sassy CSS اختصار SCSS معرفی کردند.

روش نصب Less

نصب 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);  
});  

آیا این نوشته را دوست داشتید؟
fontawesome-pro

دانلود نسخه پیشرفته Font Awesome Pro v5.5.0


آشنایی با Font Awesome Font Awesome یک مجموعه آیکن برداری مبتنی بر فونت است که در تمام برنامه های تحت وب، دسکتاپ و موبایل می توانید از آیکن های آن اس...

1397/09/20 13894 بازدید
pluralsight-less-getting-started

آشنایی با Less


Less می تواند به شما کمک کند که CSS خود را ساده کرده و ساختارهای برنامه نویسی را به CSS اضافه کنید. در این دوره با نوشتن و استفاده از extensions در Le...

1397/07/24 1228 بازدید
wintellectnow-mobile-first-responsive-design-using-less-bootstrap-and-angular

آموزش طراحی واکنش گرا موبایل با LESS، بوت استرپ و Angular


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

1396/12/27 1940 بازدید
wintellectnow-less-is-more

آموزش LESS


طراحی وب سایت واکنش گرا مدرن تاکید بیشتری بر تجربه کاربری دارد، و styling یک بخش جدایی ناپذیر از چرخه عمر توسعه می باشد. LESS باعث می شود نوشتن و نگهد...

1396/12/19 1064 بازدید
udemy-better-way-towards-css-using-less-and-sass

استفاده از Less و Sass به جای CSS


در این آموزش تصویری با نحوه استفاده از Sass و Less به جای نوشتن مستقیم کدهای CSS آشنا می شوید. این دوره آموزشی محصول موسسه Udemy است. سرفصل های دوره:...

1396/02/01 2568 بازدید
نوشتن-کدهای-css-با-less

نوشتن کدهای CSS با LESS


LESS یک ابزاری است که قابلیت‌هایی مانند متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم می‌کند به این معنی که می توانید کدهای CSS را ب...

1395/01/15 3268 بازدید
packtpub-rapid-less

آموزش سریع LESS


LESS یکی از فریمورک‎ های CSS می باشد که توسط متغیرها، حسابگرها، mixinها و توابع قابلیت‎ های CSS را توسعه داده و آن را به صورت پویا می سازد. به گونه ...

1394/12/27 1716 بازدید
دوره-getting-good-grunt

دوره Getting Good with Grunt


Grunt یک نرم افزار کاربردی برای بهینه سازی عکس ها، فایل های CSS، فایل های Javascript ، کامپایل فایلهای Sass و Less و … می باشد که امکانات زیادی در ا...

1394/12/27 1759 بازدید
سفارشی-سازی-bootstrap-3-با-less

سفارشی سازی Bootstrap 3 با LESS


LESS یک ابزار ساده است که شما می توانید در آن متغیر، عملگر، تابع و ... تعریف کنید و در CSS از آن استفاده کنید. در این دوره آموزشی از موسسه Lynda با...

1394/12/27 4241 بازدید
آشنایی-با-grunt

آشنایی با Grunt


Grunt چیست؟ Grunt یک نرم افزار کاربردی برای بهینه سازی عکس ها، فایل های CSS، فایل های Javascript ، کامپایل فایلهای Sass و Less و ... می باشد که امک...

1394/12/27 3866 بازدید