最近在写css的时候，发现自己写的css特别长，觉得自己写的特别low，所以为了加快自己的开发效率，又重新温习了less，下面就是我学习less的过程。
less是不能被浏览器识别的，要转换成css，有两种方式：
1、硬转换less.js：https://raw.githubusercontent.com/less/less.js/v2.5.3/dist/less.min.js
2、less编译器 npm install less -g -》lessc style.less style.css
如果想要压缩的版本 还需要安装 less-plugin-clean-css npm install less-plugin-clean-css -》lessc style.less style.css -clean-css
less 是什么
1、是一种预编译语言2、有面向对象的思想
less解决什么问题
1、css前缀长2、css代码复用
less的语法
1、function杂项函数字符串函数列表函数数学函数类型函数颜色定义函数颜色通道函数颜色操作函数颜色混合函数2、语言特性变量混合嵌套规则& 表示当前选择器的父选择器四则运算自定义的函数命名空间作用域3、嵌套思维4、&思维
less语法
.transition(@duration:1s){
-webkit-transition:
@arguments;
-moz-transition:
@arguments;
-o-transition:
@arguments;
-ms-transition:
@arguments;
transition:
@arguments;
}
.transform(@rotate:360deg){
-webkit-transform:
rotate(@rotate);
-moz-transform:
rotate(@rotate);
-o-transform:
rotate(@rotate);
-ms-transform:
rotate(@rotate);
transform:
rotate(@rotate);
}
.outer{
margin:
50px;
width:
200px;
height:
200px;
border:
solid 1px green;
@shadowColor:
#000;
.inner{
margin:
20px;
height:
100px;
width:
100px;
background:
lightblue;
box-shadow:
0 0 5px 0 @shadowColor;
.transition(@duration:
0.5s);
}
&:hover {
.inner{
box-shadow:
0 0 5px 0 lighten(@shadowColor, 30%);
.transform();
}
}
}
.mixin(@x){
z-index:
@x;}
.span1{
color:
color("#aaa");
box-shadow:
image-size("./1.png");
width:
image-width("./1.png");
height:
image-height("./1.png");
transition:
convert(1s, "ms");
.mixin(3);
display:
block;
margin-top:
unit(5,px);
z-index:
get-unit(5px);
}
@list :bold,"b","c","d";
.span2{
display:
block;
color:
escape("red");
font-family:
replace("Times New Roman", "Times New Roman", "arial");
z-index:
length(@list);
font-weight:
extract(@list, 1);
}
.span3{
display:
block;
z-index:
ceil(3.3);
z-index:
floor(3.7);
width:
percentage(.5);
z-index:
round(2.33);
z-index:
round(1.53,1);
z-index:
sqrt(36);
z-index:
abs(-5);
z-index:
max(1, 2);
z-index:
min(1,2);
}
.span4{
display:
block;
color:
rgb(90, 129, 32);
color:
rgba(123, 12, 34,0.5);
}
@red:red;
.span5{
display:
block;
opacity:
alpha(#eee);
color:
lighten(@red, 30%);
border:
solid 1px darken(@red, 50%);
}
.@{
red}{
color:
red;
}
@url:"./";
.span6{
display:
block;
.red;
width:
100px;
height:
100px;
background:
url("@{url}
1.png");
}
.inline{
display:
inline-block;
color:
green;
}
.span7{
a{
color:
yellow;
}
&:extend(.inline);
}
.a,#b{
color:
blue;
}
.span8{
.a();
}
.loop(@counter) when (@counter>0){
.loop(@counter - 1);
width:
(10px * @counter);
}
.span9{
.loop(3);
& {
color:
#9a9a9a;
}
}
less写购物商城的例子
@import "reset.min.css";
@fff:#ffffff;
.float(@direction:left){
float:
@direction;
}
html body{
width:
100%;
height:
100%;
background:
#f4f4f4;
}
.container{
margin:
20px auto;
width:
1200px;
overflow:
hidden;
}
.header{
background:
@fff;
span{
.float();
width:
90px;
height:
50px;
line-height:
50px;
text-align:
center;
font-size:
14px;
}
a{
&:
extend(.header span);
width:
auto;
padding:
0 15px;
color:
#999;
&:
hover{
color:#e01d20;
}
}
}
.productBox{
margin-top:
20px;
width:
1210px;
li{
.float();
margin:
0 10px 10px 0;
a{
display:
block;
width:
unit(1210/5-10-6-32, px);
border:
3px solid transparent;
padding:
0 16px;
background:
@fff;
img{
display:
block;
width:
100%;
}
p{
line-height:
20px;
height:
40px;
overflow:
hidden;
font-size:
14px;
color:
#999;
}
span{
line-height:
30px;
color:
#555;
font-size:
16px;
}
&:hover{
border-color:
#101d20;
border-radius:
5px;
box-shadow:
0 0 5px 0 #333;
}
}
}
}
转载于:https://www.cnblogs.com/dirkhe/p/9314918.html
