Less开发指南(二)- 基本语法
(一)嵌套规则
【1】less可以让我们以嵌套的方式编写层叠样式,先看下面这段CSS;
.box-a .hd {
height: 20px;
}
.box-a .bd .txt {
color: #000;
}
.box-a .other {
position: relative;
}
在LESS中,可以用嵌套方式写以上代码:
.box-a{
.hd{
height:20px;
}
.bd{
.txt{
color:#000;
}
}
.other{
position:relative;
}
}
代码变更简洁与直观,与DOM树结构很相似。
【2】 & 符号
如果在嵌套规则中,想写串联选择器,而不是写后代选择器,可以用 & 符号,如:hover 伪类写法
.box-a{
.hd{
height:20px;
a{
&:hover{
color:#000;
}
}
} }
编译后:
.box-a .hd {
height: 20px;
}
.box-a .hd a:hover {
color: #000;
}
(二)变量
【1】定义
@名:值; (需要在末尾加上分号)
@color:#f60;
p{
background-color:@color;
}
编译后:
p {
background-color: #ff6600;
}
【2】字符串插入变量值
@url:'../images/';
p{
background:url('@{url}sp.png');
}
编译后:
p {
background: url('../images/sp.png');
}
【3】变量之间赋值
@url:'../images/';
@pageurl:@url; p{
background-image:url('@{pageurl}xxxx.jpg');
}
编译后:
p {
background-image: url('../images/xxxx.jpg');
}
【4】预解析
(1)Less的变量调用,不需要在变量声明后才可以使用;
(2)同一个变量定义多次,在当前作用域中最后一次定义的将被使用
p{
background-image:url('@{url}xxxx.jpg');
} @url:'../images/';
@url:'http://www.xx.com/';
编译后:
p {
background-image: url('http://www.xx.com/xxxx.jpg');
}
(三)混合(Mixins)
【1】调用已有的class或id 属性集
#modA{color:#000;}
.fl{float:left;} p{
#modA;
.fl;
}
编译后:
#modA {
color: #000;
}
.fl {
float: left;
}
p {
color: #000;
float: left;
}
【2】带参数(或者空参数)的混合,编译后不会暴露在css文件中
#modA(){color:#000;}
.fl(){float:left;} p{
#modA;
.fl;
}
编译后(CSS文件没有混合模块的代码):
p {
color: #000;
float: left;
}
【3】设置默认参数
.mixins(@w;@h:100px){
width:@w;
height:@h;
}
p{
.mixins(50px);
}
编译后:
p {
width: 50px;
height: 100px;
}
【4】参数
(1)多个参数可以使用分号或者逗号分隔,推荐使用分号分隔,因为逗号有两重含义:它既可以表示混合的参数,也可以表示一个参数中一组值的分隔符。
(2)如果在混合的定义或者是调用中找到至少一个分号,就会假设参数是使用分号分隔的,所有的逗号都属于参数中的一组值的分隔符。
.mixins(@font;@h){
font:@font;
height:@h;
}
p{
.mixins(12px 'Microsoft yahei',arial;50px);
}
编译后:
p {
font: 12px 'Microsoft yahei', arial;
height: 50px;
}
(3)... 设置不限制参数的个数;@arguments 获取全部的参数值
.mixins(...){
-webkit-transform:@arguments;
-moz-transform:@arguments;
-ms-transform:@arguments;
-o-transform:@arguments;
transform:@arguments; }
p{
.mixins(translate(-10px,-10px));
}
编译后:
p {
-webkit-transform: translate(-10px, -10px);
-moz-transform: translate(-10px, -10px);
-ms-transform: translate(-10px, -10px);
-o-transform: translate(-10px, -10px);
transform: translate(-10px, -10px);
}
【5】同名混合不会覆盖,符合且都会调用
.mixins(){
overflow:hidden;
}
.mixins(){
font:;
}
p{
.mixins();
}
编译后:
p {
overflow: hidden;
font:;
}
【6】匹配
(1)根据参数数量匹配
.mixins(){
overflow:hidden;
}
.mixins(@fz){
font:@fz;
}
.mixins(@w;@h){
width:@w;
height:@h;
}
p{
.mixins(10px);
}
编译后:
p {
font: 10px;
}
(2)指定匹配
.mixins(baidu){
overflow:hidden;
}
.mixins(winds){
font-size:;
} p{
.mixins(baidu);
}
编译后:
p {
overflow: hidden;
}
【7】表达式匹配 Guards,支持的表达式匹配运算符包括:> >= = =< < (注意:相等是 = )
(1)单个条件
.mixins(@type) when(@type=baidu){
overflow:hidden;
} .mixins(@type) when(@type=winds){
font-size:;
} p{
.mixins(baidu);
}
编译后:
p {
overflow: hidden;
}
(2)多条件,用逗号隔开:符合其中之一即可匹配
.mixins(@type) when(@type=baidu),(@type=winds){
overflow:hidden;
} p{
.mixins(baidu);
} h1{
.mixins(winds);
}
编译后:
p {
overflow: hidden;
}
h1 {
overflow: hidden;
}
(3)多条件,用 and 隔开:全部符合才匹配
.mixins(@type;@style) when(@type=baidu)and(@style=blue){
overflow:hidden;
} p{
.mixins(baidu;blue);
} h1{
.mixins(baidu;pink);
}
编译后:
p {
overflow: hidden;
}
(四)递归
可以在定义的混合模块自我调用(递归)
循环输出的例子
.loop(@n;@i:1) when(@i<=@n){
.row-@{i}{
background:url('xxx.jpg') 0 @i*10px no-repeat;
} .loop(@n;(@i+1));
} .bg{
.loop(5);
}
编译后:
.bg .row-1 {
background: url('xxx.jpg') 0 10px no-repeat;
}
.bg .row-2 {
background: url('xxx.jpg') 0 20px no-repeat;
}
.bg .row-3 {
background: url('xxx.jpg') 0 30px no-repeat;
}
.bg .row-4 {
background: url('xxx.jpg') 0 40px no-repeat;
}
.bg .row-5 {
background: url('xxx.jpg') 0 50px no-repeat;
}
(五)作用域
作用域跟其他编程语言类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,逐层递增,直到找到为止,否则报错。
@color:#f60; p{
@color:#333;
background-color:@color;
}
编译后:
p {
background-color: #333333;
}
(六)命名空间
为了更好组织 CSS 或者单纯是为了更好的封装,可以添加命名空间
.index{
.mixins(){
font-size:;
}
} p{
.index > .mixins();
}
编译后:
p {
font-size:;
}
(七)注释
/*编译后保留css原有注释*/
// 同时支持双反斜杠,但编译后不会保留在css文件中
(八)导入(import)
其实就是把样式内嵌到指定的文件中,不会带来额外请求
(1)嵌入less文件
@import "layout.less";
(2)嵌入css文件
@import (inline) "base.css";
(八)避免编译
如果需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法,编译为less文件过程中会出现错误,这时候可以用避免编译来处理。
要输出这样的值我们可以在字符串前加上一个 ~
看下出错的例子:
p{
_top:expression(eval(document.documentElement.scrollTop));
}
编译过程中报错
所以需要用到避免编译的语法
p{
_top:~"expression(eval(document.documentElement.scrollTop))";
}
避免编译也支持字符串插入值
@opacity:50;
p{
opacity:50/100;
filter:~"alpha(opacity=@{opacity})";
}
编译后:
p {
opacity: 0.5;
filter: alpha(opacity=50);
}
总结:以上只是less知识中的冰山一角,更多请关注官网 http://www.lesscss.net/article/home.html
下一章是 less代码跟踪调试 敬请期待
最新文章
- 关于百度地图api测距显示NaN的解决方案
- github不小心同步覆盖了本地文件
- URAL1513. Lemon Tale(dp)
- 学习tolua#&#183;20多个例子
- =====关于swing的一些收集-swing大收集======
- MySQL事务之数据结构
- python学习笔记--easy_install和pip
- Jtree (节点的渲染+资源管理器)
- MongoDB insert performance rapidly dropping
- 基于visual Studio2013解决C语言竞赛题之0601判断素数函数
- 《java.util.concurrent 包源码阅读》18 Exchanger
- 自用公共js文件
- Java注解学习
- 题解 P4753 【River Jumping】
- Hibernate 4.3.11 下问题的解决
- 得到本地电脑IP4地址
- Ext 编辑 comobox编辑源只能选择一个
- Spring Boot笔记四:日志框架介绍
- FreeRTOS队列
- mysql的一些配置优化