لس (لغة تنسيق صفحات الويب)

من أرابيكا، الموسوعة الحرة
اذهب إلى التنقل اذهب إلى البحث
لس (لغة تنسيق صفحات الويب)

تعديل - تعديل مصدريحول القالب

لِس (بالإنجليزية: Less)‏ لغة تنسيق صفحات الويب للمعالج الديناميكي يمكن تجميعها في أوراق الأنماط المتتالية، وتشغيلها على جانب العميل أو جانب الخادم، لِس هو مشروع مفتوح المصدر، ويتأثر بلغة ساس، كانت نسخته الأولى مكتوبة بلغة روبي، ومع ذلك في الإصدارات الأحدث، تم إهمال استخدام روبي واستبداله بـ جافا سكريبت.[1][2][3]

مميزات لغة لِس

المتغيرات [1]

يتم تعريف المتغيرات في لِس بعلامة (@).

يتم إجراء الإسناد المتغير بعلامة النقطتين (:).

أثناء الترجمة، يتم إدراج قيم المتغيرات في مستند CSS.

@pale-green-color: #4D926F;

#header {
  color: @pale-green-color;
}
h2 {
  color: @pale-green-color;
}

سوف يتم تجميع الكود أعلاه في Less إلى كود CSS التالي.

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

الخلط [1]

يسمح الخلط بدمج جميع خصائص فئة في فئة أخرى من خلال تضمين اسم الفئة كواحدة من خصائصها، وبالتالي تتصرف كنوع من الثابت أو المتغير.

CSS لا يدعم الخلط يجب تكرار أي كود متكرر في كل موقع.

يسمح الخلط بتكرار الكود بشكل أكثر كفاءة ونظافة، بالإضافة إلى تغيير أسهل في الكود.

.rounded-corners (@radius: 5px 10px 8px 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px 25px 35px 0px);
}

سوف يتم تجميع الكود أعلاه في Less إلى كود CSS التالي:

#header {
  -webkit-border-radius: 5px 10px 8px 2px;
  -moz-border-radius: 5px 10px 8px 2px;
  border-radius: 5px 10px 8px 2px;
}
#footer {
  -webkit-border-radius: 10px 25px 35px 0px;
  -moz-border-radius: 10px 25px 35px 0px;
  border-radius: 10px 25px 35px 0px;
}

لِس لديها نوع خاص من مجموعة القواعد يسمى الخلطات البارامترية والتي يمكن مزجها في فئات متشابهة، ولكنها تقبل الوسيط.

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 16px;
    a {
      text-decoration: none;
      color: red;
      &:hover {
        border-width: 1px;
        color: #fff;
      }
    }
  }
}

سوف يتم تجميع الكود أعلاه في Less إلى كود CSS التالي:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 16px;
}
#header p a {
  text-decoration: none;
  color: red;
}
#header p a:hover {
  border-width: 1px;
  color: #fff;
}

الوظائف والعمليات

لِس تسمح بالعمليات والوظائف، تسمح العمليات بإضافة وطرح وتقسيم ومضاعفة قيم الممتلكات والألوان، والتي يمكن استخدامها لإنشاء علاقات معقدة بين الخصائص.

خريطة الوظائف واحد لواحد مع كود جافا سكريبت، مما يسمح بمعالجة القيم.

@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 3;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

سوف يتم تجميع الكود أعلاه في Less إلى كود CSS التالي:

#header {
  color: #333;
  border-left: 1px;
  border-right: 3px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

المقارنة

المقالة الرئيسية: ساس (لغة تنسيق صفحات الويب)

كل من ساس ولِس هما معالجات أوراق الأنماط المتتالية الأولية، والتي تسمح لكتابة أوراق الأنماط المتتالية نظيفة في بنية برمجة بدلاً من القواعد الثابتة.

لِس مستوحى من ساس.

تم تصميم ساس لتبسيط أوراق الأنماط المتتالية وتوسيعه، لذلك تمت إزالة أشياء مثل الأقواس المتعرجة من بناء الجملة.

تم تصميم لِس لتكون أقرب ما يكون إلى أوراق الأنماط المتتالية.

قدمت الإصدارات الأحدث من ساس أيضًا بنية تشبه أوراق الأنماط المتتالية تسمى (Sassy CSS).[4][5][6]

استخدم اللغة في المواقع

يمكن تطبيق لِس على المواقع بعدة طرق.

أحد الخيارات هو تضمين ملف، less.js لتحويل الشفرة أثناء التنقل، ثم يعرض المتصفح إخراج CSS.

هناك خيار آخر وهو تحويل كود Less إلى CSS وتحميل CSS pure إلى موقع ما، مع هذا الخيار، لا يتم تحميل أي ملفات ولا يحتاج الموقع إلى محول less.js.

برمجيات لِس

الاسم الوصف الترخيص المنصات الوظائف
WinLess - Windows GUI for less.js على موقع واي باك مشين (نسخة محفوظة 2 June 2015) GUI Less Compiler رخصة أباتشي[7] Windows Compiler
Crunch Less editor and compiler (requires Adobe AIR) رخصة جنو العمومية[8] Windows, Mac OS X Compiler

