استخدام LESS مع Bootstrap

قم بتخصيص Bootstrap وتوسيعه باستخدام LESS ، وهو معالج CSS مسبق ، للاستفادة من المتغيرات والمزج وأكثر استخدامًا لبناء CSS الخاص بـ Bootstrap.

لماذا أقل؟

يتكون Bootstrap من LESS في جوهره ، وهي لغة أنماط ديناميكية أنشأها صديقنا العزيز Alexis Sellier . يجعل تطوير CSS المستندة إلى الأنظمة أسرع وأسهل وأكثر متعة.

ما يحتويه؟

كإمتداد لـ CSS ، يتضمن LESS المتغيرات والمزج لمقتطفات التعليمات البرمجية القابلة لإعادة الاستخدام والعمليات للرياضيات البسيطة والتداخل وحتى وظائف الألوان.

يتعلم أكثر

أقل CSS

قم بزيارة الموقع الرسمي على http://lesscss.org/ لمعرفة المزيد.

المتغيرات

قد تكون إدارة الألوان وقيم البكسل في CSS نوعًا من الألم ، وعادة ما تكون مليئة بالنسخ واللصق. ليس مع LESS - عيّن الألوان أو قيم البكسل كمتغيرات وقم بتغييرها مرة واحدة.

الخلطات

تلك التصريحات الثلاثة لنصف قطر الحدود التي تحتاج إلى إجرائها في ol 'CSS العادي؟ الآن أصبحوا في سطر واحد بمساعدة mixins ، مقتطفات من التعليمات البرمجية التي يمكنك إعادة استخدامها في أي مكان.

عمليات

اجعل شبكتك ، والرائدة ، وأكثر مرونة من خلال إجراء العمليات الحسابية بسرعة مع العمليات. الضرب والقسمة والإضافة والطرح في طريقك إلى CSS العقلاني.

السقالات والوصلات

@bodyBackground @white لون خلفية الصفحة
@textColor @grayDark لون النص الافتراضي لكامل النص والعناوين والمزيد
@linkColor #08c اللون الافتراضي لنص الارتباط
@linkColorHover darken(@linkColor, 15%) لون التمرير الافتراضي لنص الارتباط

نظام الشبكة

@gridColumns 12
@gridColumnWidth 60 بكسل
@gridGutterWidth 20 بكسل
@fluidGridColumnWidth 6.382978723٪
@fluidGridGutterWidth 2.127659574٪

الطباعة

@sansFontFamily "Helvetica Neue" ، Helvetica ، Arial ، sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily مينلو ، موناكو ، "Courier New" ، monospace
@baseFontSize 13 بكسل يجب أن يكون بكسل
@baseFontFamily @sansFontFamily
@baseLineHeight 18 بكسل يجب أن يكون بكسل
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

الجداول

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd

ألوان تدرج الرمادي

@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

عناصر

أزرار

@btnBackground @white
@btnBackgroundHighlight darken(@white, 10%)
@btnBorder darken(@white, 20%)
@btnPrimaryBackground @linkColor
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)
@btnInfoBackground #5bc0de
@btnInfoBackgroundHighlight #2f96b4
@btnSuccessBackground #62c462
@btnSuccessBackgroundHighlight 51a351
@btnWarningBackground lighten(@orange, 15%)
@btnWarningBackgroundHighlight @orange
@btnDangerBackground #ee5f5b
@btnDangerBackgroundHighlight #bd362f
@btnInverseBackground @gray
@btnInverseBackgroundHighlight @grayDarker

نماذج

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

حالات النموذج والتنبيهات

@warningText # c09853
@warningBackground # f3edd2
@errorText # b94a48
@errorBackground # f2dede
@successText # 468847
@successBackground # dff0d8
@infoText # 3a87ad
@infoBackground # d9edf7

نافبار

@navbarHeight 40 بكسل
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white
@navbarLinkColorActive @navbarLinkColorHover
@navbarLinkBackgroundHover transparent
@navbarLinkBackgroundActive @navbarBackground
@navbarSearchBackground lighten(@navbarBackground, 25%)
@navbarSearchBackgroundFocus @white
@navbarSearchBorder darken(@navbarSearchBackground, 30%)
@navbarSearchPlaceholderColor #ccc
@navbarBrandColor @navbarLinkColor

هبوط قطرة

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

وحدة البطل

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

حول الخلطات

الخلطات الأساسية

مزيج أساسي هو في الأساس تضمين أو جزء من مقتطف من CSS. لقد تمت كتابتها تمامًا مثل فئة CSS ويمكن استدعاؤها في أي مكان.

  1. . العنصر {
  2. . clearfix () ؛
  3. }

الخلطات البارامترية

