less简单学习使用

lyk_dtf

已于 2023-02-22 09:57:17 修改

阅读量171

点赞数

分类专栏：认真写博客文章标签： less 学习 css

于 2023-02-21 21:02:17 首次发布

本文链接：https://blog.csdn.net/lyk520dtf/article/details/129149945

版权

认真写博客专栏收录该内容

61 篇文章 0 订阅

订阅专栏

文章目录

一、如何使用
二、简单使用
- 1.dome示例
总结

一、如何使用

官网：https://lesscss.org

在这里插入图片描述

安装使用有多种方式，介绍简单的两种：
1、npm安装：npm install -g less
2、普通h5下载less.js引用
下载地址：https://cdn.jsdelivr.net/npm/less

二、简单使用

1.dome示例

废话不多说，直接上代码
html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="./js/less.js" ></script>
		<title>测试</title>
	</head>
	<body>
		<div class="container">
			<header></header>
			<section></section>
			<footer></footer>
		</div>
	</body>
</html>

css：【style.less】

//变量
//伪类
//嵌套
//伪元素
//媒体查询

//外面定义变量，里面可以直接用
@width:600px;
@color: red;

.container{
	width: @width;
	height: 800px;
	background:@color;
	header{
		height:100px;
		background: green;
	}
	
	//子元素样式可以直接写在父样式里面
	section{
		height: 400px;
		background: skyblue;
		&:hover{
			background: blue;
		}
		
		//在元素前面加元素。content：内容
		&::before{
			content: '11';
			position: absolute;
			width: 100px;
			height: 100px;
			background: yellow;
		}
		
		//在元素后面加元素。content：内容
		&::after{
			content: url(img/20230202015430200.ico);
			position: absolute;
			left: 100px;
			width: 200px;
			height: 200px;
			background: red;
		}
		
		//媒体查询，窗口宽度小于300背景改成红色
		@media screen and (max-width:300px){
			background: red;
		}
	}
	
	footer{
		height: 200px;
		background: black;
	}
}

目录结构示例
在这里插入图片描述