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

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

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

أثناء الترجمة، يتم إدراج قيم المتغيرات في مستند 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;
}