less （Leaner Style Sheets 的缩写）小例子

最新推荐文章于 2024-03-29 11:19:59 发布

北街风

最新推荐文章于 2024-03-29 11:19:59 发布

阅读量143

点赞数

分类专栏： Vue 文章标签： css javascript less

diaolove

本文链接：https://blog.csdn.net/qq_45047809/article/details/121284452

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

1、VScode 下载 Easy Less 插件

2、VScode 中创建一个新文件 test.less

@w:500px;
@h:500px;
@bd: 1px solid red;   //变量

div{
    width: @w;
    height:@h;
    border: @bd;

    p{
        width: 300px;
        height: 300px;
        border: 1px solid green;
         a{
           color: orange;
           &:hover{color: rgb(228, 255, 105);}
         }
         &:before{
           content: '学习';
         }
      }
}

点击保存自动生成test.css文件

div {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
div p {
  width: 300px;
  height: 300px;
  border: 1px solid green;
}
div p a {
  color: orange;
}
div p a:hover {
  color: #e4ff69;
}
div p:before {
  content: '学习';
}

测试：test.html

<!DOCTYPE html>
<html lang="en">
<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="test.css">  //引入css文件
</head>
<body>
    <div>  
        <p>
            <a href="#">less嵌套</a>
        </p> 
    </div>
    
</body>
</html>

运行即可显示界面

北街风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
less （Leaner Style Sheets 的缩写）小例子

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。1、VScode 下载 Easy Less 插件2、VScode 中创建一个..
复制链接

扫一扫