修改 bootstrap :用 less 来写 css 编译less
2013-09-06 10:08
281 查看
写 css 有多种方式,最简单的做法是打开记事本,一行一行的直接手写。嗯,我就这么写了好多年。当然编辑器不一定用记事本,可以用 notpad++ 或 vim、或 dreamweaver、或其他……
什么是 less ?
如果你写的 css 足够多,就会发现有些地方是重复的。比如你希望页面头部宽度 width 是960px,中间也是 960px,页脚也是 960px,你知道它们是一样的,但不得不重复……如果你是程序员,肯定希望在 css 的语法中,要是有一个变量该多好!比如,我定义一个宽度的变量 @width:960px,然后在所有需要设置页面宽度的地方,都填上 @width,既省了时间,也避免了错误,还方便以后一次修改,全部生效。
less 就是这样一个 css 的增强语法系统。其实所有语法加起来,应该挺简单的,前提是你熟悉 css。如果你对 css 很陌生,那还是先熟悉 css 再说。
less 的官方网址是:http://lesscss.org,但好像要翻墙才能访问。但非常幸运,还有一个翻译成中文的网站:http://www.lesscss.net,
内容基本一样(我们这里不感谢党,也不感谢领导,而是感谢做这个网站的朋友)。这个网站就一个页面,一个很长很长的页面,你从头往下看,看完了,也就学完了。
现在,请允许我假设,你花10分钟大致看完 less 语法。所以,这篇文章将不再讨论如何写 less 的话题,而是其他事情——
当你用 less 这种增强型的语法写完 css 之后,需要将一堆变量转成实际的 css 代码,因为浏览器并不支持 less(要是浏览器能够默认支持该多好!)。这种将 less 代码转成 css 的过程,我们叫做“编译”。编译工具很多,下面我们谈在 windows 下最简单的做法(我尝试了很多种工具,下面这种是最简单的)。
使用 WinLess 编译
1、到 http://winless.org 下载工具 WinLess,然后点击安装。
2、建立一个文件夹,比如 MyLessTest,并在其中建立子文件夹 less 和 css
MyLessTest
--less
--css
3、打开 WinLess,如下图,点击 Add folder 按钮,将刚才建立的 MyLessTest 添加进去(注意:不是添加 less 文件夹,而是它的上层目录 MyLessTest,方便将结果输出到 less 的同级目录 css)
4、WinLess 右侧会出现所有的 less 文件(如果没有出现,请点击“Refresh”按钮进行刷新),以及输出的路径(output file)。
5、选中需要编译的文件,比如 “bootstrap.less”(注意:请不要全选,在这里,其他一些文件只是被 bootstrap.less 引用而已),点击 “Compile” 按钮开始编译。然后,请打开 less 的同级目录 css 查看结果。
到此为止,编译过程全部完成。
题外话:为什么使用 less ?因为我们在 wojilu 框架中使用了 bootstrap 这个UI框架,而 bootstrap 的 css 是使用 less 写的。所以,学习 less 就成了必须的任务。
在线编译
因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到。比如 http://less.cnodejs.net http://www.ostools.net/less 一般都有两个框,左侧输入less,右侧呈现编译的
css,方便在线学习和测试。
修改 bootstrap 中的 less
如下图,入口文件是 bootstrap.less 和 responsive.less 文件——
这个入口文件 bootstrap.less 是这样引用其他 less 文件的:
了解这份 less 的内容很有必要。通过这个入口文件,逐步了解 bootstrap 的全部内容,才能更加方便的自定义它。
比如,如果要修改每栏 column 的宽度,可以打开 variables.less ,修改其中的 @gridColumnWidth 变量的值。
什么是 less ?
如果你写的 css 足够多,就会发现有些地方是重复的。比如你希望页面头部宽度 width 是960px,中间也是 960px,页脚也是 960px,你知道它们是一样的,但不得不重复……如果你是程序员,肯定希望在 css 的语法中,要是有一个变量该多好!比如,我定义一个宽度的变量 @width:960px,然后在所有需要设置页面宽度的地方,都填上 @width,既省了时间,也避免了错误,还方便以后一次修改,全部生效。
less 就是这样一个 css 的增强语法系统。其实所有语法加起来,应该挺简单的,前提是你熟悉 css。如果你对 css 很陌生,那还是先熟悉 css 再说。
less 的官方网址是:http://lesscss.org,但好像要翻墙才能访问。但非常幸运,还有一个翻译成中文的网站:http://www.lesscss.net,
内容基本一样(我们这里不感谢党,也不感谢领导,而是感谢做这个网站的朋友)。这个网站就一个页面,一个很长很长的页面,你从头往下看,看完了,也就学完了。
现在,请允许我假设,你花10分钟大致看完 less 语法。所以,这篇文章将不再讨论如何写 less 的话题,而是其他事情——
当你用 less 这种增强型的语法写完 css 之后,需要将一堆变量转成实际的 css 代码,因为浏览器并不支持 less(要是浏览器能够默认支持该多好!)。这种将 less 代码转成 css 的过程,我们叫做“编译”。编译工具很多,下面我们谈在 windows 下最简单的做法(我尝试了很多种工具,下面这种是最简单的)。
使用 WinLess 编译
1、到 http://winless.org 下载工具 WinLess,然后点击安装。
2、建立一个文件夹,比如 MyLessTest,并在其中建立子文件夹 less 和 css
MyLessTest
--less
--css
3、打开 WinLess,如下图,点击 Add folder 按钮,将刚才建立的 MyLessTest 添加进去(注意:不是添加 less 文件夹,而是它的上层目录 MyLessTest,方便将结果输出到 less 的同级目录 css)
4、WinLess 右侧会出现所有的 less 文件(如果没有出现,请点击“Refresh”按钮进行刷新),以及输出的路径(output file)。
5、选中需要编译的文件,比如 “bootstrap.less”(注意:请不要全选,在这里,其他一些文件只是被 bootstrap.less 引用而已),点击 “Compile” 按钮开始编译。然后,请打开 less 的同级目录 css 查看结果。
到此为止,编译过程全部完成。
题外话:为什么使用 less ?因为我们在 wojilu 框架中使用了 bootstrap 这个UI框架,而 bootstrap 的 css 是使用 less 写的。所以,学习 less 就成了必须的任务。
在线编译
因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到。比如 http://less.cnodejs.net http://www.ostools.net/less 一般都有两个框,左侧输入less,右侧呈现编译的
css,方便在线学习和测试。
修改 bootstrap 中的 less
如下图,入口文件是 bootstrap.less 和 responsive.less 文件——
这个入口文件 bootstrap.less 是这样引用其他 less 文件的:
了解这份 less 的内容很有必要。通过这个入口文件,逐步了解 bootstrap 的全部内容,才能更加方便的自定义它。
比如,如果要修改每栏 column 的宽度,可以打开 variables.less ,修改其中的 @gridColumnWidth 变量的值。
相关文章推荐
- 修改 bootstrap :用 less 来写 css
- Css编译之Less入门
- IDEA编译less插件LESS CSS Compiler的安装
- 将less编译成css的gulp插件
- 使用nodeJs来安装less及编译less文件为css文件的方法
- 在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
- 只会CSS还不够,LESS、SASS、BootStrap、Foundation一网打尽!
- 本地或者是koala软件编译less文件为css
- PHP Strom 配置less 并设置编译后在远程开发模式下自动上传css文件
- bootstrap引入cdn后无法修改CSS样式---CSS优先级机制
- Less 编译生成 css
- 把Fireshell中的sass模块替换为less编译css
- 用webstorm自动编译less产出css和sourcemap
- 详解Angular-cli生成组件修改css成less或sass的实例
- Gnome3提取gnome-shell.css以及修改和编译
- Webpack安装(2)-打包css、scss、less(包括编译、分离)
- PHP Strom 配置less 并设置编译后在远程开发模式下自动上传css文件
- 使用sublimeText3编译less后css被压缩解决办法
- Yii2-禁用和修改加载样式表-disable Bootstrap Js, JQuery and CSS
- 在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]