通过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.btnfont-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:focusborder-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工具,参考我之前写的gulp系列学习笔记:
1、gulp学习笔记1
2、gulp学习笔记2
3、gulp学习笔记3
4、gulp学习笔记4
总结:
通过对bootstrap源码文件的分析,既了解到了less的作用,也明白预处理器流行的原因。其中有很多思想是值得我们学习的。比如编写一个样式框架要考虑哪些因素,如何分工合作等等。
如果你写的页面,样式比较少,不推荐使用less,有点麻烦。当然如果你配置好相关环境了(比如工作中使用gulp或webpack来实现自动化)也就不用在乎了。
如果你要写的样式比较多,推荐使用less。
另外bootstrap官网提供样式定制,如果变动比较小的话,推荐直接修改bootstrap源文件,重新编译就好。
通过bootstrap来学习less相关推荐
- bootstrap基础学习【菜单、按钮、导航】(四)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>boo ...
- Bootstrap的学习分享
大家好,这里是demo软件园,今天为大家分享的是Bootstrap的学习分享. 众所周知Bootstrap是一款简洁.直观.强悍的前端开发框架,让web开发更迅速.简单. 流体布局容器 容器的widt ...
- Bootstrap 框架学习目录
Bootstrap 框架学习目录 转载于:https://www.cnblogs.com/ydchw/p/3708259.html
- bootstrap框架学习笔记
bootstrap框架学习笔记 1.Bootstrap简介 2.基本使用 3.容器 4.设备划分 5.栅格系统 6.展示与隐藏 7.其他类前缀 8.组件直接参考开发文档 1.Bootstrap简介 B ...
- bootstrap 导航学习
参考网站:www.bootcss.com 学习内容:小的导航栏学习,主要通过bootstrap的js以及jquery来学习. 实现效果: 实例代码: 1 <!DOCTYPE html> 2 ...
- 快速构建网站或移动端页面:关于Bootstrap的学习笔记
最近在设计官网,并进行一些项目的原型设计和开发,寻找了很久,想找到一个更简单.快速的方式,基于一些已有的模板或框架进行快速建设,结果发现很多时间都是徒劳,走过的路分享给大家,以防再度踩坑: 网上搜索原 ...
- Bootstrap的学习笔记
1 前言 今天开始学习Bootstrap啦~ 2 布局--container 2.1 container的左右两侧会有空白--px-0 container的两侧可能会出现空白,(如果设置了背景色,就会 ...
- Vue Bootstrap 结合学习笔记(一)
本文是不才在学习Vue和Bootstrap过程中遇到问题解决的一些思路,主要描述了项目搭建,组件封装.获取.编辑.更新的一步步实现,一些解决方案也没找到正确的官方API,还请大拿们多多提点. 项目介绍 ...
- 粤嵌打卡第51天(小白带你进入bootstrap的学习(包含常用的页面插件源码供大家ctr+v))
今天我们来学习下在做项目的过程中如何使用Bootstrap来引入比较美观的样式,学完了这篇博客,大家就可以尽情的使用模板了呀! bootstrap官网:https://v3.bootcss.com/g ...
最新文章
- HTML中常用的实体字符
- ArrayDeque中的取余
- 显式锁select for update 用法
- Java 中的List动态转Map集合
- 这些迹象表明公司即将裁员
- UCML 参与者关键 与依赖关联外键
- [李景山php]每天TP5-20161206|Loader.php-4
- link.exe 的参数
- Web Server 配置及上传文件
- 华为u2000 olt 添加成功,同步网元失败 提示 服务器不可达 解决办法
- AutoPatch java_Java Beta.canAutoPatch方法代码示例
- Tensorflow 版本切换与 slim 问题
- 云班课python测试答案_智慧职教云课堂APPPython程序设计题目答案
- English—句子
- 51单片机教程__模块化编程
- 21款奔驰S400商务型升级原厂HUD抬头显示系统,提升行车安全性
- Metasploit(一) 利用 MS17-010 漏洞进行攻击
- Per tile sequence quality
- 移动端布局介绍——css像素/物理像素/设备像素比
- 富芮坤FR8008A II2C驱动之AW9523B
热门文章
- php gbk字符串 存utf8 html,php utf8 gbk 数组 互转(示例代码)
- 怎样把php文件改成固定大小,php修改上传文件大小限制的方法
- 子程序与中断程序的异同_【干货】plc怎样理解中断功能,其作用是什么?
- logging通过配置文件设置同时输出到终端与文件
- jsr303jsp页面怎么显示错误信息_jsp校验信息不显示
- 信息系统项目管理师:第8章:项目质量管理(2)-章节重点
- 信息系统项目管理师学习方法
- 双数据源其中一个数据源的dao文件报BindingException
- 软件项目管理0710:招标文件准备【求助】
- Flutter学习记录(一、Flutter环境搭建)