المزيج البارامترى يشبه المزيج الأساسي تمامًا ، ولكنه يقبل أيضًا المعلمات (ومن هنا الاسم) بقيم افتراضية اختيارية.

  1. . العنصر {
  2. . الحد - نصف القطر ( 4 بكسل ) ؛
  3. }

أضف بنفسك بسهولة

يتم تخزين جميع ملفات mixins الخاصة بـ Bootstrap تقريبًا في mixins.less ، وهو ملف بدون أداة مساعدة رائعة يمكّنك من استخدام مزيج في أي من ملفات .less في مجموعة الأدوات.

لذا ، انطلق واستخدم القائمة الموجودة أو لا تتردد في إضافة ما تريد.

الخلطات المضمنة

خدمات

ميكسين المعلمات إستعمال
.clearfix() لا أحد أضف إلى أي والد لمسح العوامات بداخله
.tab-focus() لا أحد قم بتطبيق نمط التركيز Webkit ومخطط Firefox المستدير
.center-block() لا أحد مركز تلقائي لعنصر على مستوى الكتلة باستخدامmargin: auto
.ie7-inline-block() لا أحد استخدم بالإضافة إلى العادي display: inline-blockللحصول على دعم IE7
.size() @height @width اضبط الارتفاع والعرض بسرعة على سطر واحد
.square() @size يبني على .size()تعيين العرض والارتفاع بنفس القيمة
.opacity() @opacity تعيين نسبة التعتيم في الأعداد الصحيحة (على سبيل المثال ، "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 ٪ هامش عريض
#grid > .input() @gridColumnWidth, @gridGutterWidth قم بإنشاء نظام شبكة البكسل inputللعناصر ، مع مراعاة الحشو والحدود
.makeColumn @columns: 1, @offset: 0 تحويل أي divإلى عمود شبكة بدون .span*الفئات

خصائص CSS3

ميكسين المعلمات إستعمال
.border-radius() @radius قم بتدوير زوايا العنصر. يمكن أن تكون قيمة واحدة أو أربع قيم مفصولة بمسافات
.box-shadow() @shadow أضف الظل المسقط إلى عنصر
.transition() @transition إضافة تأثير انتقال CSS3 (على سبيل المثال ، all .2s linear)
.rotate() @degrees قم بتدوير عنصر n درجة
.scale() @ratio مقياس عنصر إلى عدد n من حجمه الأصلي
.translate() @x, @y انقل عنصرًا على المستويين x و y
.background-clip() @clip قص خلفية عنصر (مفيد لـ border-radius)
.background-size() @size التحكم في حجم صور الخلفية عبر CSS3
.box-sizing() @boxmodel تغيير نموذج الصندوق لعنصر (على سبيل المثال ، border-boxلعرض كامل input)
.user-select() @select التحكم في اختيار المؤشر للنص على الصفحة
.backface-visibility() @visibility: visible منع وميض المحتوى عند استخدام تحويلات CSS ثلاثية الأبعاد
.resizable() @direction: both اجعل أي عنصر يمكن تغيير حجمه في اليمين والأسفل
.content-columns() @columnCount, @columnGap: @gridGutterWidth اجعل محتوى أي عنصر يستخدم أعمدة CSS3
.hyphens() @mode: auto واصلة CSS3 عندما تريدها (تشمل word-wrap: break-word)

الخلفيات والتدرجات

ميكسين المعلمات إستعمال
#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 يستخدم للأزرار لتعيين حد متدرج وأغمق قليلاً
ملاحظة: إذا كنت ترسل طلب سحب إلى GitHub باستخدام CSS معدل ، فيجب إعادة ترجمة CSS عبر أي من هذه الطرق.

أدوات للترجمة

العقدة مع makefile

قم بتثبيت مترجم سطر أوامر LESS و JSHint و Recess و uglify-js عالميًا باستخدام npm عن طريق تشغيل الأمر التالي:

$ npm install -g أقل jshint recess uglify-js

بمجرد التثبيت ، قم فقط بتشغيل makeجذر دليل التمهيد الخاص بك وستكون جاهزًا تمامًا.

بالإضافة إلى ذلك ، إذا كان لديك watchr مثبتًا ، فيمكنك تشغيله make watchلإعادة بناء bootstrap تلقائيًا في كل مرة تقوم فيها بتحرير ملف في bootstrap lib (هذا ليس مطلوبًا ، فقط طريقة ملائمة).

سطر الأوامر

قم بتثبيت أداة سطر الأوامر LESS عبر Node وقم بتشغيل الأمر التالي:

lessc $ /less/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 لسحب وإفلات تجميع أقل من الملفات. بالإضافة إلى ذلك ، كود المصدر موجود على جيثب .