less基本使用

最新推荐文章于 2022-11-05 17:03:32 发布

bcbobo21cn

最新推荐文章于 2022-11-05 17:03:32 发布

阅读量356

点赞数

分类专栏： web前端文章标签： less css

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/117643630

版权

web前端专栏收录该内容

150 篇文章 1 订阅

订阅专栏

less是一个扩展的css语言；可定义变量；

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>less demo </title> 	
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>	
</head>
<body>

<p>这是一些文本。</p>

<div id="div1">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

<p>这是一些文本。</p>

</body>
</html>

引入less.js；less语言相关的内容写在.less文件中，然后在html中引入；顺序，引入less文件在前；

styles.less;

@width: 400px;
@height: @width + 10px;
@a1: 2px;
@b1: #303030;


#div1 {
  width: @width;
  height: @height;
  border:@a1;
  background-color: @b1;
}

运行一下；在浏览器中出现下图错误；

由于浏览器的同源策略限制不能获取less文件内容，下回再搞；

也可以用npm命令安装less，然后把less文件解析为css文件；

解析得到如下内容；

#div1 {
width: 400px;
height: 410px;
border: 2px;
background-color: #303030;
}

bcbobo21cn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
less基本使用

less是一个扩展的css语言；可定义变量；<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>less demo </title> <link rel="stylesheet/less" type="text/css" href="styles.less" /><script src="http://cdnjs.cloudflare.
复制链接

扫一扫

专栏目录