LESS学习笔记 —— 入门

他叫自己MR.张

发布于 2019-07-01 17:13:45

3850

发布于 2019-07-01 17:13:45

文章被收录于专栏：Android必知必会 Android必知必会Android必知必会

今天在网上完成了LESS的基础学习，下面是我的学习笔记。总共有三个文件：index.html、main.less、mian.css，其中 mian.css 是 main.less 经过Koala编译之后自动生成的。下面是代码：

——index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Less</title>
	<link rel="stylesheet" href="style/main.css">
</head>
<body>
	<div class="div1"></div>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3_1"></div>
	<div class="box3_2"></div>

	<div class="radius_test1"></div>
	<div class="radius_test2"></div>
	<div class="clear"></div>
	<div class="sanjiao_demo"></div>
	<div class="sanjiao_t1"></div>
	<div class="sanjiao_t2"></div>
	<hr>
	<div class="box4"></div>
	<ul class="list">
		<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
		<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
		<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
		<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
		<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
		<li><a href="">这是一段文字</a><span>2014-11-26</span></li>
	</ul>
</body>
</html>

——mian.less

@charset "utf-8";
body{
	margin: 0px;
	padding: 0px;
	background-color: #DFDFDF;
}
div{margin: 5px;}
.clear{ clear: both;}
/*一、注释
 *注释有2中
 */
/*第一种注释，会显示在编译后的CSS文件中*/
//第二种注释，不会显示在编译后的CSS文件中

/*二、变量
 *先定义后使用，格式为 @name:value
 *注意name应遵循基本的变量名规则，value要带上单位
 */
//定义
@width_200:200px;
@height_300:100px;
//使用
.div1{
	width: @width_200;
	height: @height_300;
	background-color: #53616D;
}

/*三、混合
 *1.直接引用某个类的所有属性
 *2.引用带参数无默认值的类属性
 *3.引用带参数有默认值的类属性
 */
 //混合 1
.box{ width: 200px;height: 50px; float: left;}
.border{
	border: solid 5px #3ECAAF;
}
.box1{
	.border;//直接类名即可
	.box;
}
//混合 2 带参数无默认值
.border2(@border_width){
	border: solid @border_width #3ECAAF;
}
.box2{
	.box;
	.border2(10px);//因为无默认值，调用时必须带()且传入参数
}
//混合 3 带参数有默认值
.border3(@border_width:7px,@bstyle:solid){
	border: @bstyle @border_width #3ECAAF;
}
.box3_1{
	.box;
	.border3();//有默认值，可不传参数
}
.box3_2{
	.box;
	.border3(9px,dotted);//有默认值，传参可以覆盖默认值
}
//Demo 圆角
.border_radius(@radius:5px){
	-wekit-border-radius: @radius;
	-max-border-radius: @radius;
	border-radius: @radius;
}
.radius_test1{
	.box;
	.border();
	.border_radius();
}
.radius_test2{
	.box;
	.border();
	.border_radius(20px);
}

/*四、匹配模式
 

*/
//应用背景：三角
.sanjiao_demo{
	width: 0px;
	height: 0px;
	overflow: hidden;
	border-width: 10px;
	border-color: transparent transparent red transparent;
	border-style: dashed dashed solid dashed;//解决IE6黑边问题
}
//4.1 匹配模式下写三角
.sanjiao(top,@w:5px,@c:#f00){
	border-width: @w;
	border-color: transparent transparent @c transparent;
	border-style: dashed dashed solid dashed;
}
.sanjiao(bottom,@w:5px,@c:#f00){
	border-width: @w;
	border-color: @c transparent transparent transparent;
	border-style: solid dashed dashed dashed;
}
.sanjiao(@_,@w:5px,@c:#f00){
	width: 0px;
	height: 0px;
	overflow: hidden;
}
.sanjiao_t1{
	.sanjiao(top,20px);
}
.sanjiao_t2{
	.sanjiao(bottom,15px,blue);
}

//4.2 匹配模式 - 定位
.pos(r){position: relative;}
.pos(a){ position: absolute;}
.pos(f){ position: fixed;}
.pipei{
	.box;
	background-color: green;
	.pos(r);
}
/*
五、运算
！！！【加减】运算符与前一个变量之间有空格，否则出错
*/
@abase:300px;
.box4{
	width: (@abase - 20)*2;//变量和运算符之间有空格
	height: @abase + 3;
	height: @abase/2;
	color: #000+100;
	.border;
}
/*六、嵌套规则*/
/*一般的写ul li a 的方式
.list{}
.list li {}
.list a {}
.list a:hover {}
.list span{}
*/
.list{
	width: 800px;
	margin: 30px auto;
	padding: 0;
	list-style: none;
	li{
		height: 30px;
		line-height: 30px;
		background-color: pink;
		margin-bottom: 5px;
	}
	a{
		display: block;
		float: left;
		//&符号代表上一层选择器
		&:hover{
			color: red;
		}
	}
	span{
		display: block;
		float: right;
	}
}
/*七、@arguments变量
	@arguments代表形参中的所有参数
*/
.border_arg(@w:30px,@c:red,@sty:solid){
	border:@arguments;//等价于border:@w @c @sty;
}
/*八、避免编译和important
在使用Less中，可能用到一些非正规或者不需要计算的内容时，前面加~符号
*/
//8.1 避免编译
.test_no1{
	width: ~'calc(300px - 30px)';//特殊方法，需要浏览器去计算
}
.test_no2{
	width: calc(300px - 30px);//对比上面的
}
//8.2 important,为所有引用的属性加上important
.test_important{
	.border!important;
}

