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

好吧，开个玩笑而已。

如果你了解过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.

注:默认在 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

转载于:https://www.cnblogs.com/wuya16/p/LessToCss.html

自从用了Less 编写css，你比以前更快了~相关推荐

[css] 在实际编写css中你有遇到过哪些浏览器兼容性的问题？怎么解决的？
[css] 在实际编写css中你有遇到过哪些浏览器兼容性的问题?怎么解决的? 必用的三个工具PostCSSAutoprefixerBrowserslist 个人简介我是歌谣,欢迎和大家一起交流前后端 ...
提高编写CSS代码效率的10个习惯
提高编写CSS代码效率的10个习惯 1.保持一贯性. 就像其它的任何事一样,值得一直保持一贯性.保持连贯性,而不是想到什么就给id和class命名什么. CSS的级联样式有利于加深你的记忆,而且充分利 ...
react 改变css样式_web前端入门到实战：编写CSS代码的8个策略，资深开发工程师总结...
编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性.我认为这主要是因为许多开发人员对组织CSS / HT ...
我为什么要用 Javascript 编写 CSS？
曾经的前端开发中,JavaScript.CSS.HTML 作为三大独立的技术,各司其职,互不干涉.然而随着组件结构 React 的出现,将 HTML.CSS.JavaScript 强制混合在一起,这就 ...
编写css代码的方式
html 在一个网页中负责的事情是一个页面的结构 css(层叠样式表) 在一个网页中主要负责了页面的数据样第一种: 在style标签中编写css代码. 只能用于本页面中 ...
前端 css 通用css_编写CSS简易方法简易前端
前端 css 通用css If you have just started writing CSS codes it's highly likely that you are having a har ...
CSS vs. JS Animation: 哪个更快
CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...
CSS 和 JS 动画哪个更快
基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...
将python编程为c_使用Cython为Python编写更快的C扩展
在我们这个包含了 7 个 PyPI 库的系列文章中学习解决常见的 Python 问题的方法. Python 是当今使用最多的流行编程语言之一,因为:它是开源的,它有广泛的用途(例如 Web 编程.业务 ...
人类和编译器谁编写的代码更快？你们的答案也许都是错的
作者 | Jussi 译者 | 明明如月出品 | CSDN(CSDNnews) 现代的优化编译器真的很神奇.他们有成千上万的技巧让蹩脚的代码运行得非常快,比大多数人手写的速度还要快.这使得一些人声称 ...

自从用了Less 编写css，你比以前更快了~

首先，我们得知道Less能干什么。如：

如何安装（主要是基于sublime编辑器，其他编辑器自行google）

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

自从用了Less 编写css，你比以前更快了~相关推荐

最新文章

热门文章