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

好吧,开个玩笑而已。

如果你了解过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. 小白日记23:kali渗透测试之提权(三)--WCE、fgdump、mimikatz

    WCE windows身份认证过程 http://wenku.baidu.com/view/cf2ee127a5e9856a56126017.html #特例在登陆的目标服务器/系统,有一个w摘要安全 ...

  2. 炼数成金hadoop视频干货04

    视频地址:http://pan.baidu.com/s/1dDEgKwD 这一节讲的全是理论 任务执行优化 : 1.推测式执行: 2.重用JVM: 3.忽略模式. 除了手动修改Log4J.proper ...

  3. 不支持关键字:metadata

    将 string sqlConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["Cos ...

  4. C#打开指定目录,并将焦点放在指定文件上。相对路径(程序起动的目录)

    string basepath = AppDomain.CurrentDomain.BaseDirectory; string filepath = "logs\\Log.log" ...

  5. LeetCode 343

    Integer Break Given a positive integer n, break it into the sum of at least two positive integers an ...

  6. hdu 4009 最小树形图

    思路:唯一一个值得一提的就是建一个0号根节点,往每个房子建一条边,权值为房子的高度乘以X. #include<iostream> #include<cstdio> #inclu ...

  7. ORACLE 小写金额转大写金额

    Create Or Replace Function Money2Chinese(Money In Number) Return Varchar2 Is strYuan Varchar2(); str ...

  8. CSS之导航菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. SQL_CURSOR_游标循环

    ) DECLARE My_Cursor CURSOR --定义游标 FOR (SELECT column1 FROM #temp1) --查出需要的集合放到游标中 OPEN My_Cursor; -- ...

  10. jQuery 的插件 dataTables

    ---恢复内容开始--- jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量 ...