简单介绍less及工具介绍
1. less是什么？
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS更易维护和扩展 。 Less 可以运行在 Node 或浏览器端。
2. 参考资料
less中文官网：lesscss.cn/
bootstrap的less教程： www.bootcss.com/p/lesscss/
3. 编译工具
koala官网： koala-app.com/
在线编译：www.w3cschool.cn/tools/index… 在线编译太多了就不一一举例了。
为什么会用到编译器
因为你所编写的less文件浏览器识别不了，需要用到编译器转换成正常的css。
less的编写规则
1. 注释
以 // 开头的注释不会被编译到css文件中。
以 /**/ 包裹的注释会被编译到css文件中。
2. less中的变量
用@声明变量 @color:red;
1.普通的属性值用@color
例子
#app {
color:@color
}
编译后
#app {
color:red
}
2.（不常用）属性名称@m:margin;
例子
* {
@{m}:0
}
编译后
* {
margin:0
}
3. （不常用）选择器@selector:#app;
例子
@{selector}:{
color:red
}
编译后
#app:{
color:red
}
4.变量可用于保存图片的URL、默认值、拼接 #app_变量、 +-*/ 等。
3. less中的嵌套
<html>
<head>
<title>标题</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="container">
<h1>我是h1</h1>
<p class="myclass">我是p标签.</p>
</body>
</html>
less 代码
.container{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
.myclass{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}
}
编译后
.container h1 {
font-size: 25px;
color: #E45456;
}
.container p {
font-size: 25px;
color: #3C7949;
}
.container .myclass h1 {
font-size: 25px;
color: #E45456;
}
.container .myclass p {
font-size: 25px;
color: #3C7949;
}
4. less中命名空间和访问器
less 代码
.class1 {
.class2 {
.val(@param) {
font-size: @param;
color:green;
}
}
}
.myclass {
.class1 > .class2 > .val(20px);
}
编译后
.myclass {
font-size: 20px;
color: green;
}
5. less中作用域
less 代码
@var: @a;
@a: 15px;
.myclass {
font-size: @var;
@a:20px;
color: green;
}
编译后
.myclass {
font-size: 20px;
color: green;
}
6. less父选择器
less 代码
a {
color: #5882FA;
&:hover {
background-color: #A9F5F2;
}
}
编译后
a {
color: #5882FA;
}
a:hover {
background-color: red;
}
7. less循环
less 代码
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
编译后
div {
width: 25px;
width: 50px;
width: 75px;
width: 100px;
width: 125px;
width: 150px;
width: 175px;
}
8. less混合
less 代码
.p1{
color:red;
}
.p2{
background : #64d9c0;
.p1();
}
.p3{
background : #DAA520;
.p1;
}
编译后
.p1 {
color: red;
}
.p2 {
background: #64d9c0;
color: red;
}
.p3 {
background: #DAA520;
color: red;
}
9. less混合参数
less 代码
.border(@width; @style; @color) {
border: @width @style @color;
}
.myheader {
.border(2px; dashed; green);
}
编译后
.myheader {
border(2px; dashed; green);
}
