Bootstrap3实用教程
2.11.1 Less变量
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

表格

表单

按钮

图片

辅助类

响应式工具类

使用Less

Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言,支持变量、mixin、函数等额外功能。

对于希望使用 Less 源码而非编译而来的 CSS 文件的用户,Bootstrap 框架中包含的大量变量、mixin 将非常有价值。

可以通过两种方式使用 Bootstrap:使用编译后的 CSS 文件,或者使用 Less 源码文件。若要编译 Less 文件,请参考编译Bootstrap的内容,以了解如何设置开发环境并运行必须的编译指令。

变量

整个 Bootstrap 项目中使用了大量的变量,这些变量被用来代表颜色、内边距、外边距、字体等。详细内容请参考定制工具

1、颜色

Bootstrap 使用了两种颜色模式:灰度颜色和语义颜色。

灰度颜色用于快速获取常用的黑色色调。如:

@gray-darker:  lighten(#000, 13.5%);  // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%);  // #555
@gray-light:    lighten(#000, 46.7%);  // #777
@gray-lighter:  lighten(#000, 93.5%);  // #eee

得到的颜色如图 2‑84所示:

灰度颜色
图2-84 灰度颜色

语义颜色包含了各种赋予语义的颜色值。如:

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

得到的颜色如图 2‑85所示:

语义颜色
图2-85 语义颜色

在你的项目中,你可以直接使用这些预定义的颜色变量,或者重新为其赋予别名,使其更有语义。如:

// 直接使用
.masthead {
  background-color: @brand-primary;
}

// 使用别名
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

2、脚手架

某几个变量是改变网站外观的关键要素。如:

@body-bg:  #fff;
@text-color: @black-50;

3、链接

仅仅通过改变一个变量,可以很容易地为链接赋予正确的颜色。如:

// 变量
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// 使用
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

注意:@link-hover-color使用了 Less 提供的一个内置函数,用于自动为鼠标悬停设置合适的颜色。你还可以使用darkenlightensaturatedesaturate等 Less 内置的函数。

4、排版

通过几个变量就能轻松的设置字体、字号、行距等。Bootstrap 利用这些变量提供了简单地定制排版的功能。

@font-family-sans-serif:   "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:        Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:         14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:         inherit;

5、图标

以下两个变量用于设置图标文件的位置和文件名。

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

6、组件

组件贯穿整个 Bootstrap 框架,他们通过一些变量来设置默认值。下面列出的是常用的几个。

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:      10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:             6px;
@border-radius-small:             3px;

@component-active-color:         #fff;
@component-active-bg:           @brand-primary;

@caret-width-base:              4px;
@caret-width-large:              5px;

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验