一、less
Less 是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,
增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。
less的中文官网:http://lesscss.cn/
bootstrap中less教程:http://www.bootcss.com/p/lesscss/
二、Less使用
浏览器本身是不支持less语法的。我们需要通过编译将less转化为css代码。
可以通过less官网提供的js文件进行编译。
<style type="text/less">
less代码的编写
</style>
<script src="../less/less.min.js"></script>
less编译文件的bootCDN地址:
https://cdn.bootcss.com/less.js/3.0.4/less.min.js
需要注意的是,该js文件必须要在style标签下面.因为这是一个解析动作需要拿到style中的信息。且这个style标签的type一定得是text/less的。
也可以通过编译工具来进行编译,比如考拉。
当然,最终对less的编译我们都会放进我们项目的工程化流程中使用构建工具来管理。
三、快速入门案例
01普通垂直水平居中.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
width: 300px;
height: 300px;
background: blue;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
#f {
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="wrap">
<div id="f">
</div>
</div>
</body>
案例图示:
02使用less实现垂直居中.html
<head>
<meta charset="UTF-8">
<title></title>
<!--使用less
1、将f子元素嵌套到父元素中;
2、style type="text/css"修改为type="text/less";
3、引入less.min.js标签
优点:可以实现在CSS中元素嵌套
缺点:这种less加载方式浏览器加载渲染性能差
解决:可以使用koala工具来处理less文件,将其转换为css文件
-->
<style type="text/less">
* {
margin: 0;
padding: 0;
}
#wrap {
width: 300px;
height: 300px;
background: blue;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
#f{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
</style>
<script src="../less/less.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="f">
</div>
</div>
</body>
03使用koala处理less实现垂直居中.html
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/koala_less_ver_hor_centered.css"/>
</head>
<body>
<body>
<div id="wrap">
<div id="f">
</div>
</div>
</body>
</body>
koala_less_ver_hor_centered.less
* {
margin: 0;
padding: 0;
}
#wrap {
width: 300px;
height: 300px;
background: blue;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
#f{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;