web前端之less的使用

web前端之less的使用

软件:koala进行对less的翻译

代码:
style.less

@background:#ddd;

/*命名空间*/
#mynamespace { 
    .divModel(@radius:5px){
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        -ms-border-radius: @radius;
        -o-border-radius: @radius;
        border-radius: @radius;
        margin-top:10px;
        margin-left:10px;
        float:left;

    }
     .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ 
        -moz-box-shadow: @arguments; 
        -webkit-box-shadow: @arguments; 
        box-shadow: @arguments; 
     } 
 }





#div1{
    width:300px;
    height:300px;
    background:@background;
    #mynamespace>.divModel(15px);   
    #mynamespace>.boxShadow(2px,2px,3px,#f36); 
    span{
        #mynamespace>.divModel(10px);
        width:200px;
        height:200px;
        background:red;

        a{
            #mynamespace>.divModel(10px);
            width:100px;
            height:100px;
            background:black;

            &:hover{//有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
                background:yellow;
            }
            &:after{
                content:"- 台词";
                background-color:yellow;
                color:red;
                font-weight:bold;           
            }
        }
    }
    &:hover{
        #mynamespace>.boxShadow(2px,2px,3px,#c63); 
        background:#ccc;
    }
}
#div2{
    background:@background;
    #mynamespace>.divModel;
    #mynamespace>.boxShadow(2px,2px,3px,#f36); 

    @media (min-width: 0px){
        background:blue;
        width:50px;
        height:50px;
    }
    @media (min-width: 768px){
        background:red;
        width:100px;
        height:100px;
    }
    @media (min-width: 992px){
        background:green;
        width:200px;
        height:200px;
    }
    @media (min-width: 1200px){
        background:yellow;
        width:300px;
        height:300px;
    }
}
#div3{
    background:@background;
    width:200px;
    height:200px;
    #mynamespace>.divModel(25px);
    #mynamespace>.boxShadow(2px,2px,3px,#f36); 
    @media (min-width: 0px){
        background:blue;
        width:200px;
        height:200px;
    }
}

style.css:

/*命名空间*/
#div1 {
  width: 300px;
  height: 300px;
  background: #dddddd;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  -moz-box-shadow: 2px 2px 3px #ff3366;
  -webkit-box-shadow: 2px 2px 3px #ff3366;
  box-shadow: 2px 2px 3px #ff3366;
}
#div1 span {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  width: 200px;
  height: 200px;
  background: red;
}
#div1 span a {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  width: 100px;
  height: 100px;
  background: black;
}
#div1 span a:hover {
  background: yellow;
}
#div1 span a:after {
  content: "- 台词";
  background-color: yellow;
  color: red;
  font-weight: bold;
}
#div1:hover {
  -moz-box-shadow: 2px 2px 3px #cc6633;
  -webkit-box-shadow: 2px 2px 3px #cc6633;
  box-shadow: 2px 2px 3px #cc6633;
  background: #ccc;
}
#div2 {
  background: #dddddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  -moz-box-shadow: 2px 2px 3px #ff3366;
  -webkit-box-shadow: 2px 2px 3px #ff3366;
  box-shadow: 2px 2px 3px #ff3366;
}
@media (min-width: 0px) {
  #div2 {
    background: blue;
    width: 50px;
    height: 50px;
  }
}
@media (min-width: 768px) {
  #div2 {
    background: red;
    width: 100px;
    height: 100px;
  }
}
@media (min-width: 992px) {
  #div2 {
    background: green;
    width: 200px;
    height: 200px;
  }
}
@media (min-width: 1200px) {
  #div2 {
    background: yellow;
    width: 300px;
    height: 300px;
  }
}
#div3 {
  background: #dddddd;
  width: 200px;
  height: 200px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  margin-top: 10px;
  margin-left: 10px;
  float: left;
  -moz-box-shadow: 2px 2px 3px #ff3366;
  -webkit-box-shadow: 2px 2px 3px #ff3366;
  box-shadow: 2px 2px 3px #ff3366;
}
@media (min-width: 0px) {
  #div3 {
    background: blue;
    width: 200px;
    height: 200px;
  }
}

1.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
    <div id="div1">
        <span>
            <a></a>

        </span>

    </div>
    <div id="div2">

    </div>
    <div id="div3">

    </div>
</body>
</html>

参考资料
原文网站