استخدام LESS مع Bootstrap
قم بتخصيص Bootstrap وتوسيعه باستخدام LESS ، وهو معالج CSS مسبق ، للاستفادة من المتغيرات والمزج وأكثر استخدامًا لبناء CSS الخاص بـ Bootstrap.
بنيت مع أقل
لماذا أقل؟
يتكون Bootstrap من LESS في جوهره ، وهي لغة أنماط ديناميكية أنشأها صديقنا العزيز Alexis Sellier . يجعل تطوير CSS المستندة إلى الأنظمة أسرع وأسهل وأكثر متعة.
ما يحتويه؟
كإمتداد لـ CSS ، يتضمن LESS المتغيرات والمزج لمقتطفات التعليمات البرمجية القابلة لإعادة الاستخدام والعمليات للرياضيات البسيطة والتداخل وحتى وظائف الألوان.
المتغيرات
قد تكون إدارة الألوان وقيم البكسل في CSS نوعًا من الألم ، وعادة ما تكون مليئة بالنسخ واللصق. ليس مع LESS - عيّن الألوان أو قيم البكسل كمتغيرات وقم بتغييرها مرة واحدة.
الخلطات
تلك التصريحات الثلاثة لنصف قطر الحدود التي تحتاج إلى إجرائها في ol 'CSS العادي؟ لقد وصلوا الآن إلى سطر واحد بمساعدة mixins ، مقتطفات من التعليمات البرمجية التي يمكنك إعادة استخدامها في أي مكان.
عمليات
اجعل شبكتك ، والرائدة ، وأكثر مرونة من خلال إجراء العمليات الحسابية أثناء التنقل. اضرب وقسم وأضف واطرح طريقك إلى CSS sanity.
متغيرات Bootstrap متغيرات LESS وقيمها وإرشادات الاستخدام
الارتباطات التشعبية
@linkColor |
# 08 ج | اللون الافتراضي لنص الارتباط | |
@linkColorHover |
darken(@linkColor, 15%) |
لون التمرير الافتراضي لنص الارتباط |
نظام الشبكة
@gridColumns |
12 |
@gridColumnWidth |
60 بكسل |
@gridGutterWidth |
20 بكسل |
@fluidGridColumnWidth |
6.382978723٪ |
@fluidGridGutterWidth |
2.127659574٪ |
الطباعة
@baseFontSize |
13 بكسل |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18 بكسل |
ألوان تدرج الرمادي
@black |
# 000 | |
@grayDarker |
# 222 | |
@grayDark |
# 333 | |
@gray |
# 555 | |
@grayLight |
# 999 | |
@grayLighter |
#إيييي | |
@white |
#fff |
ألوان مميزة
@blue |
# 049cdb | |
@green |
# 46a546 | |
@red |
# 9d261d | |
@yellow |
# ffc40d | |
@orange |
# f89406 | |
@pink |
# c3325f | |
@purple |
# 7a43b6 |
عناصر
أزرار
@primaryButtonBackground |
@linkColor |
نماذج
@placeholderText |
@grayLight |
نافبار
@navbarHeight |
40 بكسل | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
حالات النموذج والتنبيهات
@warningText |
# c09853 | |
@warningBackground |
# f3edd2 | |
@errorText |
# b94a48 | |
@errorBackground |
# f2dede | |
@successText |
# 468847 | |
@successBackground |
# dff0d8 | |
@infoText |
# 3a87ad | |
@infoBackground |
# d9edf7 |
الخلطات التمهيدية
حول الخلطات
الخلطات الأساسية
مزيج أساسي هو في الأساس تضمين أو جزء من مقتطف من CSS. لقد تمت كتابتها تمامًا مثل فئة CSS ويمكن استدعاؤها في أي مكان.
- . العنصر {
- . clearfix () ؛
- }
الخلطات البارامترية
المزيج البارامترى يشبه المزيج الأساسي تمامًا ، ولكنه يقبل أيضًا المعلمات (ومن هنا الاسم) بقيم افتراضية اختيارية.
- . العنصر {
- . الحد - نصف القطر ( 4 بكسل ) ؛
- }
أضف بنفسك بسهولة
يتم تخزين جميع ملفات mixins الخاصة بـ Bootstrap تقريبًا في mixins.less ، وهو ملف بدون أداة مساعدة رائعة يمكّنك من استخدام مزيج في أي من ملفات .less في مجموعة الأدوات.
لذا ، انطلق واستخدم القائمة الموجودة أو لا تتردد في إضافة ما تريد.
الخلطات المضمنة
خدمات
| ميكسين | المعلمات | إستعمال |
|---|---|---|
.clearfix() |
لا أحد | أضف إلى أي والد لمسح العوامات بداخله |
.tab-focus() |
لا أحد | قم بتطبيق نمط التركيز Webkit ومخطط Firefox المستدير |
.center-block() |
لا أحد | مركز تلقائي لعنصر على مستوى الكتلة باستخدامmargin: auto |
.ie7-inline-block() |
لا أحد | استخدم بالإضافة إلى العادي display: inline-blockللحصول على دعم IE7 |
.size() |
@height: 5px, @width: 5px |
اضبط الارتفاع والعرض بسرعة على سطر واحد |
.square() |
@size: 5px |
يبني على .size()تعيين العرض والارتفاع بنفس القيمة |
.opacity() |
@opacity: 100 |
تعيين نسبة التعتيم في الأعداد الصحيحة (على سبيل المثال ، "50" أو "75") |
نماذج
| ميكسين | المعلمات | إستعمال |
|---|---|---|
.placeholder() |
@color: @placeholderText |
اضبط placeholderلون النص للمدخلات |
الطباعة
| ميكسين | المعلمات | إستعمال |
|---|---|---|
#font > #family > .serif() |
لا أحد | اجعل عنصرًا يستخدم مكدس خطوط Serif |
#font > #family > .sans-serif() |
لا أحد | اجعل عنصرًا يستخدم مكدس خطوط sans-serif |
#font > #family > .monospace() |
لا أحد | اجعل عنصرًا يستخدم مكدس خطوط أحادية المسافة |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
يمكنك بسهولة تعيين حجم الخط والوزن والمسافة البادئة |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
عيّن عائلة الخط على serif ، وتحكم في الحجم والوزن والمسافة البادئة |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
عيّن عائلة الخط على sans-serif ، وتحكم في الحجم والوزن والمسافة البادئة |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
عيّن عائلة الخط على مسافة أحادية ، وتحكم في الحجم والوزن والمسافة البادئة |
نظام الشبكة
| ميكسين | المعلمات | إستعمال |
|---|---|---|
.container-fixed() |
لا أحد | قم بإنشاء حاوية مركزها أفقيًا للاحتفاظ بالمحتوى الخاص بك |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
قم بإنشاء نظام شبكة بكسل (حاوية ، وصف ، وأعمدة) مع n من الأعمدة ومزراب عرض x بكسل |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
قم بإنشاء نظام شبكة سابقة مع n من الأعمدة و x ٪ هامش عريض |
خصائص CSS3
| ميكسين | المعلمات | إستعمال |
|---|---|---|
.border-radius() |
@radius: 5px |
قم بتدوير زوايا العنصر. يمكن أن تكون قيمة واحدة أو أربع قيم مفصولة بمسافات |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
أضف الظل المسقط إلى عنصر |
.transition() |
@transition |
إضافة تأثير انتقال CSS3 (على سبيل المثال ، all .2s linear) |
.rotate() |
@degrees |
قم بتدوير عنصر n درجة |
.scale() |
@ratio |
مقياس عنصر إلى عدد n من حجمه الأصلي |
.translate() |
@x: 0, @y: 0 |
انقل عنصرًا على المستويين x و y |
.background-clip() |
@clip |
قص خلفية عنصر (مفيد لـ border-radius) |
.background-size() |
@size |
التحكم في حجم صور الخلفية عبر CSS3 |
.box-sizing() |
@boxmodel |
تغيير نموذج الصندوق لعنصر (على سبيل المثال ، border-boxلعرض كامل input) |
.user-select() |
@select |
التحكم في اختيار المؤشر للنص على الصفحة |
.resizable() |
@direction: both |
اجعل أي عنصر يمكن تغيير حجمه على اليمين والأسفل |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
اجعل محتوى أي عنصر يستخدم أعمدة CSS3 |
الخلفيات والتدرجات
| ميكسين | المعلمات | إستعمال |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
امنح عنصرًا لون خلفية شفافًا |
#translucent > .border() |
@color: @white, @alpha: 1 |
امنح عنصرًا لون حد شبه شفاف |
#gradient > .vertical() |
@startColor, @endColor |
قم بإنشاء تدرج خلفية عمودي عبر المستعرضات |
#gradient > .horizontal() |
@startColor, @endColor |
قم بإنشاء تدرج خلفية أفقي عبر المستعرضات |
#gradient > .directional() |
@startColor, @endColor, @deg |
قم بإنشاء تدرج خلفية اتجاهي عبر المتصفح |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
قم بإنشاء تدرج خلفية ثلاثي الألوان عبر المتصفح |
#gradient > .radial() |
@innerColor, @outerColor |
قم بإنشاء تدرج خلفية شعاعي عبر المستعرضات |
#gradient > .striped() |
@color, @angle |
قم بإنشاء تدرج خلفية مخطط عبر المتصفح |
#gradientBar() |
@primaryColor, @secondaryColor |
يستخدم للأزرار لتعيين حد متدرج وأغمق قليلاً |
تجميع Bootstrap مع LESS
أدوات للترجمة
العقدة مع makefile
قم بتثبيت مترجم سطر أوامر LESS و uglify-js بشكل عام باستخدام npm عن طريق تشغيل الأمر التالي:
$ npm install -g أقل uglify-js
بمجرد التثبيت ، قم فقط بتشغيل makeجذر دليل التمهيد الخاص بك وستكون جاهزًا تمامًا.
بالإضافة إلى ذلك ، إذا كنت قد قمت بتثبيت watchr ، فيمكنك تشغيل make watchإعادة بناء bootstrap تلقائيًا في كل مرة تقوم فيها بتحرير ملف في bootstrap lib (هذا ليس مطلوبًا ، فقط طريقة ملائمة).
سطر الأوامر
قم بتثبيت أداة سطر الأوامر LESS عبر Node وقم بتشغيل الأمر التالي:
$ lessc ./lib/bootstrap.less> bootstrap.css
تأكد من تضمين --compressهذا الأمر إذا كنت تحاول حفظ بعض البايت!
جافا سكريبت
قم بتنزيل أحدث إصدار من Less.js وقم بتضمين المسار إليه (و Bootstrap) في ملف <head>.
<link rel = "stylesheet / less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script>
لإعادة تجميع ملفات .less ، ما عليك سوى حفظها وإعادة تحميل صفحتك. يقوم Less.js بتجميعها وتخزينها في التخزين المحلي.
تطبيق Mac غير رسمي
يراقب تطبيق Mac غير الرسمي أدلة من ملفات .less ويجمع الكود إلى الملفات المحلية بعد كل حفظ لملف بدون مشاهدة.
إذا كنت ترغب في ذلك ، يمكنك تبديل التفضيلات في التطبيق للتصغير التلقائي والدليل الذي تنتهي به الملفات المترجمة.
المزيد من تطبيقات Mac
سحق
Crunch هو محرر ومجمع LESS رائع المظهر مبني على Adobe Air.
CodeKit
تم إنشاء CodeKit بواسطة نفس الشخص مثل تطبيق Mac غير الرسمي ، وهو تطبيق Mac يجمع LESS و SASS و Stylus و CoffeeScript.
بسيط
تطبيق Mac و Linux و PC لسحب وإفلات تجميع أقل من الملفات. بالإضافة إلى ذلك ، فإن شفرة المصدر موجودة على جيثب .