less超详细介绍_.less-程序员宅基地

技术标签: 前端  less  

一、Less介绍

1、官方介绍

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

2、自己理解

Less是一门动态CSS语言,使得CSS样式更加灵活地作用于Html标签。试想如果没有Less,我们要对样式做一些逻辑计算的时候只能依靠Js去实现,有了Less之后,可以方便地动态给Html标签设置样式。比如一个最常见的需求,在当前浏览器的宽度小于500px的时候,给某一个div设置一个样式,使用less+css3就能很简单的解决问题。当然,这只是其中一个场景,less里面还能进行一些常见的条件和逻辑判断。总的来说,Less赋予了CSS逻辑运算的能力。

除此之外,动态CSS语法还有一个重要的作用就是提高样式代码的可维护性。比如一个最简单的,我们可以定义一个全局的颜色变量@aaa:#222,系统里面所有的默认颜色用的@aaa来写的,这个时候如果需要修改这个全局颜色,我们只需要改下@aaa变量的值就好了,其他地方不用做任何修改,这点,作为编程人员应该很容易理解。

说一千道一万,实践才是王道,下面跟着博主一起来看看一些Less最基础的用法吧。

3、Less、Sass、Stylus

说到Less,可能又有人不服了,可能有人要说:Less过时了,Sass是趋势,你看bootstrap3用的是less,怎么bootstrap4就改用sass了等等。博主想,它们三者作为Css的预处理技术,肯定都有自己的优势吧。今天在这里不想讨论三者的优缺点,先来学习Less吧,想那么多干嘛!

二、Less使用入门

关于Less的入门教程,网上也是一搜一大把,基本都和Less中文网上面差不多。Less既可以运行在Node服务端,也可以运行在浏览器客户端。博主对Node不熟,所以这篇还是看看其在浏览器端的使用,其实没有关系,不管在哪里使用,其基础的用法都是一样的。

一般来说,客户端运行Less分为两种情况:

  • 第一种方式是直接在html页面引用.less文件,然后借助less.js去编译less文件动态生成css样式而存在于当前页面,这种方式适用于开发模式。
  • 第二种方式是我们首先写好.less文件的语法,然后借助工具生成对应的.css文件,然后客户端直接引用.css文件即可。比如我们常用的bootstrap.css就是通过工具编译而成,这种方式更适合运行环境。

1、开发模式下使用Less

(1)首先我们在项目下面新建一个less文件,命名为less.less,里面写入最简单的语法

@base: #f938ab;

div{
    background-color:@base;
    padding:50px;
}

(2)然后在html页面head里面引用该less文件

<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />

(3)去 less开源地址 下载less.js文件,然后引入该文件。

<script src="less.js" type="text/javascript"></script>

或者你如果不想去下载less.js文件,也可以直接使用CDN的方式引用less.js,博主就是这么做的。

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

需要说明的是,less.js的作用就是编译less.less文件,使它成为浏览器能读懂的css样式。

(4)在引用less.js之前,需要一个less变量,声明编译less的环境参数,所以最终所有引用文件如下:

 <link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />
    <script type="text/javascript">
    less = {
        env: "development",
        async: false,
        fileAsync: false,
        poll: 1000,
        functions: {},
        dumpLineNumbers: "comments",
        relativeUrls: false,
        rootpath: ":/a.com/"
    };
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

三、常见用法示例

初初入门,我们还是从最基础的开始吧!

1、从第一个Less变量开始

@base: #f938ab;

div{
    background-color:@base;
    padding:50px;
}

页面html代码:

<body>
    <div>
        第一个Less样式
    </div>
</body>

编译之后的Css样式如下:

效果预览:

以上是一个最基础的Less变量,在.less文件里面定义一个全局的@base变量,那么在该文件里面所有地方均可调用。

需要说明的是(1)Less里面的变量都是以@作为变量的起始标识,变量名由字母、数字、_和-组成;(2)在一个文件里面定义的同名变量存在全局变量和局部变量的区别(后面介绍);

2、变量计算

@nice-blue: #f938ab;
@light-blue: @nice-blue + #333;

div {
  background-color: @light-blue;
}

编译得到结果:

div {
  background-color: #ff6bde;
}

这说明,在Less里面,变量可以动态计算。

3、变量混合

混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。我们来看下面的例子:

.rounded-corners (@radius: 15px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#div1 {
    padding:20px;
    width:200px;
    height:100px;
    border:2px solid red;
  .rounded-corners;
}
#div2 {
    padding:20px;
    width:200px;
    height:100px;
    border:2px solid green;
  .rounded-corners(30px);
}

