NodeJs之使用Less给CSS加点料

最新推荐文章于 2022-12-02 13:30:11 发布

碰磕

最新推荐文章于 2022-12-02 13:30:11 发布

阅读量338

点赞数 1

分类专栏： JS # node.js 文章标签： css less css3

本文链接：https://blog.csdn.net/m_xiaozhilei/article/details/123129525

版权

JS 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

node.js

21 篇文章 0 订阅

订阅专栏

Less

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。

更多功能请参考官网:https://less.bootcss.com/
博主只会进行测试部分功能

Less的方法

用代码表示,一目了然🤭

变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译为：

#header {
  width: 10px;
  height: 20px;
}

混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

编译为：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

官网文档都有相关的方法介绍,这里我只写了三种，想了解更多请参考官方文档----->https://less.bootcss.com/

使用Less(nodejs中)

[🚀第一步:安装]`npm install less -g`

[🚀第二步:创建文件并且编写]

hello.less

@width:200px;   //变量
@height:@width+100px;
.border{
    border-top: double 5px blueviolet;
    border-bottom: solid 2px gray;
}
#box2{
    width: @width;
    height:@height;
    background-color: red;
    .border();  //混合
    .context{   //嵌套
        font-size: 20px;
        color: purple;
    }
}

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/hello.css">
</head>
<body>
    <div id="box"><p class="context">123</p></div>
</body>
</html>

[🚀第三步:运行测试:]`lessc css/hello.less css/hello.css`

我是放在了css文件夹下
运行后发现多了个文件
在这里插入图片描述
说明运行成功！！！
style.css打开

.border {
  border-top: double 5px blueviolet;
  border-bottom: solid 2px gray;
}
#box {
  width: 200px;
  height: 300px;
  background-color: red;
  border-top: double 5px blueviolet;
  border-bottom: solid 2px gray;
}
#box .context {
  font-size: 20px;
  color: purple;
}

效果图:
在这里插入图片描述

在nodejs中使用less成功!!!

碰磕

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
NodeJs之使用Less给CSS加点料

LessLess （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。更多功能请参考官网:https://less.bootcss.com/博主只会进行测试部分功能Less的方法用代码表示,一目了然🤭变量@width: 10px;@height: @width + 10px;#header { width: @width; height: @height;}编译为：#header { width: 10px; heigh
复制链接

扫一扫