less学习

/*变量定义时不加{};
如果表示属性，在使用时也不加{};
如果表示选择器，则使用时要加{};
如果作为属性，但是是字符串时，也需要加{}，类似于字符串模板。*/

@color: color;
@dialog: .dialog;
@suffix: fix;

@hi: ‘hello ‘;
@dear: there ;

.dialog{
background-@{color}: #888;
@{color}:blue;
}

@{dialog}{
width:200px;
}

@{dialog}::after{
content: ‘:@{hi}@{dear}!’;//虽然作为属性，但是充当字符串模板
}

@h:1000px;

.ie-@{suffix}{
@h: 30px;//局部变量优先
height: @h;
line-height: 30px;
}
@dialog-border-color: #666;
@dialog-border-width: 10px;
@dialog-border-width: 1px; // 3. 以最后定义的值为最终值；

//列表类型
@colors: #fff,#0f0,#f0f;
.skin{
color: extract(@colors, 0);//extract为内置函数，可以通过索引获取列表元素
height: 12px * length(@colors);//length为内置函数，可以获取列表元素大小
}

//嵌套
.main{
padding: 10px;

div {
width:100px;
}
.aside{
width: 200px;
}
}

/*父选择器引用:
1、采用&引用完整的父选择器
2、可通过追加和预追加的方式加工&，从而生成新的选择器
3、通过&::after等方式添加伪元素、伪类样式规则集合
4、同一个选择器可使用多个&
5、通过在选择器后添加‘空格&’的方式，可将当前选择器排列到最前面
6、&指向组选择器时，会生成新的组选择器
*/

@bg:#aaa;
.ps1 .btn{
background-color: @bg;
border-radius: 5px;
&:hover{
background-color: lighten(@bg,30%);
cursor: pointer;
}

&-msg,&-eof{
    color: blue;
}
.no-borderradius &{
    background-image: url('img/btn-bg.png');
}

}

.dummy1, .dummy1{
&:hover{
color: red;
}
& + &{
font-size: 12px;
}
}

//导入指定(import)
/less样式文件可通过@import ‘文件路径’；引入外部的less文件/

//继承（extend）
//语法形式：:extend(){} 和 {&:extend()}
.animal{
color: #fff;
}

/1、语法:extend(){}/
.bear:extend(.animal){
width: 100px;
height: 100px;
}

/2、语法{&:extend()}/
.bear{
&:extend(.animal);
width: 100px;
height: 100px;
}

/3、父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外/
*.parent{
height: 100px;
.hair{
color: #fff;
}
[name=eyes]{
color: #345;
}
}

//匹配失败
// .son:extend(.parent){}
// .son:extend(.hair){}

//匹配成功
.son:extend(*.parent [name=’eyes’]) {}
.son:extend(*.parent [name=’eyes’]) {}

//下面的内容会生成.son,.son .hair,*.son[name=eyes]三个选择器
.son:extend(.parent all){}

/4、父选择器不支持变量形式/

@p1: .parent1;
@p2: .parent2;
.parent1{
height: 100px;
}

@{p2} {
height: 100px;
}

//匹配失败
//.son1:extend(@{p1}){}

//匹配成功
.son2:extend(.parent1){}

/*5、media query 影响继承的作用域
media query内的extend操作，仅能继承当前块的其他选择器样式
注意：不能extend当前media query块内部的子media query块中的选择器样式；
但是可以extend父media query块内的选择器样式
非media query内的extend操作，将会继承所有media query中匹配的选择器样式*/

.parent1{
height: 200px;
}

@media screen{
.parent1{
height:100px;
}
//无法继承media query块的选择器样式
.son1:extend(.parent2){}
@media(min-width:1023px){
//继承父media query块中的选择器样式
.son2:extend(.parent1){}
.parent2{
width: 200px;
}
}
}
//media query外的extend操作，继承所有media query中匹配的选择器样式
.son:extend(.parent1){}

/混合MIXIN：会将样式规则内联到调用的位置中/

//1、类选择器、id选择器自动被定义为mixin，而且具有命名空间
.animal{
.human{
#fsj{
.hair{
color: #000;
}
}
}
}

.front-end-monkey{
.animal.human#fsj.hair;
}

//2、显示定义不带参数和带参数的样式库，不会输出到最终输出中，仅供调用。

//定义不带参数的mixin
.animal(){
color: #000;
}

//定义带参数的mixin
//注意：由于，和；均可用于参数分隔符，但由于如background、border等样式属性支持属性值组，推荐用；
.dog(@type; @age) {
height: @type * @age *12px;
}

//定义带参数默认值的mixin
.cat(@type;@age:1){
height: @type *@age *5px;
}

//调用才会出现最终输出
.chihuahua{
.dog(1;2);
}

//mixin内置两个特殊的对象@arguments和@reset。@arguments代表mixin的所有入参，而@reset代表mixin的…入参组
//可以理解为js中的函数，通过传参来实现生产不同的样式
.dog(@type;@age;@rest…){
height: @type * @age *12px;
border: @rest;
}

.cat(@solid;@w;@color){
border: @arguments;
}

.chihuahua{
.dog(1;2;solid;1px;red);
}
.mimi{
.cat(solid;2px;blue);
}

//mixin的重载可定义多个同名的mixin，调用时只要参数数量匹配则会执行相应的mixin

.dog(@name){
&::after{
content:@name;
}
}

.dog(@name;@age){
height: @age *4px;
}

.dog(@name;@age;@width:20px){
height: @age * 12px;
width: @width;
}

//仅匹配到.dog(@name)
.one-dog{
.dog(‘chihuahua’);
}

//参数的模式匹配，当第一个参数为mimi是时调用该mixin
.cat(mimi;@age){
height:@age * 22px;
}

.cat(@any;@age){
color: #f3c;
}

//选择、循环作业控制机制，作为一个编程语言，还是要有这种条件和循环语句的

//条件匹配
//true值匹配，仅实参为true才匹配成功
.truth(@a) when (@a) {
&::after{
content: @a;
}
}

//匹配成功
.truth1 {
.truth(true);
}

//匹配失败
.truth2 {
.truth(#fff);
}

/*类型判断函数
iscolor
isnumber
isstring
iskeyword
isurl*/

.bear(@color) when (iscolor(@color)){
color:@color;
}

/*单位判断函数
ispixel
ispercentage
isem
isunit*/

.bear(@height) when (ispixel(@height)) {
height: @height;
}

//=,>,>=,<=,<关系运算符
.rich(@h) when (@h > 1000){
height: @h;
}

//and ,not, or 逻辑运算符
.huge(@h,@w) when (@h > 180) and (@w > 180){
height: @h;
width: @w;
}

//使用递归实现循环
.generate-columns(4);
.generate-columns(@n,@i:1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% /@n);
}

.generate-columns(@n,(@i+1));

}

//运算符
//less还支持+、-、*、/运算符。但对单位不一致的运算数进行运算时需要注意：
//1、运算数与运算符间必须用空格分隔；
//2、以第一个运算数的单位作为运算结果的单位；
// 错误写法，没有空格
// .fail: 1px +2em;
// .fail{
// height: @fail;
// }

@success1: 1px + 2em;
.success1 {
height: @success1;
}

//函数
//less提供了一个功能强大的内置函数库，其中绝大多数为颜色处理 函数。

//default()函数必须用在条件控制中，相当于else和switch语句中的default,如：
.person(@age) when (@age < 13){
height: @age * 6px;
}

.person(@age) when (@age <= 19) and (@age >= 13){
height: @age * 10px;
}

.person(@age) when(default()) {
height: 180px;
}

//escape函数是对字符串中的特定字符进行编码，如\