Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，可让Css更具维护性，主题性，扩展性。
本文为Less入门与语法梳理，包括一些入门级例子，适合对Less有入门级了解的开发者查阅。
LESS 源文件的引入方式与标准 CSS 文件引入方式一样：
在我们需要引入 LESS 源文件的 HTML 中加入如下代码：
导入文件：
@import “variables.less”;@import “variables.css”;/*也可以将标准的 CSS 文件直接改成 .less 格式*/
变量与作用域
/*用变量管理值*/ @width : 20px; //全局变量 #homeDiv { #centerDiv{ width : @width; // 此处应该取最近定义的变量 width 的值 30px } @width : 30px; //局部变量，变量和混合是延迟加载的，不一定要在使用前声明 } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px } /*用变量管理选择器名称、URLs、属性*/ @mySelector: banner; // 定义一个变量用于选择器名称 @images: "img"; // 变量可以是字符串 @property: color; // 定义一个变量用于属性名称 .@{mySelector} { //选择器名称使用变量的用法 background: url("@{images}/white-sand.png"); //URLs使用变量的用法 @{property}: #0ee; …… //其它常规属性等 } /*编译生成的CSS文件*/ .banner { background: url("img/white-sand.png"); color: #0ee; …… }
变量可以嵌套定义与使用
@fnord: "I am fnord.";@var: "fnord";content: @@var;//嵌套使用content: "I am fnord."; //编译后结果/*当一个变量定义两次时，只会使用最后定义的变量，Less会从当前作用域中向上搜索。*/
数值，颜色和变量可运算
@init: #111111;@transition: @init*2;@var: 1px + 5 // Less能够判断颜色和单位之间的区别.switchColor { color: @transition; } /*编译生成的CSS文件*/ .switchColor { color: #222222; }
混合（Mixins）与函数
.roundedCorners(@radius:5px) { //定义参数并且给予默认值 -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 在另外的样式选择器中使用 #header { .roundedCorners; //使用类并且参数为默认值 } #footer { .roundedCorners(10px); //自定义参数值 } .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; /*在另一个规则集内部使用上面类的属性，则直接访问属性所在类名（或Id名）即可*/ }
@arguments变量：当 Mixins 引用这个参数时，该参数表示所有的变量（多参数）。
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments; } #header { .boxShadow(2px,2px,3px,#f36); }
命名空间
#mynamespace { .home {...} .user {...} } //如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user
嵌套规则
top
查看更多关于CSSLESS框架基础_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did105286