less 的学习

最新推荐文章于 2024-05-30 15:11:36 发布
最新推荐文章于 2024-05-30 15:11:36 发布
阅读量331 收藏
点赞数
分类专栏： 前端经验记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/purple_lumpy/article/details/87540109
版权

首先，Less 是 css 的预处理语言。less 文件的扩展名是.less ，需要将它进行编译，转化为.css文件，浏览器才可以使用。

将 .less 转化为 .css 一般有三种方式：

   1. Koala 自动监视编译 / Webpack / FIS

   2. Sublime 插件 less2css 自动编译 && Lessc

   3. less.min.js 脚本转换

 这儿我们先使用koala 工具吧（http://koala-app.com/index-zh.html），这种方式好像是最简单省事的

  我们先写上一个html 文件，如下。

<!DOCTYPE html>
<html>
<head>
  <title>lessTest</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/start.css">
</head>
<body>
  <h1>Less Test</h1>

</body>
</html>

然后它的目录结构是这样的：

 

然后我们打开Koala 软件，把less 文件夹放进去，右键“执行编译” 即可。然后在css文件夹里面，就有start.css文件了。

 

预处理器解决的问题：样式的复用、减少冗余、模块化、可维护性。

Less 通过以下功能提供上面的解决方案：变量支持，选择器嵌套处理（BEM），条件逻辑，引用其他样式（Mixin），增强import。

Less 是运行在Node 环境的，兼容CSS语法，过渡平滑，功能设计比较简单，能满足大多数场景的。

LESS 重点功能

 变量 / Variables

 混合 / Mixins

 参数混合 / Parametric Mixins

     参数混合逻辑控制 / Mixin Guards

 嵌套 / Nested Rules

     多层嵌套指令的呈现规则 / Nested Directives and Bubbling

 

Less 变量

定义：

@变量名：变量值；

下面是start.less 代码

body{
  padding:0;
  margin:0;
}

@header-height:60px;

.header{
  height: @header-height;
}

保存之后，start.css 就能自动编译了。（因为之前使用了Koala 工具）

然后下面是html 代码。

Less 混合

定义的时候加上（），编译器就会把它当做只是调用而存在的样式，不会给他单独生成一个class样式。

我们先把html写好，如下。

<!DOCTYPE html>
<html>
<head>
  <title>lessTest</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/start.css">
</head>
<body>
  <header>
    <div class="logo"></div>
    <nav class="nav">
      <a href="" class="nav__item">a</a>
      <a href="" class="nav__item">b</a>
      <a href="" class="nav__item">c</a>
      <a href="" class="nav__item">d</a>
    </nav>
    <div class="profile">
      <a href="" class="profile__item">a</a>
    </div>
  </header>

</body>
</html>

然后写Less文件。

body{
  padding:0;
  margin:0;
}

@header-height:60px;

.header{
  height: @header-height;
}

.fl{
  float: left;
}
.fr{
  float: right;
}
.logo{
  .fl;
  width: 128px;
  background: #f01400;
  height: 36px;
}

 

Less 参数混合

先看看html的结构，如下。

<!DOCTYPE html>
<html>
<head>
  <title>lessTest</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/start.css">
</head>
<body>
  <header class="header">
    <div class="logo"></div>
    <nav class="nav">
      <a href="" class="nav__item">aaa</a>
      <a href="" class="nav__item nav__item_icon_new">bbb</a>
      <a href="" class="nav__item">ccc</a>
      <a href="" class="nav__item">ddd</a>
    </nav>
    <div class="profile">
      <a href="" class="profile__item profile__phone"></a>
      <a href="" class="profile__item profile__message"></a>
      <a href="" class="profile__item profile__mail"></a>
      <a href="" class="profile__item profile__ava"></a>
    </div>
    <div class="search"><input type="text" name="input"></div>
  </header>

</body>
</html>

基础的less代码

body{
  padding:0;
  margin:0;
}

@header-height:60px;
@header-bottom-bgcolor:#000;
.header{
  height: @header-height;
  background: @header-bottom-bgcolor;
}

.fl(){
  float: left;
}
.fr(){
  float: right;
}
.nav-block-margin(){
  height:36px;
  margin:12px 25px;
}
.logo{
  .fl;
  width: 128px;
  background: #f01400;
  .nav-block-margin;
}
.nav{
  .fl;
  height: 60px;
}
@font-medium:14px;
@color-link:#fbfbfb;
@bg-link-hover:#363c41;
.bg-hover(){
  background-color: @bg-link-hover;
}
.nav__item{
  display: block;
  float: left;
  line-height: 60px;
  padding: 0 25px;
  text-decoration: none;
  color: @color-link;
  font-size: @font-medium;
}
.nav__item:hover{
  .bg-hover;
}
.nav__item_icon_new{
  .bg-hover;
}
.search{
  padding-right: 25px;
  position: relative;
  .fr;
  .nav-block-margin;
}
.search::before{
  display: block;
}
.search__input{
  width:242px;
  border:none;
  background-color: #000;
  height: 36px;
  outline: none;
  color: #fff;
  border-bottom: 1px solid #ccc;
}
.profile{
  .fr;
}
.profile__item{
  display: block;
  float: left;
  width: 60px;
  height: 60px;
  background-color: #ccc;
  margin-left: 1px;
}
.profile__item:hover{
  .bg-hover;
}

