Less 基础

1. 维护CSS的弊端

CSS是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。

  • CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的。
  • 不方便维护及扩展,不利于复用。
  • CSS没有很好的计算能力
  • 非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目

2. Less介绍

Less(Leaner Style Sheets 的缩写) 是一门CSS扩展语言,也称为CSS预处理器。

作为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性。

它在CSS的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,less可以让我们用更少的代码做更多的事情。

Less 中文网址:Http://lesscss.cn/

常见的CSS预处理器:Sass、Less、Stylus

总结:Less是一门CSS预处理语言,它扩展了CSS的动态特性

3. Less 安装

  • 安装nodejs,网址:http://nodejs.cn/download/
  • 检查是否安装成功,使用cmd命令(window + r 打开 输入cmd) — 输入“node -v” 查看版本即可
  • 基于nodejs在线安装Less,使用cmd命令“npm install -g less”, 即可
  • 检查是否安装成功,使用cmd命令“lessc -v“ 查看版本即可

Less 使用

首先新建一个后缀名为less的文件,在这个less文件里面书写less语句。

  • Less使用
  • Less编译
  • Less嵌套
  • Less运算

4. Less 变量

变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

语法:

@变量名:值;

1. 变量命名规范

  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感
// 定义一个粉色的变量
@color:pink;
// 定义一个 字体为14像素的变量
@font14:14px;
body{ 
  background-color: @color;
}
div {
  color: @color;
  font-size: @font14;
}

5. Less 编译

本质上,Less包含一套自定义的语法及一个解析器。用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的CSS文件。

所以,我们需要把我们的less文件,编译生成为CSS文件,这样我们的html页面才能使用。

vscode Less 插件

Easy LESS 插件用来把less文件编译为css文件

安装完毕插件,只要保存一下Less文件,会自动生成CSS文件。

6. Less嵌套

.header {
  width: 200px;
  height: 200px;
  background-color: pink;
  // less嵌套 子元素的样式直接写到父元素里面

  a {
    color: purple;
  }
}

如果遇见(交集|伪类|伪元素选择器)

  • 内层选择器的前面没有&符号,则它被解析为父类选择器的后代;
  • 如果有&符号,它就被解析为父元素或父元素的伪类。
a {
    color: purple;
    // 如果有伪类、交集选择器、伪元素选择器 我们内层选择器的前面需要加&
    &:hover {
      color: red;
    }
  }

7. Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算

@border:5px + 5;
div {
  width: 200px - 50;
  height: 200px * 2;
  border: @border solid red;
}
img {
  width: 82 / 50rem;
  height: 82 / 50rem;
}

以上代码编译结果:

div {
  width: 150px;
  height: 400px;
  border: 10px solid red;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}

注意:

  • 乘号(*)和除号(/)的写法
  • 运算符中间左右有个空格隔开 1px + 5
  • 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
  • 如果两个值之间只有一个值有单位,则运算结果就取该单位

热门文章

暂无图片
编程学习 ·

Qt 文件路径操作

//mSaveName = "C:/aaaa/fff.txt"; auto info = QFileInfo(mSaveName); QString pathName = info.absolutePath();// "C:/aaaa" QString baseName = info.baseName(); //"fff" QString fileName = info.fileName(); //"fff.txt"
暂无图片
编程学习 ·

redis知识点(一)

redis知识点(一) 问题Redis 持久化机制 缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级等问题 热点数据和冷数据是什么 Memcache与Redis的区别都有哪些? 单线程的redis为什么这么快 redis的数据类型,以及每种数据类型的使用场景,Redis 内部结构 redis的过期策略以及内存…
暂无图片
编程学习 ·

FPGA之fifo设计

FPGA之手撕fifo(含设计代码和仿真)本文回答以下几个问题:1:fifo的读空和写满信号如何给出2:fifo的写控制模块设计3:fifo的读控制模块设计4:双口RAM使用5:顶层文件6:仿真文件编写7:modelsim的RTL仿真1:上一篇文章(FPGA之FIFO IP核详细教程)已经简单说了一下读写指针…
暂无图片
编程学习 ·

Java中Date类型数据格式转换