Editor

less.js-windows Simple command-line utility for Windows that will compile *.less files to CSS using less.js. رخصة إم أي تي[9] Windows Compiler
less.app Less Compiler Proprietary Mac OS X Compiler
CodeKit Less Compiler Proprietary Mac OS X Compiler
LessEngine Less Compiler مجاني OpenCart Plugin Compiler
SimpLESS Less Compiler free but no explicit license[10] Windows

Mac OS X Linux

Compiler
Chirpy Less Compiler Shared Source Initiative [English][11] Visual Studio Plugin Compiler
Mindscape Web Workbench Syntax highlighting and IntelliSense for Less and Sass Proprietary Visual Studio Plugin Compiler

Syntax Highlighting

Eclipse Plugin for Less Eclipse Plugin رخصة إكليبس العمومية[12] Eclipse Plugin Syntax highlighting

Content assist Compiler

mod_less Apache2 module to compile Less on the fly مصدر مفتوح Linux Compiler
grunt-contrib-less Node.js Grunt task to convert Less to CSS رخصة إم أي تي[13] Node.js Compiler
Web Essentials Visual Studio extension with support for Less and Sass رخصة أباتشي [14] Windows Syntax highlighting, Content assist, Compiler
clessc Pure C++ compiler رخصة إم أي تي[13] at least Windows, Linux, MacOS Compiler
Less WebCompiler Web-based compiler رخصة إم أي تي[13] at least Windows, Linux, MacOS Compiler, Syntax highlighting, Minifier

انظر أيضًا

مراجع

  1. ^ أ ب ت The Core Less Team. "Getting started | Less.js". Less.js. مؤرشف من الأصل في 2022-01-19. اطلع عليه بتاريخ 2021-03-19.
  2. ^ Weizenbaum، Nathan (17 يونيو 2009). "Sass and Less : Nex3". مؤرشف من الأصل في 2009-06-21. اطلع عليه بتاريخ 2021-03-19.
  3. ^ Meng، Jiew (14 ديسمبر 2010). Mortensen، Peter (المحرر). "css - Is there a SASS.js? Something like LESS.js?". Stack Overflow. مؤرشف من الأصل في 2022-01-22. اطلع عليه بتاريخ 2021-03-19.
  4. ^ The Core Less Team. "About | Less.js". Less.js. مؤرشف من الأصل في 2021-10-28. اطلع عليه بتاريخ 2021-03-19.
  5. ^ Atwood، Jeff (30 أبريل 2010). "What's Wrong With CSS". Coding Horror. مؤرشف من الأصل في 2014-01-31. اطلع عليه بتاريخ 2021-03-19.
  6. ^ Eppstein، Chris (10 نوفمبر 2010). "sass_and_less_compared.markdown". GitHub Gist. مؤرشف من الأصل في 2022-11-20. اطلع عليه بتاريخ 2021-03-19.
  7. ^ Lagendijk، Mark (29 يناير 2013). "License Information · Issue #55 · marklagendijk/WinLess". GitHub. مؤرشف من الأصل في 2020-09-17. اطلع عليه بتاريخ 2021-03-19.
  8. ^ Dean، Matthew (2 ديسمبر 2011). "Crunch/LICENSE.txt at master · matthew-dean/Crunch". GitHub. مؤرشف من الأصل في 2022-01-23. اطلع عليه بتاريخ 2021-03-19.
  9. ^ Smart، Duncan (25 يوليو 2013). "less.js-windows/LICENSE at master · duncansmart/less.js-windows". GitHub. مؤرشف من الأصل في 2016-06-17. اطلع عليه بتاريخ 2021-03-19.
  10. ^ Engel، Christian (29 يوليو 2012). "SimpLESS/LICENSE.txt at master · Paratron/SimpLESS". GitHub. مؤرشف من الأصل في 2016-06-17. اطلع عليه بتاريخ 2021-03-19.
  11. ^ Evan Nagle. "Chirpy - VS Add In For Handling Js, Css, DotLess, and T4 Files - CodePlex Archive". CodePlex. مؤرشف من الأصل في 2021-02-20. اطلع عليه بتاريخ 2021-03-19.
  12. ^ Vincent Simonet. "Eclipse plugin for LESS". normalesup.org. مؤرشف من الأصل في 2020-07-13. اطلع عليه بتاريخ 2021-03-19.
  13. ^ أ ب ت SamBrishes (15 ديسمبر 2018). "snout.less/LICENSE.md at master · pytesNET/snout.less". GitHub. مؤرشف من الأصل في 2022-05-16. اطلع عليه بتاريخ 2021-03-19.
  14. ^ Kristensen، Mads (18 يونيو 2014). "WebEssentials2013/LICENSE.txt at master · madskristensen/WebEssentials2013". GitHub. مؤرشف من الأصل في 2022-01-22. اطلع عليه بتاريخ 2021-03-19.

وصلات خارجية

الموقع الرسمي

مجلوبة من «https://3rabica.org/index.php?title=لس_(لغة_تنسيق_صفحات_الويب)&oldid=3409451»