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

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

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

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

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

أثناء الترجمة، يتم إدراج قيم المتغيرات في مستند CSS.
```less
@pale-green-color: #4D926F;

#header {
  color: @pale-green-color;
}
h2 {
  color: @pale-green-color;
}
```
سوف يتم تجميع الكود أعلاه في Less إلى كود CSS التالي.
```css
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}
```


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

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

يسمح الخلط بتكرار الكود بشكل أكثر كفاءة ونظافة، بالإضافة إلى تغيير أسهل في الكود.
```less
.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 التالي:
```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;
}
```
لِس لديها نوع خاص من مجموعة القواعد يسمى الخلطات البارامترية والتي يمكن مزجها في فئات متشابهة، ولكنها تقبل الوسيط.
```less
#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 التالي:
```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;
}
```


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

خريطة الوظائف واحد لواحد مع كود جافا سكريبت، مما يسمح بمعالجة القيم.
```less
@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 التالي:
```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.

## برمجيات لِس

## انظر أيضًا

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

## مراجع

## وصلات خارجية

* 

تصنيف:استحداثات متعلقة بالحواسيب في 2009
تصنيف:أدوات ومكتبات برمجة حرة
تصنيف:برمجيات 2009
تصنيف:برمجيات تستخدم رخصة أباتشي
تصنيف:برمجيات تستخدم رخصة إم آي تي
تصنيف:روبي (لغة برمجة)
تصنيف:لغات برمجة أنشئت في 2006
تصنيف:مكتبات جافا سكريبت