less 基本使用方法 及 实例

利用less和scss变写一个demo

html

<article>
		<div class="module">
			<div class="module-top">
				<div class="module-top-left">
					<span class="bus-num">418</span>
					<p class="bus-time">首班车5:40  末班车：23:00</p>
				</div>
				<div class="module-top-right">
					<p class="p-first">龙岗&emsp;- - &emsp;南山</p>
					<p>GangDing&emsp;&emsp;&emsp;&emsp;AoTi</p>
					<p class="p-last">华强北</p>
				</div>
			</div>
			<div class="module-center">
				<span>龙岗中路</span><!-- Latest compiled and minified CSS -->
				<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
				<span class="three">华强北</span>
				<span class="three">华强北</span>
				<span>深圳大学</span>
				<span class="thre">北京路</span>
				<span>深圳大学</span>
				<span>深圳大学</span>
				<span>南山中路</span>
			</div>
			<div class="module-bottom">
				<p>单一票价&emsp;&emsp;无人售票&emsp;&emsp;主动投币&emsp;&emsp;不舍找零</p>
				<span class="span-first"></span>
				<span class="span-last"></span>
			</div>
		</div>
	</article>

less

@article_width:700px;
@article_height:350px;
@main_bg_color:#dedede;
@bg_color:green;
@font_size:14px;
@font_family:"microsoft yahei";

// 函数等start  
	//水平居中
	.auto_center(@margin_tb:0){
		margin:@margin_tb auto;
	}

   // 字体设置；
   .font_style(@fc:#fff,@fs:@font_size,@ff:@font_family){
   	color:@fc;
   	font-size: @fs;
   	font-family: @ff;
   }
	// 浮动设置
	.float_up(@fu:left){
		float: @fu;
	}
	// display 设置；

	.display_set(@d:inline-block){
		display: @d;
	}

	.border_css(@w:1px, @c:red,@s:solid){
		border:@arguments;
	}

	.padding_set(@t:20px,@r:0px,@b:0px,@l:0px){
		padding:@arguments;
	}

// 右三角

.triangle-less(top,@w:10px,@c:red){
	border-color:transparent transparent transparent @c;
}

// 匹配所有三角
.triangle-less(@_,@w:10px,@c:red){
	width:0;
	height:0;
	border-width:@w;
	border-style:solid;
}


*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

article{
	width:@article_width;
	height:@article_height;
	.auto_center(50px);
	background-color: @main_bg_color;
}

.module-top-left{
	.float_up();
	width:@article_width/2;
	height:@article_height/5;
	.padding_set();
	.bus-num{
		.display_set();
		.padding_set(10px,50px,10px,50px);
		background-color: red;
		.font_style(#fff,@font_size*3);
	}
	.bus-time{
		text-indent:1em;
		.font_style(#000);
	}
}

.module-top-right{
	text-align: center;
	height:@article_width/5;
	.padding_set();
	p{
		.font_style(@bg_color);
	}
	.p-first{
		.font_style(@bg_color,@font_size+4px);
	}
	.p-last{
		.font_style(red,@font_size+4px);
	}
}

.module-center{
	text-align: center;
	background-color: @bg_color;
	padding:8px;
	span{
		.font_style(#fff,@font_size);
		width:1em;
		line-height: 1.5em;
		.display_set();
	}
	.three{
		line-heihgt:2.3em;
	}
}

.module-bottom{
	text-align: center;
	font-size: 0;
	p{
		.font_style(#000,@font_size);
	}
	span{
		.display_set();
	}
	.span-first{
		width:@article_width*2/3;
		height:5px;
		background-color: red;
		margin-bottom: 8px;
	}
	.span-last{
		.triangle-less(top);
	}
}

scss

$article_width:700px;
$article_height:350px;
$main_bg_color:#dedede;
$bg_color:green;
$font_size:14px;
$font_family:"microsoft yahei";


@mixin auto_center($margin_tb:0){
	margin: $margin_tb auto;
}

@mixin font_style($fc:#fff,$fs:$font_size,$ff:$font_family){
	color:$fc;
	font-size:$fs;
	font-family:$ff;
}


@mixin float_up($fu:left){
	float: $fu;
}


@mixin display_set($d:inline-block){
	display: $d;
}

@mixin border_css($w:1px, $c:red, $s:solid){
	border:{
		color:$c;
		width:$w;
		style:$s;
	}
}

@mixin padding_set($t:20px, $r:0px, $b:0px, $l:0px){
	padding:{
		top:$t;
		right:$r;
		bottom:$b;
		left:$l;
	}
}

@mixin triangle-less($w:10px,$c:red){
	width:0;
	height:0;
	border-width:$w;
	border-style:solid;
	border-color:transparent transparent transparent $c;
}


*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

article{
	width:$article_width;
	height:$article_height;
	@include auto_center(50px);
	background-color:$main_bg_color;
}
.module-top-left{
	@include float_up();
	width:$article_width/2;
	height:$article_width/5;
	@include padding_set();
	.bus-num{
		@include display_set();
		@include padding_set(10px,50px,10px,50px);
		background-color:red;
		@include font_style(#fff,$font_size*3);
	}
	.bus-time{
		text-indent:1em;
		@include font_style(#000);
	}
}

.module-top-right{
	text-align:center;
	height:$article_width/5;
	@include padding_set();
	p{
		@include font_style($bg_color);
	}
	.p-first{
		@include font_style($bg_color,$font_size+4px);
	}
	.p-last{
		@include font_style(red,$font_size+4px);
	}
}
.module-center{
	text-align: center;
	background-color: $bg_color;
	padding:8px;
	span{
		@include font_style(#fff,$font_size);
		width:1em;
		line-height:1.5em;
		@include display_set();
	}
	.three{
		line-height:2.3em;
	}
}

.module-bottom{
	text-align:center;
	font-size:0;
	p{
		@include font_style(#000,$font_size);
	}
	span{
		@include display_set();
	}
	.span-first{
		width:$article_width*2/3;
		height:5px;
		background-color:red;
		margin-bottom: 8px;
	}
	.span-last{
		@include triangle-less();
	}
}