编译后的结果你是否猜到了呢:

#div1 {
  padding: 20px;
  width: 200px;
  height: 100px;
  border: 2px solid red;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
}
#div2 {
  padding: 20px;
  width: 200px;
  height: 100px;
  border: 2px solid green;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
}

原理解析:最上面的 @radius 变量可以理解为一个方法的参数,然后“15px”可以理解为参数的默认值。首先我们定义一个动态样式 .rounded-corners ,这个样式有一个动态的参数 @radius ,这个参数的默认值是“15px”。我们调用的时候如果不传参数,那么 @radius 就等于15px,如果我们传了30px,那么@radius就是我们传的参数值。如果这样理解是否会好一点呢,是不是有点类似我们编程里面的“方法”的概念。如果按照面向对象的原理也很好理解,#div1和#div2继承.rounded-corners这个样式,所以可以直接使用,然后如果“子类”(#div2)有不同于“父类”的属性,可以“重写”,是不是一样一样的。

既然做了测试,我们还是来看看测试结果:

    <div id="div1">div1</div>
    <div id="div2">div2</div>

4、嵌套规则

在CSS里面,我们也经常可以见到标签样式嵌套的写法,那么在Less里面它是怎么实现的呢?我们来下下面的Less代码

#div1 {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    span {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px;
            }
        }
    }
}
#div1 h1 {
  font-size: 26px;
  font-weight: bold;
}
#div1 span {
  font-size: 12px;
}
#div1 span a {
  text-decoration: none;
}
#div1 span a:hover {
  border-width: 1px;
}

Less的这种写法好处是显而易见,标签层级结构清晰可见,并且能减少css代码量。但博主猜想肯定有人会不习惯这种写法,就是因为这种结构层级深,所以在阅读上面还是会有人不习惯,不管怎么样,且用且珍惜吧。

5、函数的使用

在Less里面函数的概念还是比较容易理解的。比如我们有这么一段定义:

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

然后有这么一句调用

@switch: light;