然后呢，我们加入一个圆角功能，通过Less 的参数混合。

在.less 文件里插入下面的代码

.border-radius(@radius: 50%){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.profile__ava{
  width: 36px;
  height: 36px;
  margin: 12px;
  .border-radius(10px);
}

 

Less 参数逻辑条件混合

首先是html结构

<!DOCTYPE html>
<html>
<head>
  <title>lessTest</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/start.css">
</head>
<body>
  <header class="header">
    <div class="logo"></div>
    <nav class="nav">
      <a href="" class="nav__item">aaa</a>
      <a href="" class="nav__item nav__item_icon_new">bbb</a>
      <a href="" class="nav__item">ccc</a>
      <a href="" class="nav__item">ddd</a>
    </nav>
    <div class="profile">
      <a href="" class="profile__item profile__phone"></a>
      <a href="" class="profile__item profile__message"></a>
      <a href="" class="profile__item profile__mail"></a>
      <a href="" class="profile__item profile__ava"></a>
    </div>
    <div class="search"><input type="text" class="search__input" name="input"></div>
  </header>

</body>
</html>

然后是基础的less

body{
  padding:0;
  margin:0;
}

@header-height:60px;
@header-bottom-bgcolor:#000;
@bgcolor-dark: rgb(43,51,59);
@font-small:12px;
@font-medium:14px;
@color-link:#fbfbfb;
@bg-link-hover:#363c41;
@color-dark:rgb(92,100,107);
.header{
  height: @header-height;
  background: @header-bottom-bgcolor;
}

.fl(){
  float: left;
}
.fr(){
  float: right;
}
.nav-block-margin(){
  height:36px;
  margin:12px 25px;
}
.border-radius(@radius: 50%){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.logo{
  .fl;
  width: 128px;
  background: #f01400;
  .nav-block-margin;
}
.nav{
  .fl;
  height: 60px;
}
.bg-hover(){
  background-color: @bg-link-hover;
}
.nav__item{
  display: block;
  float: left;
  line-height: 60px;
  padding: 0 25px;
  text-decoration: none;
  color: @color-link;
  font-size: @font-medium;
}
.nav__item:hover{
  .bg-hover;
}
.nav__item_icon_new{
  .bg-hover;
}
.search{
  padding-right: 25px;
  position: relative;
  .fr;
  .nav-block-margin;
}
.search::before{
  display: block;
  content: '入门';
  position: absolute;
  width: 72px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: @color-dark;
  font-size: @font-small;
  background-color: @bgcolor-dark;
}
.search__input{
  width:242px;
  border:none;
  background-color: #000;
  height: 36px;
  outline: none;
  color: #fff;
  border-bottom: 1px solid #ccc;
}
.profile{
  .fr;
}
.profile__item{
  display: block;
  float: left;
  width: 60px;
  height: 60px;
  background-color: #ccc;
  margin-left: 1px;
}
.profile__item:hover{
  .bg-hover;
}
.profile__ava{
  width: 36px;
  height: 36px;
  margin: 12px;
  .border-radius(10px);
}

然后呢，我们在less 代码里插入

#color(@name) when(@name=white){
  color: #fbfbfb;
}

修改：

.nav__item{
  display: block;
  float: left;
  line-height: 60px;
  padding: 0 25px;
  text-decoration: none;
  font-size: @font-medium;
  #color(white);
}

 

Less 嵌套

上面的less 一部分可以写成如下，嵌套格式

.header{
  height: @header-height;
  background: @header-bottom-bgcolor;
  .logo{
    .fl;
    width: 128px;
    background: #f01400;
    .nav-block-margin;
  }
  .nav{
    .fl;
    height: 60px;
    .nav__item{
      display: block;
      float: left;
      line-height: 60px;
      padding: 0 25px;
      text-decoration: none;
      font-size: @font-medium;
      #color(white);
    }
    .nav__item:hover{
      .bg-hover;
    }
    .nav__item_icon_new{
      .bg-hover;
    }
  }
}

同时，可以使用“&”符号。它表示，前缀和当前的路径一致。下面的代码和上面的代码等价。

其他

1. 选择器混入

2. 导入 （可以直接import css 也可以 import less）

3. 循环 

4. 属性连接

5. 原始字符串输出

purple_lumpy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
less学习
qq_40410916的博客
11-25 174
less学习0.1less使用需要下载文件包 less使用需要下载文件包 npm 安装或者 引入less.js 使用方法 1.可以声明变量后引用，也可以声明属性名或者选择器 @变量名 @colors:#81F7F3; body { text-align: center; } .webd { background-color: @colors; height: 30vh; border: 1px solid saddlebrown; width: 20vw; .wc { margin: 0 auto; hei
Less学习笔记
06-23
**Less学习笔记** 在Web开发领域，Less是一种流行的CSS预处理器，它扩展了CSS语言，引入了许多编程特性，如变量、嵌套规则、运算符、函数等，使得CSS的编写更加简洁、模块化和可维护。这篇笔记将深入探讨Less的基本...
Less学习
LMX的博客
06-10 140
Less（css预处理器）学习 less的优势 css使用不能看出html节点的嵌套结构，less的嵌套可以看出html的结构 less提高的是程序员的编码效率，而不是运行的速度。 Less的使用方式 直接引入，style标签要做引入的less.js之上（这种方式是运行时编译，会降低网页的加载速度）。 使用考拉编译less，将整个.less文件编译成css文件 使用node.js或各种脚手架 Less的使用 注释方式 //不会编译到css中 /**/会编译到css中 Less中的变量
BEM规范 电商订单模块UI设计实战-- CSS篇（一）
极客前端探索者的博客
05-30 1047
BEM是一种帮助开发者在前端开发中创建可重用组件和共享代码的方法。B（Block）：块元素，代表具有独立意义的封装实体，可以嵌套使用。E（Element）：子元素，是块的一部分，与块在语义上有关联。M（Modifier）：修饰符，用于改变块或子元素的状态。BEM规范是前端开发中创建可重用组件和共享代码的有效方法。通过块（block）、元素（element）和修饰符（modifier）的结合使用，可以实现代码的模块化和清晰结构。
使用批处理批量复制文件并重命名
热门推荐
sanqima的专栏
06-04 2万+
在工作中，有时候，需要把一个文件复制为多份，并且重新命令。比如，把20170603094607000.mp3复制100份，文件依次命名为20170603094607001.mp3 ~ 20170603094607100.mp3。 　　1、首先，生成文件列表，每一行记录一个文件名，这些文件名都保存在FileList.txt中。 　　 //CreateFileList.batREM @echo o
前端学习笔记-less
05-26
在前端开发领域，LESS（层叠样式表，Low-level Style Sheets）是一种预处理器，它扩展了CSS语言，增加了变量、嵌套规则、运算符...在阅读"前端学习笔记——less"时，应重点理解并实践这些概念，以充分利用LESS的优势。
less学习资源（网站镜像）
07-03
www.less.net的镜像，方便学习查询使用
通过bootstrap全面学习less
09-01
【通过bootstrap全面学习less】 LESS CSS是一种强大的CSS预处理器，它扩展了CSS的语法，引入了变量、嵌套规则、混合（Mixins）、函数等特性，使得CSS的编写更加高效和可维护。以下是对这些特性的详细解释： 1. ...
Linux学习之less命令
01-20
less 工具也是对文件或其它输出进行分页显示的工具，应该说是linux正统查看文件内容的工具，功能极其强大。less 的用法比起 more 更加的有弹性。在 more 的时候，我们并没有办法向前面翻， 只能往后面看，但若使用了...
安装less以及初步学习
Dheroo的博客
02-18 218
二月十八号学习内容 今天是在家学习的第二天，学习的主要内容是修改寒假布置的知乎日报APP，经过昨天开会强调的作业的不足，今天认真改了一天，从里面学会了很多新的东西，比如如何在手机端里面加入一些点赞特效，和评论效果，还有一个根据时间的变化提示早上好晚上好的一个特效吧算是，还学会了scss到底怎么用，明天继续。 ...
less的学习
张木期的博客
06-13 318
1.1 less 1.1.1 Less环境安装 安装nodejs 在部分win8系统当中无法安装 （解决办法的是 已管理员权限运行cmd然后再按写命令切换到安装包目录，直接命令执行） 安装完成nodejs之后 检测是否安装完成 node –v 查看版本 然后检测 npm是否自带 npm –v 查看版本 在线安装 然后 运行 npm install –g less (部分电脑要...
LESS的学习
喜欢小让的博客
05-22 276
文章目录LESS的学习一、LESS的简介二、Less中的语法1、变量值变量选择器变量属性变量url变量声明变量变量的运算变量作用域用变量去定义变量2、嵌套3、混合无参数混合默认参数混合混合的匹配模式混合的命名参数4、继承5、导入6、其他注释避免编译迭代 LESS的学习 一、LESS的简介 less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量，Mixin，函数等特性...
学习vue之前需要学习less吗
最新发布
07-03
在学习Vue.js前端框架之前，是否需要先学习Less并不是强制性的，但了解CSS预处理器（如Less、Sass等）可能会对你的开发工作有所帮助。 Vue本身主要关注组件化和数据绑定，它的核心样式可以直接用普通的CSS编写。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值