通过bootstrap全面学习less


Posted in Javascript onNovember 09, 2016

        很早之前就听说过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个精彩的专题:

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

Javascript 相关文章推荐
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
vue实现购物车列表
Jun 30 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 #Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 #Javascript
jQuery之动画效果大全
Nov 09 #Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 #Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 #Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 #Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 #Javascript
You might like
php除数取整示例
2014/04/24 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
隐性调用php程序的方法
2015/06/13 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
在windows系统中实现python3安装lxml
2016/03/23 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
python实现简单图书管理系统
2019/11/22 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
网络方面基础面试题
2012/11/16 面试题
前台文员的岗位职责
2013/11/14 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
党员批评与自我批评
2014/10/15 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书