【LESS 笔记】基础内容

最新推荐文章于 2022-08-21 21:02:42 发布
最新推荐文章于 2022-08-21 21:02:42 发布
阅读量323 收藏
点赞数
分类专栏： 前端学习笔记 文章标签： less css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JT61100/article/details/125164426
版权

文章目录

01 Less 是什么

Less css 是一种动态样式语言，属于 CSS 预处理语言的一种，它使用类似 CSS 的语法为 CSS 的赋予了动态的特性，如变量、继承、运算、函数等，更方便 CSS 的编写和维护实现 CSS 模块化

作为一种 CSS 扩展，Less 不仅向后兼容 CSS，它还使用现有的 CSS 语法新增了额外的特性。这使得学习 Less 更轻松，一旦有任何问题，可以随时退回使用标准的 CSS

Less CSS 可以在多种语言，环境中使用，包括浏览器端，桌面客户端，服务端

下载包：

npm install less-loader less --save-dev

webpack.config.js 文件里添加配置：

{test: /.less$/, use: ['style-loader','css-loader','less-loader']}

webpack.config.js 文件

module.exports = {
  entry: './src/js/entry.js',
  output: {
    filename: 'index.js',
    publicPath: './out',
    path: __dirname + '/out'
  },
  module: {
    rules: [
      {test: /.js$/, loader: 'babel-loader'},
      {test: /.css$/, use: ['style-loader','css-loader']},
      {test: /.(png|jpg|gif|svg)$/, use: 'url-loader?limit=8192&name=/[name].[ext]'},
      {test: /.less$/, use: ['style-loader','css-loader','less-loader']}
    ]
  }
}

entry.less 文件

body{
  background-color: #ff0;
  .demo01{
    width: 200px;
    height: 200px;
    background: #f0f;
  }
}

entry.js 文件

// 引入less文件
require('../less/entry.less');

console.log('index');

index.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>
</head>
<body>
  <div class="demo01">demo01</div>
  <div class="demo02">demo02</div>
  <script src="./out/index.js"></script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

02 Less 语法

2.1 注释

  • //：不会被编译
  • /**/：此注释会被编译

2.2 变量

  • 声明变量：@a:300px
  • 使用变量：.box {width: @a;}
  • @arguments 变量：@arguments 包含了所有传递进来的参数
    • 如果你不想单独处理每一个参数的话就可以像这样写
    • border_arg(@w:30px,@c:red,@xx:solid) {border:@arguments;}

entry.less 文件

@w:200px;
@h:200px;
@yellow1: #ff0;
@yellow2: #00f;
body{
  background: @yellow1;
  .demo01{
    width: @w;
    height: @h;
    background: #f0f;
  }
  .demo02{
    width: @w;
    height: @h;
    background: @yellow2;
    border: 5px solid #fff;
  }
}

在这里插入图片描述

2.3 混合

2.3.1 独立选择器样式可以被直接用在其他选择器样式之中

如：.border {border: 1px solid orange} .box {width:@a;height:@a; .border;}

相当于：.box {width: 300px;height:300px;border:1px solid orange}

（同样可以将 #box）

entry.css

@w:200px;
@h:200px;
@yellow1: #ff0;
@yellow2: #00f;
.border{
  border: 5px solid #fff;
}
body{
  background: @yellow1;
  .demo01{
    width: @w;
    height: @h;
    background: #f0f;
    .border
  }
  .demo02{
    width: @w;
    height: @h;
    background: @yellow2;
    .border
  }
}

在这里插入图片描述

2.3.2 混合是可以带参数的

如：.border2(@border_width) {border: @border_width solid yelllow}

使用：.box {.border2(5px);}

entry.less 文件

