less安装与使用 - 飄落的葉子

less安装与使用

定义：Less 是一门 CSS 预处理语言，Less 可以运行在 Node 或浏览器端。

优点：

1、可以运行在Node或浏览器端，

2、增加了变量、Mixin、函数等特性

3、使css更加维护和扩展。

4、结构清晰，便于扩展

5、可以方便地屏蔽浏览器私有语法差异

6、可以轻松实现多重继承

7、完全兼容 CSS 代码，可以方便地应用到老项目中

安装过程

1、NodeJ运行LESS示例要下载NodeJ并安装。请打开链接 https://nodejs.org/en/ 。

2、在集成终端 npm install -g less；

3、运行lessc style.less style.css 报错，则需要以管理员身份运行上面的代码 set-executionpolicy remotesigned 即可解决

4、转换：lessc style.less style.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>我是Less</div>
</body>
</html>

@w:300px;
@h:300px;
@bg:blue;
@c :red;
@t :center;
@fSize:16px;
@fStyle: italic;
@fWeight: bolder;
@s :5px;
@cs : yellow;
@bs :solid;
div {
    width: @w;
    height: @h;
    background: @bg;
    font-size: @fSize;
    font-weight: @fWeight;
    font-style: @fStyle;
    border: @s @bs @cs;
    color: @c;
    text-align: @t;
    line-height: @h;
}

在终端输入 lessc style.less style.css 会自动生成 style.css 文件

posted on 2020-08-23 10:02 飄落的葉子阅读(243) 评论(0) 收藏举报

刷新页面返回顶部