通过koala软件来使用less

一.准备过程

文件夹如图所示

html代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body></body>
</html>

我们在text.less文件中写好样式以后将文件夹拖到koala编译，这样它会自动在css文件夹中新建一个css文件，所以我们引入的必须是css文件。

二.less重点功能介绍

1.变量/variables

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body><header>头部</header>
</body>
</html>

less代码：

body {padding: 0;margin: 0;
}/*下面定义一个变量，less定义变量以@开头,后面跟着变量名*/
@header-height: 60px;header {height: @header-height;
}

2.混入/Mixins

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body><div class="left">1</div><div class="right">2</div>
</body>
</html>

css代码：

body {padding: 0;margin: 0;
}div {width: 100px;height: 100px;font-size: 25px;
}/*下面写一个混入的样式*/
.fl {float: left;
}
.fr {float: right;
}.left {.fl();background-color: red;
}.right {.fr();background-color: green;
}

3.参数混合/Parametric Mixins

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body><div>1</div>
</body>
</html>

less代码：

body {padding: 0;margin: 0;
}div {width: 100px;height: 100px;font-size: 25px;background-color: green;margin: 10px auto;
}/*下面写一个参数混合的样式*/
.border-radius(@radius) {border-radius: @radius;
}div {.border-radius(15px);
}

4.参数逻辑条件混合/Mixin Guards

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body><div class="one">第一个</div><div class="two">第二个</div><div class="three">第三个</div>
</body>
</html>

less代码：

body {padding: 0;margin: 0;
}/*参数逻辑条件混合Mixin_Guards*/
#ft-size(@name) when(@name=small) {font-size: 10px;
}
#ft-size(@name) when(@name=medium) {font-size: 20px;
}
#ft-size(@name) when(@name=big) {font-size: 30px;
}.one {#ft-size(small);
}.two {#ft-size(medium);
}.three {#ft-size(big);
}

5.嵌套规则/Nesting

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="./css/text.css">
</head>
<body><header><div><div class="one">this is one</div></div></header>
</body>
</html>

less代码：

body {padding: 0;margin: 0;
}/*引用*/
header {width: 800px;height: 500px;border: 1px solid red;div {width: 400px;height: 100px;margin: 20px auto;border: 1px solid green;.one {color: red;font-size: 50px;/*&指当前目录下，即header div .one*/&:hover {color:green;}}}
}

通过koala软件来使用less相关推荐

koala考拉软件的安装和使用 sass/scss的编译工具koala
下载链接: https://pan.baidu.com/s/1XPu3HLK25Ht6eHXdA_HKOw 提取码: 4ty4 第一步,先安装后并运行这个koala软件.选择设置,更改语言为简体中文, ...
2014年最热门的国人开发开源软件TOP100
2014年最热门的国人开发开源软件TOP100 不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多 ...
2014 年最热门的国人开发开源软件 TOP 100 - 开源中国社区
不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多的开源软件,而且还有很多软件被国外的认可.中国是 ...
2014年国人开发的最热门的开源软件TOP 100
摘要:不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多的开源软件,而且还有很多软件被国外的认可. ...
2014 年最热门的国人开发开源软件 TOP 100
不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多的开源软件,而且还有很多软件被国外的认可.中国是 ...
开源软件 TOP 100
2014 年最热门的国人开发开源软件 TOP 100 电脑网络小K 1年前 (2015-01-20) 1378浏览 0评论不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必 ...
国人开发开源软件TOP100
TOP 100 的国产开源软件列表: (里面有cocos2d-x.pomelo.CrossApp等...) 1. JFinal JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其 ...
2014 年最热门的国人开发开源软件TOP 100
不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多的开源软件,而且还有很多软件被国外认可.中国是开 ...
2014年中国开源软件前100名
不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多的开源软件,而且还有很多软件被国外的认可.中国是 ...

通过koala软件来使用less

一.准备过程

二.less重点功能介绍

1.变量/variables

2.混入/Mixins

3.参数混合/Parametric Mixins

4.参数逻辑条件混合/Mixin Guards

5.嵌套规则/Nesting

通过koala软件来使用less相关推荐

最新文章

热门文章