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

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

لِس

الشعار

معلومات عامة

التصنيف	لغة طراز لأوراق العمل — برمجيات حرة — معالج مسبق — مكتبة برمجية
ظهرت في	2009
نظام التشغيل	متعدد المنصات
الرخصة	رخصة أباتشي 2.0

التطوير

الإصدار الأول	2009
الإصدار الأخير	4.2.0 (7 سبتمبر 2023)
المستودع	github.com…

التأثير

متأثرة بـ	أوراق الأنماط المتتالية — ساس (لغة تنسيق صفحات الويب)

متفرقات

موقع الويب	lesscss.org

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

المتغيرات

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

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

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

@pale-green-color: #4D926F;

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

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

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

الخلط

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

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).

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

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

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

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

برمجيات لِس

الاسم	الوصف	الترخيص	المنصات	الوظائف
WinLess - Windows GUI for less.js على موقع واي باك مشين (نسخة محفوظة 2 June 2015)	GUI Less Compiler	رخصة أباتشي	Windows	Compiler
Crunch	Less editor and compiler (requires Adobe AIR)	رخصة جنو العمومية	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.	رخصة إم أي تي	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	Windows Mac OS X Linux	Compiler
Chirpy	Less Compiler	Shared Source Initiative	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	رخصة إكليبس العمومية	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	رخصة إم أي تي	Node.js	Compiler
Web Essentials	Visual Studio extension with support for Less and Sass	رخصة أباتشي	Windows	Syntax highlighting, Content assist, Compiler
clessc	Pure C++ compiler	رخصة إم أي تي	at least Windows, Linux, MacOS	Compiler
Less WebCompiler	Web-based compiler	رخصة إم أي تي	at least Windows, Linux, MacOS	Compiler, Syntax highlighting, Minifier

انظر أيضًا

• ستايلس (لغة تنسيق صفحات الويب)
• أوراق الأنماط المتتالية
• جافا سكريبت

وصلات خارجية

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