Less介绍:
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
作为一个后端开发人员,在项目开发中,被调到前端开发,遇到了从来没有用的Less编写前端样式,接下来学习一下他的语法,写一些小列子来玩玩。
工具
Hduilder X 下载less预编译器
设置预编配置文件改成实时编译
koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Less</title>
<link rel="stylesheet" type="text/css" href="./css/index1.css" />
<style type="text/css"></style>
</head>
<body>
<div id="box">
雷猴
</div>
<button class="button"></button>
</body>
</html>
<div id="box2">
H@Ming
</div>
Less代码
@charset "UTF-8";
*{
padding: 0px;
margin: 0px;
}
//属性变量
@box-color:red;
//类名变量
@title-name:box;
//样式变量
@box-style:width;
//图片样式
@img-url:'../img';
//文件路径
@path-file:'./index2.less';
//动参作用域
@width-val: 200px;
//&:1、父选择器2、且的意思
//&-ok:class拼接-ok &:代表你的class属性
body{
//background-image: url(../img/lyh.png);
fill: url("./index1.less");
background: url("@{img-url}/lyh.png");
}
#@{title-name}{
@{box-style}: @width-val;
height: 100px;
background: @box-color;
color: white;
text-align: center;
line-height: 100px;
//链接父元素
&:hover {
color: yellow;
background-color: black;
}
}
.button {
width: 100px;
height: 100px;
box-sizing: border-box;
// &-ok:掉膘.button-ok进行样式渲染
&-ok {
color: green;
background-color: green;
}
&-error {
color: red;
background-color: red;
}
&-info {
color: yellow;
background-color: yellow;
}
}
//& + & :代表:.button + .button 一个class属性中有两个名称的
.button {
& + & {
color: red;
}
//& & :代表下级的class属性
& & {
color: yellow;
}
//&&:代表同级别的class属性:.button.button
&& {
color: green;
}
//.button-ok, .success:代表同属性下两种不同的属性.button .button-ok,.button .success 进行样式渲染
.button-ok, .success {
color: blue;
}
//& > .ok :代表向上查找属性:.button > .ok 进行样式渲染
& > .ok {
background-color: greenyellow;
}
}
#box2 {
width: 250px;
height: 200px;
background-color: red;
font-size: 20px;
}
Less预编译后的样式
@charset "UTF-8";
* {
padding: 0px;
margin: 0px;
}
body {
fill: url("./index1.less");
background: url("../img/lyh.png");
}
#box {
width: 200px;
height: 100px;
background: red;
color: white;
text-align: center;
line-height: 100px;
}
#box:hover {
color: yellow;
background-color: black;
}
.button {
width: 100px;
height: 100px;
box-sizing: border-box;
}
.button-ok {
color: green;
background-color: green;
}
.button-error {
color: red;
background-color: red;
}
.button-info {
color: yellow;
background-color: yellow;
}
.button + .button {
color: red;
}
.button .button {
color: yellow;
}
.button.button {
color: green;
}
.button .button-ok,
.button .success {
color: blue;
}
.button > .ok {
background-color: greenyellow;
}
/* ------------------------------------------------------------------------------------ */
@boxstyle:200px;
@bgcolor:red;
@box2:#box2;
@font-size:20px;
@{box2}{
width:@boxstyle+50;
height: @boxstyle;
background-color: @bgcolor;
font-size: @font-size;
}