通过bootstrap来学习less

2024-04-06 01:35•JavaScript•阅读 474

　　很早之前就听说过less了，但是一直拖着没去学习。最近抽空看了less，其实语法很简单，看一遍基本就知道怎么用了。平时自己写页面用less的话，感觉是方便了些，但是难道less的好处就只是这样？

　　刚好最近也在学习bootstrap，发现其源文件就是用less写的，看了之后，我才深深体会的less的好处与强大，对less也有了更深一层的理解。

1、Less是什么？

　　LESS CSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

　　有些人可能没有接触过less，那我们就先可以简单的看看less的一些特性。

2、语言特性快速预览：

变量：

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

LESS源码：

@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

编译后的CSS：

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

混合（Mixins）

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

LESS源码：

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

编译后的CSS：

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

LESS源码：

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

编译后的CSS：

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

函数和运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

LESS源码：

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

编译后的CSS：

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

　　想具体学习less，可以访问 http://www.1024i.com/demo/less/document.html

3、bootstrap中less的使用

　　下载 Bootstrap，解压缩文件。Bootstrap 的 Less 组件位于less目录下，其中包含至少20多个less文件，那为什么要分成这么多个呢？主要是方便开发，后期也便于维护，另外就是便于用户修改样式。

　　开发人员在编写样式的时候，首先对页面的元素和作用效果进行分离，比如form，button，responsive，tables等等。然后分别编写，虽然是独立编写，但是有些样式是全局要用的，比如提醒的颜色，页面的背景色都是同一种。但是less文件很可能是多个人同时编写的，那怎么来确保样式的统一呢。这时候，less的作用就显现出来了。

　　我们可以看看 variables.less 文件里的内容，下面节选了一部分：

// Grays
// -------------------------
@black:                 #000;
@grayDarker:            #222;
@grayDark:              #333;
@gray:                  #555;
@grayLight:             #999;
@grayLighter:           #eee;
@white:                 #fff;

/*
.........省略部分.....................
*/

// Typography
// -------------------------
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;

@baseFontSize:          14px;
@baseFontFamily:        @sansFontFamily;
@baseLineHeight:        20px;
@altFontFamily:         @serifFontFamily;

@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight:    bold;    // instead of browser default, bold
@headingsColor:         inherit; // empty to use BS default, @textColor

从上面可以看出，开发人员已经为一些常用的样式变成变量的形式。并且每一个变量的名字都很具体，只要一看就知道这是要设置什么。那具体是怎样用的呢？我们来看看buttons.less文件，同样是节选部分：

// Base styles
// --------------------------------------------------

// Core
.btn {
  display: inline-block;
  .ie7-inline-block();
  padding: 4px 12px;
  margin-bottom: 0; // For input.btn
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  border: 1px solid @btnBorder;
  *border: 0; // Remove the border to prevent IE7's black border on input:focus
  border-bottom-color: darken(@btnBorder, 10%);
  .border-radius(@baseBorderRadius);
  .ie7-restore-left-whitespace(); // Give IE7 some love
  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");

怎么样，是不是很方便。妈妈再也不用担心我傻傻写错样式了。上面只是列举了了变量这一特性是使用，当然你还可以在其他文件上发现其他特性的使用。

4、合并编译less文件

文件都写好了，那怎么把它变成bootstrap.css呢。这里有个文件很重要，那就是bootstrap.less。最后只需要编译该文件就可以得到css文件了。我们来看看里面到底写了啥：

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// CSS Reset
@import "reset.less";

// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";

// Base CSS
@import "type.less";
@import "code.less";
@import "forms.less";
@import "tables.less";

// Components: common
@import "sprites.less";
@import "dropdowns.less";
@import "wells.less";
@import "component-animations.less";
@import "close.less";

// Components: Buttons & Alerts
@import "buttons.less";
@import "button-groups.less";
@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less

// Components: Nav
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";

// Components: Popovers
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";

// Components: Misc
@import "thumbnails.less";
@import "media.less";
@import "labels-badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
@import "hero-unit.less";

// Utility classes
@import "utilities.less"; // Has to be last to override when necessary

　　bootstrap.less作用是将其他less文件全部引入，但是引入的顺序还是有要求的。比如先引入 variables.less 和 mixins.less，是因为后面的less文件用到的less特性都是来自于这两个文件的，如果不先引入，就会出现编译错误的问题。然后再引入 reset.less 重置原有的样式。接着引入网格系统的相关文件，这是整个网格系统建立的关键所在。然后引入一些公用的组件，特定组件，最后就是一些无家可归但是比较有用的样式样式文件：utilities.less。

最后要做的就是编译bootstrap.less生成bootstrap.css文件。

编译方法: