星巴克网站建设ppt,电商网站建设小强,wordpress 主题 宠物,安卓开发平台有哪些less的每一个语句后必须使用;结束#xff0c;否则可能无法正确的转换成css
1、导入
即在当前less文件中引用其它less文件#xff0c;被引入的less文件中的内容可以在此less文件中使用。在引用less文件时可以省略扩展名
import global; // global.…less的每一个语句后必须使用;结束否则可能无法正确的转换成css
1、导入
即在当前less文件中引用其它less文件被引入的less文件中的内容可以在此less文件中使用。在引用less文件时可以省略扩展名
import global; // global.less
import comm.less;
import index.css;
2、注释
less的注释有两种
一种为单选注释以“//”开头“//”后的内容为注释的内容
// import comm;
另一种为多行注释以“/*”开头以“*/”结束中间的内容为注释的内容
/*
import comm.less; */
3、嵌套
嵌套是指子或后代元素的选择器可以定义在父或祖先元素的选择器中
1嵌套的使用
ullia href#链接1/a/lilia href#链接2/a/lilia href#链接3/a/li
/ul
ul{list-style: none;li{ //后代border:1px solid red;height: 30px;a{ //子color:#fff;}}
}
以上代码转换成css后为以下代码
ul {list-style: none;
}
ul li {border: 1px solid red;height: 30px;
}
ul li a {color: #fff;
}
2引用父或祖先选择名称
在内部使用”“可以引用外部选择器的名称
li{:hover{a{color:blue;}}-a{color: green;}
}
以上代码转换成css后为以下代码
li:hover a {color:blue;
}
li-a{color: green;
}4、扩展
扩展使用:extend关键字通过扩展可以把一个选择器与其它已存在的选择器组成并集而它自己定义的样式会单独为一个选择器
div{height: 30px;
}
p:extend(div){whidth:30px;
}
以上代码转换成css后为以下代码
div, p {height: 30px;
}
p {whidth: 30px;
}5、混合mixin
即一个选择器中直接引用另一个选择器的名称可以把另一个选择器中的样式直接复制过来。但要注意被引用的选择器只能是类或是id选择器
.div{height: 30px;
}
p{.div();width:30px;
}
以上代码转换成css后为以下代码
.div{height: 30px;
}
p {height: 30px;width: 30px;
}
6、声明变量
变量的声明和使用有以下几个特点
1变量名总是以开头定义的变量要以在整个less文件任意地方使用
2如果在引用时需要与其它内容拼接则需要使用{变量名}的语法来引用。
3变量可以进行算术运算。
4如果变量的值本身包含特殊符号如空格等可以使用引号括起来。但前面在加上”~“
width: 10px;
height: width 10px;
a: acitve;
color: fff;
border : ~1px solid #000;ul{.{a}{height: height;line-height: height;width: width * 2;color: #{color};border: border;}
}
以上代码转换成css后为以下代码
ul .acitve {height: 20px;line-height: 20px;width: 20px;color: #fff;border: 1px solid #000;
}
7、变量作用域
变量可以less文件中定义这种变量称为全局变量也可以在一个选择器中定义这种变量称为局部变量。全局变量可以在整个less文件中使用但局部变量只能在当前选择器中使用。当全局变量和局部变量重名时按照就近原则会使用局部变量。在变量的作用域中变量的声明和使用的顺序没有关系。可以先声明变量再使用也可以先使用再声明变量
var : 10px;
.header{height: var; var :20px;img{height: var;}
}
以上代码转换成css后为以下代码
.header {height: 20px;
}
.header img {height: 20px;
}
8、函数
函数可以通过传入参数生成不同的结果参数名与变量的命名规则相同如果要设置默认值可以在变量名后使用”:“来定义。函数名只能以”.“或是”#“开头
.fun(w,h : 20px,c){height: h;line-height: h;width: w;border :1px solid c;
}.{a}{.fun(10px,20px, #000);
}
以上代码转换成css后为以下代码
.acitve {height: 20px;line-height: 20px;width: 10px;border: 1px solid #000;
}
9、条件结构
函数可以使用when 关键字指定是否执行如果when的结果为true函数会被执行如果为false函数将不会被执行。
示例
函数名(参数) when (条件表达式)
示例
/* 当参数load的值为true时函数才会被执行 */
.fun(height,load) when (load true){height : height;line-height : height;
}.active{width : 100%;.fun(30px,true); /* 执行函数生成代码 */
}
注意
1when与小括号之间必须有空格
2when后可以执行条件比较如等于、大于、小于、大于等于、小于等于
/* 当height大于等于30时执行函数 */
.fun(height) when ((height 30px){ height : height;line-height:height
}.active{width:50px;.fun(30px);
}
3多个括号之间可以使用and并且、or或者来组合多个条件也可以使用,或者来组合多个条件
/* 当height大于20 并且 小于 40时执行函数 */
.fun(height , center) when (height 20px) and (height 40px) {height : height;line-height:height
}.active{width:50px;.fun(30px);
}
4当and和or同进使用时and的优先级比or高可以使用括号来提升优先级
/* 当center为true时或者height大于20 并且 小于 4时执行函数 */
.fun(height , center) when (center true) , ((height 20px) and (height 40px)){height : height;line-height:height
}.active{width:50px;.fun(30px);
} 5可以使用not来表示非。
/* 当height不等于20时执行函数 */
.fun(height) when not (height 20px){height : height;line-height:height
}.active{width:50px;.fun(10px);
}
10、循环
less本身没有专门的循环结构但可以使用条件结构来实现即在函数中调用自己并在函数中改变when的值直到条件不成立。结束函数的执行。这种结构相当于递归。
示例
.fun(i) when (i 4){ width: i;.fun(i 1); /*每次加1再传到函数当传的值大于4的时候函数结束*/}.active{width:50px;.fun(1);
}
