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>

参考资料
原文网站