CSS_LESS 语法/函数详解

最新推荐文章于 2023-08-14 17:29:33 发布

weixin_34240657

最新推荐文章于 2023-08-14 17:29:33 发布

阅读量77

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/miaowang/blog/204370

版权

2019独角兽企业重金招聘Python工程师标准>>>

嵌套规则

#header { color: black; }
#header .navigation {  font-size: 12px;}
#header .logo { width: 300px; }
#header .logo:hover {  text-decoration: none;}

#header {  color: black;  
    .navigation {  font-size: 12px;}  
    .logo {  width: 300px;
             &:hover { text-decoration: none }
    }
}

变量:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

伪类写法:

a{
    color: red;
    &:hover{color:blue;}
    &:active{color:green;}
}

COLOR颜色函数:

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2);    // return a mix of @color1 and @color2

DEMO_HTML:

谷歌/火狐浏览器适用,IE浏览器不兼容.

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet/less" type="text/css" href="less/styles.less" />
	<script src="less-1.5.0.min.js" type="text/javascript"></script>
</head>
<body>
	<div id="content">
		<div style="height:30px;color:#FFF;background-color:#000;">对照文本颜色</div>
		<h1>这里是标题啦</h1>
		<h2>内容标题文件</h2>
		<h3>再一种颜色</h3>
		<p>一种新颜色</p>
	</div>
<script>
	less.watch(); //自动刷新
</script>
</body>
</html>

转载于:https://my.oschina.net/miaowang/blog/204370