less

一、Less Css定义:

Less Css是一种动态样式语言,属于css预处理语言的一种,它类似css的语法,为css丰富了动态语言的特性,如变量、继承、运算、函数,更方便css的编写的维护。

Less Css可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务器端。

二、编译工具:

koala编译:可以开发LESS\SASS的编译工具

下载地址:http://koala-app.com/index-zh.html

Node.js库

浏览器端使用

三、注释方式:

(1)会被编译到css文件中:/注释内容/

(2)不会被编译到css文件中:/注释内容/

四、变量

声明变量语法:@变量名:值

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译为css文件:

#header {
  width: 10px;
  height: 20px;
}
五、混合(Mixins)
@test_width:300px;
.box{
	width:@test_width;
	height:@test_width;
	background-color:yellow;
	.border;//混合
}
.border{
	border:solid 5px pink;
}
.box2{
	.box;
	margin-left:10px;
}
//混合可以带参数
.border2(@border_width){
	border:solid yellow @border_width;
}
.test_border2{
	.border2(30px);
}
//混合-默认值
.border3(@border_width:10px){
	border:solid green @border_width;
}
.test_border3{
	.border3();//不传参就是用默认值,传参了就使用参数。
}

注意:用单纯的css做混合的不用带(),但如果是有参数或默认值时一定要带括号。
混合的应用:css3属性兼容合并重复代码

.border_radius(@radius:5px){
	-webkit-border-radius:@radius;
	-moz-border-radius:@radius;
	border-radius:@radius;	
}
.radius_test{
	width:100px;
	height:40px;
	background-color:green;
	.border_radius(3px);//传参就不用默认值
}
六、嵌套(Nesting)

两种用法:
(1)&对伪类的使用(如hover或focus)
(2)对连接的使用

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

&代表父级选择器

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
七、匹配模式

相当于js中的if,但不完全是,满足条件后才能匹配。
匹配模式案例:
(1)写三角形

/* 头向上 */
//第一个参数是条件top/bottom/left/right
	.triangle(top,@w:5px,@c:#ccc){
		border-width: @w;
		border-color: transparent transparent @c transparent;
		border-style: dashed dashed solid dashed;/*兼容ie*/
	}
	/* 头向下 */
	.triangle(bottom,@w:5px,@c:#ccc){
		border-width: @w;
		border-color: @c transparent transparent transparent;
		border-style: solid dashed dashed dashed;/*兼容ie*/
	}
	/* 头向左 */
	.triangle(left,@w:5px,@c:#ccc){
		border-width: @w;
		border-color: transparent @c transparent transparent;
		border-style: dashed solid dashed dashed;/*兼容ie*/
	}
	/* 头向右 */
	.triangle(top,@w:5px,@c:#ccc){
		border-width: @w;
		border-color: transparent transparent transparent @c;
		border-style: dashed dashed dashed solid;/*兼容ie*/
	}
	//第一个参数@_是表示通用样式
	.triangle(@_,@w:5px,@c:#ccc){
		width: 0;
		height: 0;
		overflow: hidden;
	}
	.sanjiao{
		.triangle(top,3px);
	}

(2)写定位

.pos(r){
	position:relative;
},
.pos(a){
	position:absolute;
}
.pos(f){
	position:fixed;
}
.box{
	width;200px;
	height:300px;
	background-color:pink;
	.pos(a);//匹配使用绝对定位
}
八、运算

算术运算+,-,*,/都可以
运算符前后一定要加空格

@width:500px;
@test{
	width:(@width - 20) * 5;
	color:#ccc - 10;
}

为了与 CSS 保持兼容,calc() 并不对数学表达式进行计算,而在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))
九、arguments变量

@arguments包含了所有传递进来的参数。
如果你不想单纯的处理每一个参数的话就可以像这样写

.border_arg(@w:30px,@c:red,@s:solid){
	border:@arguments;
}
.test{
	.border_arg(40px);
}
十、避免编译

有时候我们需要输出一些不正确的CSS语法或使用一些LESS不认识的专有语法。
要输出这样的值我们可以在字符串嵌加一个~
例如:width:~‘calc(100% - 35)’
!important关键字:
会为所有混合所带来的样式,添上!important

.test_important{
	.border_radius()!important;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值