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>