.class {
  .mixin(@switch, #888);
}

编译得到

.class {
  color: #a2a2a2;
  display: block;
}

以上不难理解,就是一个简单的逻辑判断。

6、条件判断

 在上述“函数的使用”里面,我们看到Less支持“等于”的匹配方式,除此之外,Less里面还支持大于、小于等条件判断的语法,此之所谓“导引混合”。先来看看它的语法:

首先定义几个条件判断的“方法”

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

然后调用该“方法”

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

你猜结果是什么?编译结果如下:

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/WUYOU798/article/details/123786487

智能推荐

Scala 数组、映射和集合+wordcount程序-程序员宅基地

文章浏览阅读74次。数组1、定长数组和变长数组package cn.gec.scala import scala.collection.mutable.ArrayBuffer object ArrayDemo { def main(args: Array[String]) { //初始化一个长度为8的定长数组,其所有元素均为0 val arr1 = n..._scala array[long] wordcount

代码:灰度重心法提取线激光条纹中心线(CPP+OpenCV)_灰度中心法-程序员宅基地

文章浏览阅读2.1k次。灰度重心法是根据每行光条纹横截面内的灰度分布特征逐行进行处理,通过在行坐标的方向上,逐行计算提取光条纹区域的灰度重心点,并将该点用来代表该截面的光条纹中心点位置,最后将所有中心点拟合形成光条纹中心线。灰度重心法计算光条纹中心点的公式(光条纹第v列的灰度重心坐标):图像包含U行、V列的图像中坐标(u, v)处的像素灰度值为I(u,v),其中u=1,2,3,…,U; v=1,2,3…,V。灰度重心法提取光条纹中心线时运算速度快,实时性好。但是易受图像中的噪点干扰,导致中心线坐标偏移。#include._灰度中心法

论文查重系统的比较和选择_千万级和亿级查重哪个好-程序员宅基地

文章浏览阅读2k次。又到了毕业季,一般学校都会对毕业生的论文进行查重检测,看看大家的重复率。这个对大家的毕业是十分重要的,如果查重不过,可能会被延期毕业。所以很多学生也会自己事先查重,然后自己多次修改,达到学校的要求。可是很多学生不知道如何选择检测系统,下面我就给大家介绍一下主流的几种系统: 1.万方检测,特点是检测结果粗放,不是很令人满意,但是价格足够便宜,非常适合大家前期修改论文。 _千万级和亿级查重哪个好

FX PLC-程序员宅基地

文章浏览阅读75次。该协议实际上适用于PLC编程端口以及 FX-232AW 模块的通信。通讯格式:命令 命令码 目标设备DEVICE READ CMD "0" X,Y,M,S,T,C,DDEVICE WRITE CMD "1" X,Y,M,S,T,C,DFORCE ON CMD " 7" X,Y,M,S,T,CFORCE OFF CMD "8" X,Y,M,S,T,C传输格式: R..._fxplc一次性最多读写多少字节

DOM与虚拟DOM_dom和虚拟dom-程序员宅基地

文章浏览阅读1.8k次,点赞4次,收藏9次。1. DOM(Document Object Model)2018年通用版本是 DOM 3DOM的作用:对Html文档进行增删改查DOM文档树:(Object =&amp;amp;amp;amp;gt;)祖先 Node =&amp;amp;amp;amp;gt;Document创建Html标签;Text 创建文本;Element 创建其他元素标签;Comment 创建注释…2. Node 接口2. 1 属性childNodes //获取的..._dom和虚拟dom

Kafka-生产者-分区器详解_kafka partitioner-程序员宅基地

文章浏览阅读3.6k次,点赞4次,收藏10次。注:本文源码解析基于Kafka2.1.0版本我们知道,Kafka中的每个Topic一般会分配N个Partition,那么生产者(Producer)在将消息记录(ProducerRecord)发送到某个Topic对应的Partition时采用何种策略呢?Kafka中采用了分区器(Partitioner)来为我们进行分区路由的操作。本文将详细讨论Kafka给我们提供的分区器实现DefaultPa..._kafka partitioner

随便推点

Petya勒索软件变种Nyetya全球爆发,思科Talos率先响应-程序员宅基地

文章浏览阅读102次。自2017年5月份经历勒索软件WannaCry的大规模爆发后,思科Talos团队在6月27日发现了最新的勒索软件变种,暂命名为Nyetya。目前已经在多个国家发现了这个勒索软件的感染事件,思科Talos团队正在积极分析并不断更新最新的防护信息。原文链接:http://blog.talosintelligence.com/2017/06/worldwid...

springboot项目中自定义注解的使用总结、java自定义注解实战(常用注解DEMO)_springboot自定义注解加载字段上怎么使用-程序员宅基地

文章浏览阅读2.4w次,点赞142次,收藏1k次。初学spring的时候使用注解总觉得使用注解很神奇,加一个注解就能实现想要的功能,很好奇,也想自己根据需要写一些自己实现的自定义注解。问题来了,自定义注解到底是什么?肯定会有人和我一样有这个疑惑,我根据自己的理解总结一下。看完下面的几个使用自定义注解的实战demo,小伙伴大概就懂怎么用了。其实注解一点也不神奇,注解就是一种标志,单独使用注解,就相当于在类、方法、参数和包上加上一个装饰,什么功能也没有,仅仅是一个标志,然后这个标志可以加上一些自己定义的参数。_springboot自定义注解加载字段上怎么使用

C3P0 APPARENT DEADLOCK_apparent deadlock creating emergency threads for u-程序员宅基地

文章浏览阅读4k次。C3P0 APPARENT DEADLOCK 问题_apparent deadlock creating emergency threads for unassigned pending task

POM的语法规则_pom.xml语法-程序员宅基地

文章浏览阅读2.1k次。一、POM简介pom作为项目对象模型,通过使用pom.xml来实现管理maven项目,主要描述了项目的如下部分:配置文件、开发者需要遵循的规则、缺陷管理系统、组织和licenses、项目的url、项目的依赖性和其它所有的项目相关因素。二、POM的语法规则一份比较全的pom.xml文件可以参考如下,通过它我们来对pom.xml中的语法规则进行说明。&lt;project&gt; &lt;..._pom.xml语法

查看kafka消费组及消费者ip命令_kafka查看消费者ip-程序员宅基地

文章浏览阅读9.8k次,点赞2次,收藏6次。查看消费组./kafka-consumer-groups.sh --bootstrap-server ip:port--list//查看组中消费者状态./kafka-consuemr-groups.sh --bootstrap-server ip:port--group 消费组名称--describe_kafka查看消费者ip

java使用zpl指令在Zebra打印机上打印条形码-程序员宅基地

文章浏览阅读1.8k次。参考文章:https://blog.csdn.net/scholar_man/article/details/78784163打印机使用的是斑马打印机条码样式工具类ZplPrinterimport org.springframework.context.EnvironmentAware;import org.springframework.context.annotation.Configuration;import org.springframework.core.env.Environme

推荐文章

热门文章

相关标签