|
لس (لغة تنسيق صفحات الويب)لِس  الشعار
لِس (بالإنجليزية: Less) لغة تنسيق صفحات الويب للمعالج الديناميكي يمكن تجميعها في أوراق الأنماط المتتالية، وتشغيلها على جانب العميل أو جانب الخادم، لِس هو مشروع مفتوح المصدر، ويتأثر بلغة ساس، كانت نسخته الأولى مكتوبة بلغة روبي، ومع ذلك في الإصدارات الأحدث، تم إهمال استخدام روبي واستبداله بـ جافا سكريبت.[5][6][7] مميزات لغة لِسالمتغيرات [5]يتم تعريف المتغيرات في لِس بعلامة (@). يتم إجراء الإسناد المتغير بعلامة النقطتين (:). أثناء الترجمة، يتم إدراج قيم المتغيرات في مستند CSS. @pale-green-color: #4D926F;
#header {
color: @pale-green-color;
}
h2 {
color: @pale-green-color;
}
سوف يتم تجميع الكود أعلاه في Less إلى كود CSS التالي. #header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
الخلط [5]يسمح الخلط بدمج جميع خصائص فئة في فئة أخرى من خلال تضمين اسم الفئة كواحدة من خصائصها، وبالتالي تتصرف كنوع من الثابت أو المتغير. 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).[8][9][10] استخدم اللغة في المواقعيمكن تطبيق لِس على المواقع بعدة طرق. أحد الخيارات هو تضمين ملف، less.js لتحويل الشفرة أثناء التنقل، ثم يعرض المتصفح إخراج CSS. هناك خيار آخر وهو تحويل كود Less إلى CSS وتحميل CSS pure إلى موقع ما، مع هذا الخيار، لا يتم تحميل أي ملفات ولا يحتاج الموقع إلى محول less.js. برمجيات لِس
انظر أيضًامراجع
وصلات خارجية |