查询数据库datetime类型数据,返回的结果是Mon Jun 22 19:37:29 CST 2020 先转换成yyyy-MM-dd类型的格式。 /** * 获取现在时间 * * @return 返回短时间字符串格式yyyy-MM-dd */ public static String getStringDateShort() { Date currentTime = new Date(); SimpleDateF…
暂无图片
编程学习 ·

TomCat学习笔记(1)--裸Tomcat框架实现和IDEA实现的比较

TomCat是什么不多说了,这里是用来记录我学习TomCat的操作与心路历程 本文对比演示用纯Tomcat和用IDEA集成开发同样的页面效果的两种方法。 在不用IDEA集成开发环境时稍微学习了一些tomcat,能写出一个界面并且用get、post函数试着传递数据。(在下文介绍一下流程并给予简单分析…
暂无图片
编程学习 ·

Yarn工作原理自我总结

如图所示 1.由Client(客户端)提交一个作业请求给ResourceManager(资源管理器) 2.ResourceManager生成一个ApplicationMaster(程序管理员),并根据Node Status(状态)在空闲的NodeManager节点上运行ApplicationMaster 3.ApplicationMaster向ResourceManager注册其信息,并发送资源…
暂无图片
编程学习 ·

Java Spring Shiro 安全框架:(八)加密算法

加密算法1.手动处理数据时,自行使用MD5加密2.使用Shiro的MD5方式进行加密在身份认证的过程中往往都会涉及到加密,如果不加密,这个时候信息就会非常的不安全,shiro 中提供的算法比较多 如 MD5 SHA 等1.手动处理数据时,自行使用MD5加密 package com.shiro3;import org.apache.s…
暂无图片
编程学习 ·

LInux下部署lnmp环境,mysql8.0连接的坑,php7.4废弃函数

最近在公司搭建了一套lnmp环境,遇到的一些问题,分享一下。采用lnmp一键安装包(地址:https://lnmp.org/faq/lnmp-software-list.html)的形势,安装了最新的php7.4,mysql8.0 版本坑一:mysql8.0 1、Authentication type: 用户的 Authentication type 默认为 caching_sha2_…
暂无图片
编程学习 ·

项目实训——初版的页面优化(2)

项目实训——初版的页面优化(2)题目太长的解决就业帮助具体内容的收起展开表格的美化 再次进行了一次小组会议,找到了更加多的需要优化和完善的地方。比如题目很容易出框,讨论区话题的显示需要限制长度等等。同时也新增一些功能,比如评论的删除。这篇先写完善。 题目太长的…
暂无图片
编程学习 ·

Java语言基础(二)变量和数据类型

Java语言基础(二)二、变量和数据类型2.1 变量的基本概念2.2 变量的声明和使用2.3 变量使用是注意事项2.4 标识符的命名规则(笔试)关键字2.5 变量输入输出的案例实现2.6 变量输入输出案例的优化和手册介绍2.7 数据类型的分类2.8 常用的进制2.9 十进制与二进制之间的转换(1)正…
暂无图片
编程学习 ·

LeetCode-Algorithms-[Easy]509. 斐波那契数

斐波那契数,通常用 F(n) 表示,形成的序列称为斐波那契数列。该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和。也就是: F(0) = 0, F(1) = 1 F(N) = F(N - 1) + F(N - 2), 其中 N > 1. 给定 N,计算 F(N)。 示例 1:输入:2 输出:1 解释:F(2) = F(1) + F…
暂无图片
编程学习 ·

树莓派基于Docker快速搭建nextcloud,附性能测试

文章目录前言正文树莓派刷系统环境准备调整时区Docker安装docker-compose的安装nextcloud运行nextcloud内网穿透配置 frp自动重新运行配置反向代理速度测试其他推荐总结 排版可能更好一点的永久原文链接:树莓派基于Docker快速搭建nextcloud,附性能测试 前言 一年前兴起买的树…
暂无图片
编程学习 ·

从大量文件中找到指定文件并执行指定文件操作

从大量文件中找到指定文件并执行指定文件操作Linuxwindows Linux 应邀对一些文件进行处理,如图所示目录结构就是a-1.bmp, a-2.bmp, ... , a-49.bmp,其他字母同理,前面的索引从a-z,另外还有0. 要求是取出所有的2号索引为1,2,3,4,5,6的文件。 Linux有个极强大的命令find,不仅…
暂无图片
编程学习 ·

最新SSM框架搭建详细教程

前言 使用框架的版本: Spring 4.0.2 RELEASE Spring MVC 4.0.2 RELEASE MyBatis 3.2.6 新建maven java web项目 使用eclipse创建maven项目,项目的最终结构以及文件如下:pom文件内容如下 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h…
暂无图片
编程学习 ·

MySQL在dos命令行中输入中文时报错

情景:在DOS命令行中操作中文时报错 insert into category(cid,cname) values(c010,中文); ERROR 1366 (HY000): Incorrect string value:\xB7\xFE\XD7\xB0 for colum cname at row 1原因:mysql的客户端设置编码是utf8,而系统的cmd窗口编码是gbk 解决:查看mysql内部设置的编…
暂无图片
编程学习 ·

TinyOS-2.1.2安装配置

难点 1. Linux: 因为我菜,反正vm在我的系统中就没有正常存活过。前两天卸掉重装了11遍,最后都没能解决问题。如果遇到黑屏,特别是10版本的,可以试着升到11以后黑屏问题会解决,但是安装会变长。 如果你就是和我一样单纯嫌麻烦,直接看下一步。2. 镜像源可用性 这大多数各种…