通过bootstrap全面学习less

很早之前就听说过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文件。

编译方法:

如果你用的编辑器是 sublime text 安装less2css插件,使用需要nodejs环境,还有一个less的插件(这个你在使用的时候会提醒你缺少某个插件,然后安装就可以了)。
用前面说的gulp工具,已经给出教程了

总结:

  通过对bootstrap源码文件的分析,既了解到了less的作用,也明白预处理器流行的原因。其中有很多思想是值得我们学习的。比如编写一个样式框架要考虑哪些因素,如何分工合作等等。

  如果你写的页面,样式比较少,不推荐使用less,有点麻烦。当然如果你配置好相关环境了(比如工作中使用gulp或webpack来实现自动化)也就不用在乎了。

  如果你要写的样式比较多,推荐使用less。

  另外bootstrap官网提供样式定制,如果变动比较小的话,推荐直接修改bootstrap源文件,重新编译就好。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • js中less常用的方法小结

    1.color 解析颜色 把代表颜色的字符串转换为颜色值 @c:'#000' .box{ background:color(@c) } 2.data-uri 把我们需要使用的素材图片转化成BASE64编码 ,项目中尤其是移动端的项目,节省了图片的加载时间,是图片优化的一个手段:LESS对于大图片是不能转码的,我们可以使用BASE64工具转码(tool.css-js.com) 项目中慎用,当你在移动端项目中有一些大图实在没有办法处理了的情况下在使用BASE64. @c:'#000' @url:'.

  • 认识less和webstrom的less配置方法

    今天完成的事情: 首先第一件事情是,整理一下常用的颜色摄取 #F1F1F1 google的设置页面的body的背景颜色 #FFF 为google的内容块的背景颜色 另外就是学习test11中提到的less 一.跳出less和sass的战斗.网上一大堆的互相撕逼,看来各有春秋啊!但是对我这菜鸟的人说,我不管它们的得失.我只管知道预处理是一个好主意,管它是那种. 都是为了偷懒,不就是要让css更加自能化吗! 在知乎上有位"海皮飞"的博主提出了如下场景. 1. 要做各种内核都兼容的圆角效果,

  • Bootstrap组件学习之导航、标签、面包屑导航(精品)

    导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- <link rel="stylesheet" >--> <link rel="stylesheet" href="css/bootst

  • BootStrap入门学习第一篇

    本文实例为大家分享了BootStrap入门学习的第一篇,供大家参考,具体内容如下 1.环境搭建 中文官网下载地址:http://www.bootcss.com/ 右击选中的WEB项目,点击导入,选择文件系统,然后下一步,选择BootStrap文件目录路径,如下: 完成后,WEB项目下的css.img.js就出现相应文件,说明导入成功. 然后导入较新版本的JQuery库,目录结构如下: 至此环境搭建完成. 3.BootStrap基本模板 <!DOCTYPE html> <html lang

  • Bootstrap面板学习使用

    本文实例为大家分享了Bootstrap面板的具体实现代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu

  • Bootstrap选项卡学习笔记分享

    本文实例为大家分享了Bootstrap选项卡的学习笔记,供大家参考,具体内容如下 tab选项卡 <body> <div class="container"> <!-- tab选项卡 --> <ul class="nav nav-tabs"> <li class="active"><a href="#pan1" data-toggle="tab"

  • 通过bootstrap全面学习less

    很早之前就听说过less了,但是一直拖着没去学习.最近抽空看了less,其实语法很简单,看一遍基本就知道怎么用了.但是问题又来了,那我在什么时候用less呢.平时自己写页面用less的话,感觉是方便了些,但是难道好处就只是这样? 刚好最近也在学习bootstrap,发现其源文件就是用less写的,看了之后,我才深深体会的less的强大,对less也有了更深一层的理解. 1.Less是什么? LESS CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动

  • 第一次记录Bootstrap table学习笔记(1)

    第一次使用Bootstrap-table这个表格插件,记录一下使用过程中遇到的问题. |引入CSS文件 <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> |引入相关库 我们需要引入Jquery库.bootstrap库.以及bootstrap-table.j

  • Bootstrap基础学习

    Bootstrap是一个基于栅格结构的前端结构框架(当然也有JS,JQuery),它的优点是内容框架能够迅速搭建起来,基于媒介查询可以使搭建的页面迅速的适应不同的用户端,无论是手机,平板,还是PC,基本上都能自适应,当然新版本已经开始不支持IE6了,对IE8的支持也很有限,毕竟IE8对HTML5的支持不太好,(说实话,我自己也不喜欢IE6~8,对于我这种初级选手来说,兼容性有时候真费劲,不仅项目上要用,连面试也要用,有没有搞错嘛,遇到了,上网查一下不就行了.发个牢骚,该会的还是得会啊!!!) 闲

  • Bootstrap table学习笔记(2) 前后端分页模糊查询

    在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下,顺便做个总结: 1.前端分页 2.后端分页 3.模糊查询 前端分页相当简单,在我添加了2w条测试数据的时候打开的很流畅,没有卡顿. $(function(){ a(); }); function a () { $('#yourtable').bootstrapTable({ url: "/user/getUserList/", method:"post", dataType: "json&

  • 值得分享和收藏的Bootstrap学习教程

    首先先感谢朋友们对小编的支持,关注小编的文章,和小编一起学习进步,一直的陪伴,小编也一定会再接再厉,为大家分享更多精彩的文章. 在分享的过程中遇到了一些问题,这也给了我很大的启发,大家在搜索相关文章时都没有针对此类问题进行的系统整理文章,这也是小编需要在今后进行改进的. 所以本文就吸取这个经验,针对Bootstrap教程进行系统整理,希望对大家的学习有所帮助,便于大家学习. 小编的水平能力都很有限,还望大牛多给一些建议和看法,帮助小编进行改正和提高,如果文中确有不妥之处,还请谅解.希望能和大家共

  • Bootstrap学习笔记之css样式设计(2)

    首先,很感谢各位朋友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的:Bootstrap学习笔记之css样式设计(1) 这次我们来看看bootstrap中关于样式的一些具体关键的类以及如何使用这些类,类与类之间的区别,另外涉及到的一些相关类,举列子的时候解释. 一.表单 1.form-control类:含有此类的<input><select><te

随机推荐