Less快速入门

最新推荐文章于 2023-11-24 14:17:38 发布

小何同学－

最新推荐文章于 2023-11-24 14:17:38 发布

阅读量146

点赞数

文章标签： less css css3

本文链接：https://blog.csdn.net/m0_47807991/article/details/123545618

版权

本文介绍了Less的三种使用方式，重点讲解了通过插件快速入门。内容包括Less的变量、嵌套、伪类和媒体查询等基本功能。示例代码展示了如何定义变量和使用嵌套、伪类以及媒体查询来实现响应式设计。通过Less，可以更方便地编写和维护CSS代码。

摘要由CSDN通过智能技术生成

Less快速入门

方式①：通过插件

在这里插入图片描述

方式②：通过npm安装less（在webpack的笔记中有）

方式③：在页面中引入less.js文件

这里主要用方式①：

<!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>Less学习</title>
  <link rel="stylesheet" href="./css/style.css">
  <!-- 注意这里引入的是css文件 -->
</head>
<body>
  <div class="container">
    <header></header>
    <section></section>
    <footer></footer>
  </div>
</body>
</html>

// Less的基本功能有
// 变量
// 嵌套
// 伪类
// 伪元素
// 媒体查询

// 1.变量
@width: 600px;
@color: Lightblue;

.container {
  width: @width;
  height: 600px;
  background-color: @color;
  // 2.嵌套
  header {
    height: 100px;
    background-color: aquamarine;
  }

  // 3.伪类
  section {
    height: 400px;
    background-color: azure;
    // &是父级选择器 这里相当于section:hover
    &:hover{
      background-color: lightpink;
    }
    &::before{
      content: '';
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: lightgreen;
    }

    // 媒体查询
    // 当缩小到500px以下的时候显示plum颜色
    @media screen and (max-width:500px){
      background-color: plum;
    }

  }
}