——main.css

@charset "utf-8";
body {
  margin: 0px;
  padding: 0px;
  background-color: #DFDFDF;
}
div {
  margin: 5px;
}
.clear {
  clear: both;
}
/*一、注释
 *注释有2中
 */
/*第一种注释，会显示在编译后的CSS文件中*/
/*二、变量
 *先定义后使用，格式为 @name:value
 *注意name应遵循基本的变量名规则，value要带上单位
 */
.div1 {
  width: 200px;
  height: 100px;
  background-color: #53616D;
}
/*三、混合
 *1.直接引用某个类的所有属性
 *2.引用带参数无默认值的类属性
 *3.引用带参数有默认值的类属性
 */
.box {
  width: 200px;
  height: 50px;
  float: left;
}
.border {
  border: solid 5px #3ECAAF;
}
.box1 {
  border: solid 5px #3ECAAF;
  width: 200px;
  height: 50px;
  float: left;
}
.box2 {
  width: 200px;
  height: 50px;
  float: left;
  border: solid 10px #3ecaaf;
}
.box3_1 {
  width: 200px;
  height: 50px;
  float: left;
  border: solid 7px #3ecaaf;
}
.box3_2 {
  width: 200px;
  height: 50px;
  float: left;
  border: dotted 9px #3ecaaf;
}
.radius_test1 {
  width: 200px;
  height: 50px;
  float: left;
  border: solid 5px #3ECAAF;
  -wekit-border-radius: 5px;
  -max-border-radius: 5px;
  border-radius: 5px;
}
.radius_test2 {
  width: 200px;
  height: 50px;
  float: left;
  border: solid 5px #3ECAAF;
  -wekit-border-radius: 20px;
  -max-border-radius: 20px;
  border-radius: 20px;
}
/*四、匹配模式
 

*/
.sanjiao_demo {
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 10px;
  border-color: transparent transparent red transparent;
  border-style: dashed dashed solid dashed;
}
.sanjiao_t1 {
  border-width: 20px;
  border-color: transparent transparent #ff0000 transparent;
  border-style: dashed dashed solid dashed;
  width: 0px;
  height: 0px;
  overflow: hidden;
}
.sanjiao_t2 {
  border-width: 15px;
  border-color: #0000ff transparent transparent transparent;
  border-style: solid dashed dashed dashed;
  width: 0px;
  height: 0px;
  overflow: hidden;
}
.pipei {
  width: 200px;
  height: 50px;
  float: left;
  background-color: green;
  position: relative;
}
/*
五、运算
！！！【加减】运算符与前一个变量之间有空格，否则出错
*/
.box4 {
  width: 560px;
  height: 303px;
  height: 150px;
  color: #646464;
  border: solid 5px #3ECAAF;
}
/*六、嵌套规则*/
/*一般的写ul li a 的方式
.list{}
.list li {}
.list a {}
.list a:hover {}
.list span{}
*/
.list {
  width: 800px;
  margin: 30px auto;
  padding: 0;
  list-style: none;
}
.list li {
  height: 30px;
  line-height: 30px;
  background-color: pink;
  margin-bottom: 5px;
}
.list a {
  display: block;
  float: left;
}
.list a:hover {
  color: red;
}
.list span {
  display: block;
  float: right;
}
/*七、@arguments变量
	@arguments代表形参中的所有参数
*/
/*八、避免编译和important
在使用Less中，可能用到一些非正规或者不需要计算的内容时，前面加~符号
*/
.test_no1 {
  width: calc(300px - 30px);
}
.test_no2 {
  width: calc(270px);
}
.test_important {
  border: solid 5px #3ECAAF !important;
}

转载请注明（本人独立博客）：时光本无罪 » LESS学习笔记 —— 入门

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2014年11月26日，如有侵权请联系 cloudcommunity@tencent.com 删除

css

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

html

登录后参与评论

0 条评论

热度

LESS学习笔记 —— 入门

LESS学习笔记 —— 入门

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