@w:200px;
@h:200px;
@yellow1: #ff0;
@yellow2: #00f;
.border(@borderStyle){
  border: 5px solid @borderStyle;
}
body{
  background: @yellow1;
  .demo01{
    width: @w;
    height: @h;
    background: #f0f;
    .border(#f00);
  }
  .demo02{
    width: @w;
    height: @h;
    background: @yellow2;
    .border(#0f0);
  }
}

在这里插入图片描述

entry.less 文件

@w:200px;
@h:200px;
@yellow1: #ff0;
@yellow2: #00f;

.border(@borderWidth,@boederStyle,@borderColor){
  border: @borderWidth @boederStyle @borderColor;
}
body{
  background: @yellow1;
  .demo01{
    width: @w;
    height: @h;
    background: #f0f;
    .border(10px,solid,#f00);
  }
  .demo02{
    width: @w;
    height: @h;
    background: @yellow2;
    .border(20px,dashed,#090);
  }
}

在这里插入图片描述

2.3.3 此参数可以具备默认值

如：.border3 (@border-width:10px) {border:@border-width solid green}

使用：.box {.border3;}

用处：兼容写法，减轻冗余代码

例子如下：

.borderRadius(@radius:5px) {
  -webkit-border-radius:@radius;
  -moz-border-radius:@radius;
  border-radius:@radius}
.box{
  .border3;
  borderRadius(5%);
};

2.4 匹配模式

2.4.1 基本语法

entry.less 文件

.triangle(top,@borderColor){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
  border-top-width: 0;
  border-bottom-color: @borderColor;
}
.triangle(bottom,@borderColor){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: @borderColor;
}
.triangle(right,@borderColor){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
  border-right-width: 0;
  border-left-color: @borderColor;
}
.triangle(left,@borderColor){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
  border-left-width: 0;
  border-right-color: @borderColor;
}
body{
  .demo01{
    width: 0;
    height: 0;
    .triangle(right,#f0f);
  }
  .demo02{
    width: 0;
    height: 0;
    .triangle(top,#0ff);
  }
}

在这里插入图片描述

2.4.2 代码冗余，将公共部分提取出来

.trangle(@_,....){} 这句话的意思是，无论在哪使用 .triangle(....) 都会把 .trangle(@_,....){} 里的样式带上

entry.less 文件

.triangle(@_,...){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
}
.triangle(top,@borderColor){
  border-top-width: 0;
  border-bottom-color: @borderColor;
}
.triangle(bottom,@borderColor){
  border-bottom-width: 0;
  border-top-color: @borderColor;
}
.triangle(right,@borderColor){
  border-right-width: 0;
  border-left-color: @borderColor;
}
.triangle(left,@borderColor){
  border-left-width: 0;
  border-right-color: @borderColor;
}
body{
  .demo01{
    width: 0;
    height: 0;
    .triangle(right,#f0f);
  }
  .demo02{
    width: 0;
    height: 0;
    .triangle(top,#0ff);
  }
}

在这里插入图片描述

2.5 嵌套写法

符合 DOM 结构

index.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>
</head>
<body>
  <div class="demo01">demo01
    <div class="demo01-01">demo01-01</div>
  </div>
  <div class="demo02">demo02</div>
  <script src="./out/index.js"></script>
</body>
</html>

entry.less 文件

@w:150px;
@h:150px;
body{
  background: blanchedalmond;
  .demo01{
    width: @w;
    height: @h;
    background: #0ff;
    .demo01-01{
      width: 100%;
      height: 50%;
      background: #ff0;
      &:hover{
        height: 70%;
      }
    }
    .demo01-01:hover{
      width: 70%;
    }
  }
  .demo02{
    width: @w;
    height: @h;
    background: #f0f;
  }
}

在这里插入图片描述

entry.less 文件

@w:150px;
@h:150px;
body{
  background: blanchedalmond;
  .demo01{
    width: @w;
    background: #0ff;
    .demo01-01{
      width: 100%;
      height: 50%;
      background: #ff0;
      &:hover{
        height: 200px;
      }
    }
  }
  .demo02{
    width: @w;
    height: @h;
    background: #f0f;
  }
}

在这里插入图片描述

2.5.1 浮动和清除浮动

浮动

entry.less 文件

@w:150px;
@h:150px;
body{
  background: blanchedalmond;
  .demo01{
    width: @w;
    background: #0ff;
    .demo01-01{
      float: left;
      width: 100px;
      height: 200px;
      background: #ff0;
    }
  }
  .demo02{
    width: @w;
    height: @h;
    background: #f0f;
  }
}

在这里插入图片描述

清除浮动

entry.less 文件

@w:150px;
@h:150px;
body{
  background: blanchedalmond;
  .demo01{
    width: @w;
    background: #0ff;
    &:after{
      content: '';
      display: block;
      clear: both;
    }
    .demo01-01{
      float: left;
      width: 100px;
      height: 200px;
      background: #ff0;
    }
  }
  .demo02{
    width: @w;
    height: @h;
    background: #f0f;
  }
}

在这里插入图片描述

2.6 样式属性值计算

Less 计算样式：

  • @wOne: 300px;
  • @wOne + 30px
  • .box {width:(@wOne - 20) * 5;}
  • 加减乘除皆可

CSS 计算样式：

  • width: ~'calc(100px + 30%)' == cal(130px)
  • width: ~'calc(100% + 30px)' == cal(130%)
  • 加减乘除皆可

2.7 避免编译

有时候我们需要输出一些不正确的 css 语法或者使用一些 Less 不认识的专用语法

要输出这样的值我们可以在字符串前加一个 ~

例如: width: ~'calc(100% - 35px)';

使用：.box {width:~'calc(300px-30px)';} ==> .box {width: calc(300px-30px)}

2.8 模块引入

利用 @import './triangle.less'; 或者 @import url('./triangle.less'); 引入模块

index.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>
</head>
<body>
  <div class="demo01">demo01
    <!-- <div class="demo01-01">demo01-01</div> -->
  </div>
  <div class="demo02">demo02</div>
  <script src="./out/index.js"></script>
</body>
</html>

triangle.less 文件

.triangle(@_,...){
  border-width: 50px;
  border-style: solid;
  border-color: transparent;
}
.triangle(top,@borderColor){
  border-top-width: 0;
  border-bottom-color: @borderColor;
}
.triangle(bottom,@borderColor){
  border-bottom-width: 0;
  border-top-color: @borderColor;
}
.triangle(right,@borderColor){
  border-right-width: 0;
  border-left-color: @borderColor;
}
.triangle(left,@borderColor){
  border-left-width: 0;
  border-right-color: @borderColor;
}

entry.less 文件

// @import './triangle.less';
@import url('./triangle.less');
body{
  .demo01{
    width: 0;
    height: 0;
    .triangle(right,#f0f);
  }
  .demo02{
    width: 0;
    height: 0;
    .triangle(top,#0ff);
  }
}
宁阿宁阿宁
关注
专栏目录
Less学习笔记
毫无技术含量的博客
10-17 693
简介 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 目前CSS预处理语言主要有SASS、SCSS、Less、Stylus。相比于其他的预处理语言，Less在功能的丰富性上略输一筹，相应的学习成本也较低，基本满足了咱们对于CSS编程式开发的需求。 因为在工作中接触到vu...
尚硅谷 Less 笔记
LiuKairui的博客
08-28 855
目录Less 笔记1. Less的引入2. Less基础Less中的注释Less中的变量Less中的嵌套规则3. Less中的混合普通混合不带参数混合带参数的混合带默认参数的混合命名参数匹配匹配模式Arguments变量4. Less的计算5. Less的继承5.避免编译 Less 笔记 Less是一种动态样式语言，属于css预处理器的范畴，他扩展了CSS语言，增加了变量、mixin、函数的等特性，使css更易于维护和扩展 Less既可以在客户端运行，也可以借助Node.js在服务端运行 1. Less的引
less笔记
weixin_33704591的博客
01-15 75
1. 变量 //less @color: #4D926F; //使用 #header { color: @color; } 2. 混合 //less .rounded-corners (@radius: 5px) { border-radius: @radius; } //使用 #footer { .rounded-corners(10px); } 3. 运算 //less @th...
less学习笔记
DSelegent的博客
08-21 875
less学习笔记
jQuery基础自学笔记（pink老师jQuery全内容）
04-12
《jQuery基础自学笔记》 jQuery 是一款非常流行的 JavaScript 库，由 John Resig 在2006年创建，它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery 的设计理念是“Write Less, Do ...
Linux基础学习笔记.docx
04-16
Linux 基础学习笔记 Linux 基础学习笔记是 Linux 操作系统的基础知识笔记，涵盖了 Linux 命令解析语法、权限管理、SELinux 设置、磁盘设置、用户和组设置、计划任务、归档等基础知识点。 一、破密码 破密码是 ...
linux基础命令学习笔记.docx
07-27
### Linux基础命令学习笔记 #### 一、基本概念与环境准备 Linux系统作为一种广泛使用的开源操作系统，其命令行工具在日常运维工作中占据了极其重要的地位。本文档为一份基础的学习笔记，旨在帮助初学者掌握基本的...
less简单笔记
慢腾腾的急性子
08-09 292
lessless是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展less的中文官网：http://lesscss.cn/ bootstrap中关于less的介绍Less编译工具koala 官网:www.koala-app.com less中的注释以//开头的注释，不会被编译到css文件中 以/**/包裹的注释会
Less 学习笔记
qq_38031539的博客
07-01 347
一、准备工作： 安装配置less 打开命令面板输入使用 npm install -g less 下载kaola 网址 ：http://koala-app.com/ 注： koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容wi
Linux基础与Discuz部署实战笔记
`echo`用于在终端输出内容，而`more`、`less`、`tac`则用于查看大文件。`chmod`、`chown`、`chgrp`分别用于改变文件权限、所有者和组属。`man`命令提供命令帮助文档，`wget`和`ftp`用于下载网络文件。 用户和权限...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值