之所以用这个标题呢,主要是最近调侃杰伦太有意思了。

好吧,开个玩笑而已。

如果你了解过Less,并对之很熟悉,就不用往下看了。

如果你没用过,恭喜,这是一个入门级的教程,学会了它,可以为你节省10%的绳命。

首先,我们得知道Less能干什么。如:

@width:300px;
@fonts:12px bold "宋体,Verdana";
.block-header{
color:#5c5c5c;
.elem-title{
font:@fonts;
width:@width;
}
.elem-content{
width:@width;
height:300px;
}
}
.block-footer{
font:@fonts;
width:@width + 100px;
}

最后编译出来的css是这样的:

.block-header {
color: #5c5c5c;
}
.block-header .elem-title {
font: 12px bold "宋体,Verdana";
width: 300px;
}
.block-header .elem-content {
width: 300px;
height: 300px;
}
.block-footer {
font: 12px bold "宋体,Verdana";
width: 400px;
}

如何安装(主要是基于sublime编辑器,其他编辑器自行google)

用less进行编译css,有很多途径,可以用nodejs。当然我们希望以最简单的方式来完成,比如:新建一个 test.less文件,按 ctrl +s 即编译成 test.css.

要实现我所描述的功能,你只需要下载一个sublime编辑器,

1)打开sublime:

ctrl + shift + p

将出现如下界面:

2)输入:LessToCss

点击后即可安装

3)注:LessToCss对lessc.cmd有依赖,如果是mac,则比较简单,只需要在终端输入: npm install less -gd

等下载完就算完成了所有配置。跳过 4)。

4)windows下,LessToCSS对lessc.cmd有依赖,请下载:

https://github.com/duncansmart/less.js-windows/releases后 将其路径(i.e:  E:/Less)添加至系统环境变量中:

5)重启sublime.

6)新建一个文件:test.less   。把上面我写的复制进去,ctrl+s. 你能看到在你目录下自动生成了test.css.

安装方法二(管用,第一个方法没成功):

插件下载地址: download github

  1.解压压缩包

  2.将文件夹lessc拷贝到Sublime Text 2\Data\Packages 下

使用帮助:

  使用时,每保存*.less 文件时会自动编译生成 同名的.css文件。

  在菜单 Preferences>Package Settings>Lessc>Settings 中可以设置是否压缩编译后的css

  不想使用该插件 可以禁用此包(Package Control:Disable Package选择lessc)也可直接删除lessc文件夹卸载插件

注:默认 在  xx.less文件的同级目录下生成 xx.css,且自动压缩。

通过:Preference —— Package Settings —— Less2Css ——Setting Default 可以看默认配置:

{
"lesscCommand": false,
"lessBaseDir": "./",
"outputDir": "./",
"outputFile": "", //[example.css] if left blank uses same name of .less file
"minify": true, //默认压缩
"minName": false,
"autoCompile": true,
"showErrorWithWindow": false,
"main_file": false,
"ignorePrefixedFiles": false
}
如果的dev环境中不想压缩,可以通过 Preference —— Package Settings —— Less2Css ——Setting User 增加:
{"minify": false}

到这里,你应该已经学会如何安装了。

语言特性快速预览——这里其实可以参考官网,我也是从哪抄来的

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

less源码:

@color: #4D926F;

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

less编译后:

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

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

less源码:

.rounded-corners (@radius: 5px) {     //泪如雨下啊:有了这个函数,以后再也不用每个样式里面写那么多兼容了,每次只要.rounded-corners(8px)   .rounded-corners(10px).  Awesome
-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);
}

less编译后:

#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;
}

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

less源码:

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

less编译后:

#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;
}

4)函数和运算:  运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。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%);
}

less编译后:

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

就这么多,语法是不是 so easy?

参考:

http://www.lesscss.net/article/home.html

http://www.cnblogs.com/wuya16/p/LessToCss.html

 

自从用了Less 编写css,你比以前更快了~(sublime编译)的更多相关文章

  1. 开始编写CSS

    本文由大漠根据Krasimir Tsonev的<Starting to Write CSS>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文, ...

  2. Emmet快速编写CSS样式

    基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin. 1.而对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如: ...

  3. 编写css代码的方式

            css(层叠样式表) 在一个网页中主要负责了页面的数据样式.       编写css代码的方式:       第一种: 在style标签中编写css代码. 只能用于本页面中,复用性不强 ...

  4. (转)在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]

    写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的 ...

  5. CSS vs. JS Animation: 哪个更快

    CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...

  6. CSS 和 JS 动画哪个更快

    基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...

  7. CSS VS JS动画,哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  8. WTF Forms – 使用 CSS 实现用户体验更好的表单

    WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...

  9. css重修之书(一):如何用css制作比1px更细的边框

    如何用css制作比1px更细的边框 在项目的开发过程中,我们常常会使用到border:1px solid xxx,来对元素添加边框: 可是1px的border看起来还是粗了一些粗,不美观,那么有什么方 ...

  10. QT就是别人好心帮你做一些枯燥,并且很重复的代码编写工作,让你更好的把精力投入到你界面的逻辑和功能的实现的功能库(否则写了上万行代码了,才写出个BUG一大堆的毛坯)

    好了,现在开始记录我学习QT的学习历程 . 本人也不是计算机专业出来的,自学了一点,但还是不好找工作,于是参加了培训,虽然感觉没多学到什么 编程的学习生涯就是不断的看别人的源码,然后自己参考着写写自己 ...

随机推荐

  1. 一天一个mysql函数(二) FIND_IN_SET()

    in和FILD_IN_SET() 的区别: select id, list, name from table where FIND_IN_SET( 'daodao' , list) 所以如果list是 ...

  2. WinServer 之 Windows Server 2008 R2安装IIS

    1.在"服务器管理器"中选择"添加角色",如下图: 2.在"服务器角色"步骤选择"Web 服务器(IIS)",如下图: ...

  3. Eclipse插件的安装方法

    转自:http://blog.csdn.net/zhangyabinsky/article/details/7043435 Eclipse插件的安装有两种方法 :一个是在线安装,另一个就是手动安装. ...

  4. myeclipse2014如何添加源码反编译工具插件

    Eclipse下的Java反编译插件:Eclipse Class Decompiler,整合了目前最好的2个Java反编译工具Jad和JD-Core,并且和Eclipse Class Viewer无缝 ...

  5. webservice发布接口

    一:编写接口程序,计算功能类,有加减乘除四个方法 /** * */ package com.hlcui.util; /** * @author Administrator 将此类发布为公共接口 */ ...

  6. GDB基本调试

    调试时gcc -g -Wall -o Hello Hello.c gdb Hello -tui -g: 生成调试信息 -Wall: 编译器警告信息 -W: 警告信息 在调用GDB时,命令行指定-tui ...

  7. hdu 4612 边连通度缩点+树的最长路径

    思路:将以桥为分界的所有连通分支进行缩点,得到一颗树,求出树的直径.再用树上的点减去直径,再减一 #pragma comment(linker, "/STACK:1024000000,102 ...

  8. Codevs 3729==洛谷P1941 飞扬的小鸟

    P1941 飞扬的小鸟 456通过 2.4K提交 题目提供者该用户不存在 标签动态规划2014NOIp提高组 难度提高+/省选- 提交该题 讨论 题解 记录   题目描述 Flappy Bird 是一 ...

  9. 修改ie版本的注册表webbroswer

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Exp ...

  10. 纯css 写三角形

    <div style="width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid tr ...