less语法介绍

Less语法介绍


一. 环境的安装。

1.先安装node.js。

在node.js官网下载安装node.js。安装完成后按win+R键打开cmd命令行窗口,输入node -v,如果出现版本号证明node.js安装成功。

2.安装less环境。

使用命令npm install less -g全局安装less。安装完成后输入命令lessc -v出现版本号证明less安装成功。

3.手动编译less文件,在less文件目录下使用lessc 要编译的less文件 编译生成的css文件,回车即可。例如:

lessc test.less test.css
编译生成的文件就是test.css文件。

二、less语法说明

1.less中使用@+变量名定义变量。例如:

@color:#f00;
使用的时候就可以直接使用color:@color;即可。

2.less的混入写法。可以定义一段公共的样式,类似定义函数,例如:

.boradus(@r:10px){
    border-radius: @r;
    -webkit-border-radius: @r;
    -moz-border-radius: @r;
    -ms-border-radius: @r;
}
/*
*上边就相当于定义了一段公共样式,在需要的地方直接引入即可
*@r指定义的一个变量,如果不传默认为10px;,传了则使用传递的值。
*/
div {
    width: 100px;
    height: 100px;
    .boradus(5px);
}
编译后得到的css是这样的。
div {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
}

3.less的嵌套写法。可以像写函数一样进行嵌套写法。&表示与,即同级关系。例如:

@color: #f00;
.boradus(@r:10px){
    border-radius: @r;
    -webkit-border-radius: @r;
    -moz-border-radius: @r;
    -ms-border-radius: @r;
}
div {
    width: 100px;
    height: 100px;
    .boradus(5px);
    >a{
        display: block;
        &:hover{
            color: @color;
        }
    }
}
编译完成后的css文件是这样的。
div {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
}
div > a {
  display: block;
}
div > a:hover {
  color: #f00;
}
发布了28 篇原创文章 · 获赞 12 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 黑客帝国 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览