《前端》实现圣杯布局

less 官网http://lesscss.org/

npm install -g less
# 查看版本
lessc -v
复制代码

编写less文件

• 声明字符集

@charset "UTF-8";
复制代码

• 定义less变量@mainColor

@color: #61A34F;

a {
    background-color: @color;
}
div p {
    background-color: @color;
}
复制代码

• less注释格式(两种)

/* 这种类型的格式会被转换到生成的css文件 */

// 这种类型的格式不会被转换到生成的css文件
复制代码

• 拼接使用less变量

@pageClass: blackPage

.@{pageClass}{
    background-color: #444444;
}
复制代码

• mixin(混入), 分为类混入和函数混入

/* 类混入 */
.w50-h50{
  widht: 50px;
  height: 50px;
}

.main-color{
  color: #62868D;
}
/* 定义宽50高50的方块样式 */
.atom-frame{
  .w50-50;
  .main-color;
}
复制代码

/* 函数混入 */
// 定义函数(默认值为left)
.f(@direction:left){
	float: @direction;
}
// 调用函数
.atom{
  font-size: 50px;
  .f(right);
}
复制代码

• 嵌套

/* 为 div 的子标签 p 添加color样式 */
div {
  p{
  color: #62868D;
  }
}
复制代码

// 当需要与父级连接的时候,如`div:hover`,使用`&`代替父元素
.atom {
  background-color: #62868D
  &:hover{
    background-color: #81D453
  }
}
复制代码

• 数值运算

	@cell-color: #413F43;
	@cell-number: 5;
	.container{
		margin-top: 50px;
		border: 3px  solid #413F43;
		overflow: hidden;
		.cell {
			width: 100%/@cell-number;
			height: 100px;
			float: left;
			padding: 5px;
			border: 2px solid #9C5E56;
			box-sizing: border-box;
			background-color: @cell-color;
			&:nth-child(2n){

				background-color: lighten(@cell-color, 10%);

			}
			&:hover {
				background-color: lighten(@cell-color, 50%);
			}

		}

	}

复制代码

/* 当浮动到 */
/*使用内置函数进行运算, 例如, 当鼠标浮动到某方块时, 颜色亮度提升30% 参考: http://lesscss.org/functions/ */
@cell-color: #62868D;
.cell {
	width: 100px;
	height: 100px;
	background-color: @cell-color;
	&:hover {
		background-color: lighten(@cell-color, 20%);
	}
}
复制代码

• 导入其它文件的less规则

/* 以导入同级目录下 mystyle.less为例 */
@import "mystyle"
复制代码

less编译

# 使用node全局安装lessc后, 对文件`base.less`进行编译(类似javac)
lessc base.less base.css
复制代码