加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章!
less使用迷你书 官方文档
什么是less,less做什么
-
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展
-
Less 可以运行在 Node 或浏览器端
-
我理解它的用途是将css复用性提高
less的安装和配置
- 1、 demo练习模式
// 1. 全局安装
npm install -g less
// 2. 编译成css
lessc styles.less // 以原名
lessc styles.less newName.css
- 2、webpack下项目模式
// 1. 安装 npm install --save less less-loader
// 2. webpack.base.conf.js 配置加载器
module:{
rules: [
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader',
}
]
}
引入
@import "foo.less";
1. 定义变量
- 以@符开头接字母
@gloabalColor: #33c9d4;
- 变量值可进行运算
@basic: 40;
.container{
width: 2px * @basic;
}
2. 混合
可以在一个类下调用另一个
.border{
border: 1px solid #eee;
}
.title{
.border;
width: 20px;
height: 20px;
}
.title a{
.border;
text-decoration: none;
}
3. 可以嵌套使用
层级关系下可嵌套,如
.title{
width: 20px;
height: 20px;
}
.title a{
text-decoration: none;
}
嵌套写法为:
.title{
width: 20px;
height: 20px;
a{
text-decoration: none;
}
}
- &符号可直接以该类为开头
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
- 诸如media或keyframe可以以与选择器相同的方式嵌套指令。指令位于顶部,相对于同一规则集内其他元素的相对顺序保持不变。这叫做冒泡
.screen-color {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
// 输出为
@media screen {
.screen-color {
color: green;
}
}
@media screen and (min-width: 768px) {
.screen-color {
color: red;
}
}
@media tv {
.screen-color {
color: black;
}
}
4. 自定义函数
定义一个设置宽高的函数
.wh(@w,@h){
width: @w;
height: @h;
}
// 使用时
.title{
.wh(20px, 20px);
}
//等同于
.title{
width: 20px;
height: 20px;
}
5. 扩展
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
// 输出为
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
6. 循环
- 在Less中,mixin可以自称。当与Guard表达式和模式匹配结合使用时,这种递归mixin 可用于创建各种迭代/循环结构。
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
// 输出为
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}