互联网技术发展太快了,想想前几年还在手动改一行行修改CSS文件。直至现在Less的出现,less支持变量,类似函数调用,使得CSS更加容易维护和编写。上手非常容易,官方也提供了详细的资料。
/* less学习备忘 */ /*1.一种注释,可以在css文件中显示*/ //另一种注释,不在css文件中显示 // 2.变量以@开始,正如php变量以$开始 @test_width:100px; .border{ border: solid 5px pink; } .content{ background-color: red; width: @test_width; height: @test_width; .border; // 混入 } .radius(@myradius:20px){ -webkit-border-radius:@myradius; -moz-border-radius:@myradius; border-radius: @myradius; } #rd{ width: 100px; height: 100px; background-color: yellow; // 3.混入(类似函数调用) .radius(); } // 4.匹配模式,相当于js中的if语句,if(top){}else if(bottom){} .triangle(top,@w:5px,@c){ // width: 0px; // height: 0px; // overflow: hidden; border-width: @w; border-color: transparent transparent @c transparent; border-style: solid; } .triangle(bottom,@w:20px,@c:red){ border-width: @w+10; // 5.变量可参与+-*/运算 border-color: @c transparent transparent transparent; border-style: solid; } // 6.@_用于添加公共部分代码 .triangle(@_,@w:20px,@c:red){ width: 0px; height: 0px; overflow: hidden; } .tangle{ .triangle(bottom); } // 7.嵌套规则,非常实用的一个功能 .news{ width: 300px; margin: 30px auto; padding: 0px; list-style: none; li{ // news li {} height: 30px; line-height: 30px; background-color: yellow; margin-bottom: 5px; padding: 0 10px; } a{ float: left; &:hover{ // &: 相当于 news a:hover{} color: red; } } span{ float: right; } } // 8.@arguments,参数比较多时,可直接用关键字@arguments代替 .border_arg(@s:solid,@w:5px,@c:red){ border: @arguments; } .br{ .border_arg(); // 9.避免编译,直接在语句前加上~ //width: calc(30px-5px); width: ~'calc(30px-5px)'; }
更多介绍见:lesscss.net
Less编译工具:koala-app.com/index-zh.html
相关推荐
less
Less,一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。 极大的减少...
less 实例 z.less html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } fieldset, img { border:none; } img{display: block;} address, ...
less code, more efficient for android, for the best android tools library! Overview > support more effective methods than android > high performence > easy integration > small size (only 45k~ by ...
EST是一个基于Less的样式工具库,帮助您更轻松地书写Less代码。该项目由EFE团队开发而来,项目托管在GitHub上。 EST(EFE Styling Toolkit)是一个基于Less的样式工具库,帮助您更轻松地书写Less代码。EST提供了一...
less_translate_v1_1_6
LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法...
Learn More Study Less中文版,提高个人学习效率
Title: Less Web Development Essentials, 2nd Edition Author: Bass Jobsen Length: 211 pages Edition: 1 Language: English Publisher: Packt Publishing Publication Date: 2015-04-30 ISBN-10: 178355407X ISBN...
less.js是前端界面使用less语言时必用的解析工具包,用于对less语言的响应。
less ,移动端less常见问题处理less ,移动端less常见问题处理less ,移动端less常见问题处理
AutoMakeLess 是 一个简单的Less监视编译软件,支持windows,mac,linux,通过网页进行管理. 功能 文件变更监视,当文件创建,修改,删除,改名都会在第一时间进行处理. 1.1 文件创建时会自动进行编译,如果这个文件是从...
less.js, less 转 css 工具
less&sass代码示例,里面包含了less的基本语法教程,sass的基本教程
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展,Less 是基于 JavaScript 的,使用 Less 编写样式最简单的方式可以在 页面中引入 less.min.js 即可
用于处理html页面中直接引入的.less样式,不用将less编译成css后后再引入
编译后easy-less插件
EST(ECOM Styling Toolkit)是一个基于 LESS 的样式工具库,帮助您更轻松地书写 LESS 代码。EST提供了一系列方便 快捷的 mixin,只在调用时才输出代码。est 不希望提供直接给 HTML 调用的类名,用「样式类...
资源名称:Less CSS内容简介:像写程序一样写 CSSLess CSS 是一个 CSS 预处理器,通过简单的语法和变量对 CSS 进行扩展,可减少很多 CSS 的代码量。LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数...
HELP>Install New Software>ADD(name:less,location:选择less.zip包)>勾选LESS 1.0.22>左下Contact all updatesites during install to find required software必须勾选>一直NEXT,然后会下载点东西(必须联网),有...