在引导程序中使用 LESS

使用 CSS 预处理器LESS自定义和扩展 Bootstrap ,以利用用于构建 Bootstrap 的 CSS 的变量、mixin 等。

为什么少?

Bootstrap 以 LESS 为核心,这是一种由我们的好朋友Alexis Sellier创建的动态样式表语言。它使开发基于系统的 CSS 更快、更容易、更有趣。

包括什么?

作为 CSS 的扩展,LESS 包括变量、用于可重用代码片段的 mixin、用于简单数学的操作、嵌套,甚至颜色函数。

学到更多

更少的 CSS

访问官方网站http://lesscss.org/了解更多信息。

变量

在 CSS 中管理颜色和像素值可能有点麻烦,通常充满了复制和粘贴。但 LESS 不是——将颜色或像素值分配为变量并更改一次。

混合

您需要在常规 ol' CSS 中进行这三个边界半径声明?现在它们在 mixin 的帮助下缩减到一行,你可以在任何地方重复使用的代码片段。

运营

通过在运行中进行数学运算,使您的网格、领先和更加灵活。乘法、除法、加法和减法使您的 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”,等宽
@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 #eee
@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

关于混入

基本混合

基本的 mixin 本质上是 CSS 片段的包含或部分。它们就像 CSS 类一样编写,可以在任何地方调用。

  1. . 元素{
  2. . 清除修复();
  3. }

参数混合

参数 mixin 就像一个基本的 mixin,但它也接受带有可选默认值的参数(因此得名)。

  1. . 元素{
  2. . 边框-半径4px );
  3. }

轻松添加自己的

几乎所有 Bootstrap 的 mixin 都存储在 mixins.less 中,这是一个很棒的实用 .less 文件,使您可以在工具包中的任何 .less 文件中使用 mixin。

因此,请继续使用现有的,或者根据需要随意添加自己的。

包含的mixin

实用程序

米信 参数 用法
.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() 没有任何 使元素使用衬线字体堆栈
#font > #family > .sans-serif() 没有任何 使元素使用无衬线字体堆栈
#font > #family > .monospace() 没有任何 使元素使用等宽字体堆栈
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight 轻松设置字体大小、粗细和行距
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight 将字体系列设置为衬线,并控制大小、粗细和行距
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight 将字体系列设置为无衬线,并控制大小、粗细和行距
#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对于 full-width input
.user-select() @select 控制页面上文本的光标选择
.backface-visibility() @visibility: visible 使用 CSS 3D 变换时防止内容闪烁
.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 用于按钮分配渐变和稍暗的边框
注意:如果您使用修改后的 CSS 向 GitHub 提交拉取请求, 则必须通过这些方法中的任何一种重新编译 CSS。

编译工具

带有 makefile 的节点

通过运行以下命令,使用 npm 全局安装 LESS 命令行编译器、JSHint、Recess 和 uglify-js:

$ npm install -g less jshint 凹槽 uglify-js

安装后,只需make从引导目录的根目录运行即可,一切就绪。

此外,如果您安装了watchr,您可能会在make watch每次编辑 bootstrap 库中的文件时自动重建 bootstrap(这不是必需的,只是一种方便的方法)。

命令行

通过 Node 安装 LESS 命令行工具并运行以下命令:

$ lessc ./less/bootstrap.less > bootstrap.css

--compress如果您要保存一些字节,请务必包含在该命令中!

Javascript

下载最新的 Less.js并在<head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

要重新编译 .less 文件,只需保存它们并重新加载您的页面。Less.js 编译它们并将它们存储在本地存储中。

非官方 Mac 应用

非官方的 Mac 应用程序会监视 .less 文件的目录,并在每次保存监视的 .less 文件后将代码编译为本地文件。

如果您愿意,您可以在应用程序中切换首选项以自动缩小以及编译文件最终位于哪个目录。

更多 Mac 应用

紧缩

Crunch 是一款外观精美的 LESS 编辑器和编译器,构建于 Adob​​e Air 之上。

代码包

CodeKit 由与非官方 Mac 应用程序相同的人创建,是一个编译 LESS、SASS、Stylus 和 CoffeeScript 的 Mac 应用程序。

简单的

用于拖放编译 LESS 文件的 Mac、Linux 和 PC 应用程序。另外,源代码在 GitHub 上