粗略学习less

最新推荐文章于 2024-04-19 19:21:48 发布

流落的小鬼

最新推荐文章于 2024-04-19 19:21:48 发布

阅读量92

点赞数 1

文章标签：学习 less css 前端

本文链接：https://blog.csdn.net/m0_47147246/article/details/125901228

版权

笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文介绍了Less预处理器的基本用法，包括变量的声明与运算、混合（Mixins）、嵌套选择器、媒体查询、转义、命名空间、映射、作用域以及文件导入。通过实例展示了Less如何增强CSS的可维护性和灵活性。

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

细节上官网：https://less.bootcss.com/
在这里插入图片描述

lessStydy.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>
    <!-- 导入时，less必须在js前面 -->
    <link rel="stylesheet/less" href="less/less01.less">
    <script src="js/less.js"></script>
</head>
<body>
    <!-- 安装npm install less -g -->
<div class="out">
    <!-- 1、变量 -->
    <div class="variables">变量</div>
    <!-- 2、混合 -->
    <div class="mixins">混合</div>
    <!-- 2、嵌套 -->
    <div class="nesting">
        <div class="inner">嵌套</div>
    </div>
    <!-- 4、命名空间和访问符 -->
    <div class="box"></div>
    <!-- 5、映射 -->
    <div class="maps"></div>
    <!-- 6、作用域 -->
    <div id="page">
        <div id="header"></div>
    </div>
    <!-- 7、less文件导入 -->
    <div id="import"></div>
</div>
</body>
</html>

less01.less文件

@variables_width:200px;
@variables_height:@variables_width+20px;   //1、变量运算
.out{
    display: flex;justify-content: flex-start;flex-wrap: wrap;
}
.all{
    background-color: rgb(252, 182, 220);
    width: @variables_width;    //1、变量
    height: @variables_height;   //1、变量
    margin: 20px;
    text-align: center;
}
.variables{
   .all(); // 2、混合
}


.mixins{
    margin: 100px;
    .all();  // 2、混合
}

.nesting{
    .all();
    display: flex;align-items: center;justify-content: center;
    .inner{     //3、 嵌套
        width: 100px;height: 100px;background-color: rgb(255, 253, 133);
    }
}

// 4、@规则嵌套和冒泡
.component {
    width: 300px;
    @media (min-width: 768px) {
      width: 600px;
      @media  (min-resolution: 192dpi) {
        background-image: url(/img/retina2x.png);
      }
    }
    @media (min-width: 1280px) {
      width: 800px;
    }
  }
  
// 5、转义（Escaping）允许你使用任意字符串作为属性或变量值
@min1400: ~"(min-width: 1400px)";
.all {
  @media @min1400 {
    background-color: rgb(125, 210, 236);
  }
}

// 6、命名空间和访问符
.a{.inner{width: 200px;height: 200px;border-radius: 50%;background-color: rgb(255, 113, 113)}}
.box{
    margin: 20px;
    .a.inner(); // 还可以书写为 .a > .inner 形式
}


// 7、映射
#colors() {
    primary: rgb(125, 210, 236);
    secondary: rgb(121, 121, 121);
  }
  
  .maps {
    width: @variables_width;   height: @variables_height;   margin: 20px;
    background-color: #colors[primary];    //background-color: rgb(125, 210, 236);
    border: 3px solid #colors[secondary];  //border: rgb(121, 121, 121);
  }

//   8、作用域
@var: red;
#page {
  .all();
  display: flex;justify-content: center;align-items:center;
  #header {
    height: 100px;width: 100px;border-radius: 50%;
    background-color: @var; // white
  }
  @var: white;
}

// 9导入
@import "library";   // library.less

library.less

#import{
    width: 200px;
    height: 220px;
    background-color: deeppink;
    margin: 20px;
}

流落的小鬼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录