css预处理语言less学习笔记

 less的使用方法：1.通过npm使用npm install -g less安装less

                             2.在HTML头部引入less.js文件

                             3.用编辑器的插件

                             4.使用打包工具

less特性：

1.可以使用变量，比如@color：black，在需要使用相应的数据是可直接引用@color，想要调整的时候可以直接针对变量进行修改，这样的话可以直接修改整个程序中所有用到这个变量的地方

2.允许嵌套

以往在针对某一个类及其子元素进行样式设计的时候，往往采用如下方法进行

#photos{
	width:110px;
	height:180px;
	margin:100px auto;
	transform-style:preserve-3d;
    background-size: 100% 100%;
}
#photos img{
	width:100%;
	height:100%;
	position:absolute;
	box-shadow:0 0 8px #eaeaea;
	box-shadow: 1px -1px 6px #666;
	border-radius:4px;
	cursor:pointer;
}

现在就可以这样来写，结构更加清晰明了，可以轻易看出从属结构

#photos{
	width:110px;
	height:180px;
	margin:100px auto;
	transform-style:preserve-3d;
    background-size: 100% 100%;
    img{
    	width:100%;
    	height:100%;
	    position:absolute;
	    box-shadow:0 0 8px #eaeaea;
	    box-shadow: 1px -1px 6px #666;
	    border-radius:4px;
	    cursor:pointer;
    }
    &：hover{
        width:220px;
        height:360px;
    }
}

这里面的&：hover是伪类，&后必须要加上：要不然对应的css里产生的代码就是#photoshover，这样的是没有效果的。

3.混合

在less里面可以用混合，来避免重复编写一些出现率很高的代码

.juzhong(@a){
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@a;
}

在这里，括号内的@a是在引用这一块变量的时候写的，比如

#photo{

        img{

                .juzhong（black）;

        }

}

当然，也可以不加括号也不加那些变量，直接使用混合，混合可以使某一段需要重复利用但又有些微不同的代码不必再写很多次，压缩代码长度，便于管理和修改，在使用完混合之后，还可以加一些其他的属性，比如

#photo{

        img{

                .juzhong（black）;

                border: outset 5px rgb(139,139,255);

        }

}

这样也是可以的，就不必再因为两块代码间的一些小不同来重新写一遍了。

4.继承

在使用less的过程中，可以用#photos:extend(.juzhong)来使photos继承.juzhong的代码，当用.juzhong all的时候，是会连带着把hover等等属性及伪类选择器也继承过来的。

我这段时间大致就学了这么多，less还有很多其他的特性，还有很多便捷的用法，远远不止这里这一点点。