百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

Less教程及常用的操作

liuian 2025-02-28 16:30 12 浏览

说到less,我们首先肯定会想到css或者scss。那抛开scss,就单独谈谈为什么选择了less,而非css,他们的区别又有那么些呢?

  • Less是一门CSS预处理语言,css是一种用来表现HTML或XML等文件样式的计算机语言。
  • less扩展了CSS语言,增加了变量、Mixin、函数、运算、继承、嵌套等特性。
  • css可以被浏览器直接识别,less需要先编译为css。

使用方法

说白了就是less可以看做是一个工具,让你操作css更方便的工具。既然是工具,在使用它之前肯定就要去“安装”这个工具。less官方也提供了几种“使用工具”的方法:

node环境中使用

通过npm的安装方式全局安装或者项目目录安装

npm install less -g

浏览器中使用

通过引入less.js的方法,然后在浏览器中可以自动编译你的.less文件

首先,将.less样式表的rel属性设置为“ stylesheet/less”:

接下来,下载less.js,并将其包含在页面元素中的标记中:

当然你也可以配置一些设定选项,这个可以转移到官网查看详情配置,这里就不过多赘述。

使用工具/插件装换格式

我用过比较好的一个工具是Koala(考拉),koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。可以直接把less文件装换成css文件,快速方便可配置。

当然有的开发工具也带有转换less为css文件的插件,比如Hbuilder X前端开发工具,安装less转换插件即可,可右键直接生成css文件

常用操作及技巧

当然,前面说的这么多不是今天的重点,重点是下面的一些关于less常用的操作及技巧。

变量(@)

通过@符号定义变量并且使用。

@color:#4078cb;
.home {
    background-color:@color;
}

编辑后:

.home {
    background-color:#4078cb;
}

变量也可以用在如:选择器名称,属性名称等

@my-selector: banner;
@images: "../img";
.@{my-selector} {
  font-weight: bold;
  background: url("@{images}/white-sand.png");
}

编译后:

.banner {
  font-weight: bold;
  background: url("../img/white-sand.png");
}

变量运算

变量可以进行加减乘除运算,加减法时,以第一个数据的单位为基准,乘除法是,单位要统一。

@width:300px;
@color:#222;
@fontSize:14px;
.top{
    width:@width - 20;
    height:@width - 20*5;
    color:@color*2;
    background-color:@color + #111;
    font-size: @fontSize*2; 
}

编译后:

.top {
    width: 280px;
    height: 200px;
    color: #444444;
    background-color: #333333;
    font-size: 28px;
}

注意:加减运算时要注意符号左右两侧留空格,否则可能会有报错的风险。

嵌套及连接符(&)

父母选择器可用过嵌套的方式实现

div {
	width:100px;
    a {
        color:#4078cb;
    }
}

编译后:

div {width:100px;}
div a {color:#4078cb;}

&操作符可实现伪类选择器、连接等操作

a {
  &:hover {
    color: green;
  }
}

编译后:

a:hover {
  color: green;
}

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }
  &-custom {
    background-image: url("custom.png");
  }
}

编译后:

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

&代表所有父选择器(而不仅仅是最接近的祖先),因此以下示例:

.grand {
  .parent {
    & > & {
      color: red;
    }
    & & {
      color: green;
    }
    && {
      color: blue;
    }
    &, &ish {
      color: cyan;
    }
  }
}

编译后:

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}

less转义

通过‘~’符号对其后面的内容进行转义:

p {
  color: ~"green";
}

编译后:

p {
  color: green;
}

在将LESS代码编译为CSS代码之后,?“some_text"中的任何内容将显示为 some_text 。为什么需要这样的操作呢,比如在使用calc()方法计算的时候,如果不转义,就会识别出来,所以这个时候就必须要用这个‘~’来进行转义。

注释

可以通过“/**/”或者“//”的方法对代码进行注释,但是后者注释方法在编译后的文件中不显示。

/*
  这是一个长注释
*/
// 这是一个短注释

编译后:

/*
  这是一个长注释
*/

混合mixin模式

混合类似于编程语言中的函数。 Mixins是一组CSS属性,允许您将一个类的属性用于另一个类,并且包含类名作为其属性。

.p1{
  color:red;
}
.p2{
  background : #4078cb;
  .p1();
}
.p3{
   background : #3dcd58;
  .p1;
}

编译后:

.p1 {
  color: red;
}
.p2 {
  background: #4078cb;
  color: red;
}
.p3 {
  background: #3dcd58;
  color: red;
}

mixins不仅可以包含属性,还可以包含选择器。

.hover() {
	&:hover {
		background: red;
	}
}
a {
	.hover()
}

编译后:

a:hover {
	background: red;
}

命名空间

命名空间用于在通用名称下对mixin进行分组,进行针对性的内容引用继承。使用命名空间可以避免名称冲突,并从外部封装mixin组。

.h1() {
	background: yellow;
	.span {
		color: orange;
	}
}
.div {
	.h1> .span
}

编译后:

.div {
    color: orange;
}

混合参数

参数mixin使用一个或多个参数,通过参数和其属性来扩展LESS的功能,以便在混合到另一个块时自定义mixin输出。

.border(@width; @style; @color) {
    border: @width @style @color;
}
.home {
    .border(2px; dashed; green);
}

编译后:

.home {
    border: 2px dashed green;
}

导入

@import 伪指令用于在代码中导入文件。 它将LESS代码分布在不同的文件上,并允许轻松地维护代码的结构。 您可以将 @import 语句放在代码中的任何位置。

// import.less
.myImport {
	color:red;
	font-size:14px
}
// style.less 
// 导入 import.less
@import "import.less"

style.less编译后:

.myImport {
	color:red;
	font-size:14px
}

合并

LESS的一个特性,它允许使用单个属性从多个属性中为逗号或空格分隔列表添加值。为了避免任何无意的联接,在每个联接未决声明上都需要显式+或+_标记。

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

编译后:

.myclass {
  transform: scale(2) rotate(15deg);
}

loops循环

Loops语句允许我们多次执行一个语句或一组语句。

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  width: (25px * @count);
}
div {
  .cont(7);
}

编译后:

div {
  width: 25px;
  width: 50px;
  width: 75px;
  width: 100px;
  width: 125px;
  width: 150px;
  width: 175px;
}

颜色函数

颜色函数darken(color,amount)

darken降低了元素中颜色的亮度,有两个可选参数,color:代表颜色对象,amount:包含0 - 100%之间的百分比。

.myclass1{
   height:100px;
   background-color: hsl(80, 90%, 20%);
}

.myclass2{
   height:100px;
   background-color: darken(hsl(80, 90%, 20%), 10%);
}

编译后:

.myclass1 {
  height: 100px;
  background-color: #426105;
}
.myclass2 {
  height: 100px;
  background-color: #213003;
}

颜色函数lighten(color,amount)

lighten增加了元素中颜色的亮度,有两个可选参数,color:代表颜色对象,amount:包含0 - 100%之间的百分比。

.myclass1{
   height:100px;
   background-color: hsl(80, 90%, 20%);
}

.myclass2{
   height:100px;
   background-color: lighten(hsl(80, 90%, 20%), 10%);
}

编译后:

.myclass1 {
  height: 100px;
  background-color: #426105;
}
.myclass2 {
  height: 100px;
  background-color: #639108;
}

颜色混合函数multiply(color1,color2)

将两种颜色相乘。 对应的RGB通道的两个颜色相乘,然后除以255以得到较暗的颜色作为结果。

.color {
	background: multiply(#111111,#222222);
}

编译后:

.color {
    background: #020202;
}

数学函数

ceil()

将数字向上舍入为下一个最大整数。

opacity:ceil(0.7);  //  编译后: opacity:1;

floor()

将数字向下取整为下一个最小整数。

opacity:floor(1.3);  //  编译后: opacity:1;

percentage()

将浮点数转换为百分比字符串。

opacity:percentage(0.2);  //  编译后: opacity:20%;

min()

它指定一个或多个参数的最小值。

opacity:min(0.2,0.1,0.3,4);  //  编译后: opacity:0.1;

max()

它指定一个或多个参数的最大值。

opacity:min(0.2,0.1,0.3,1);  //  编译后: opacity:1;

类型函数

isnumber()

它使用一个值作为参数,如果它是一个数字返回 true ,否则为 false

isstring()

它使用一个值作为参数,如果它是一个字符串返回 true ,否则为 false

iscolor()

它使用一个值作为参数,如果如果值是颜色返回 true ,否则为 false

iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false

isurl()

它使用一个值作为参数,如果值为url返回 true ,否则为 false

isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false

ispixel()

它使用一个值作为参数,如果值是以像素为单位的数字返回 true ,否则为 false

ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false

字符串函数

escape()

它通过对特殊字符使用URL编码来对字符串或信息进行编码。 您无法编码一些字符,例如,, / ,? , @ ,& , + ,?,! , $ ,'和您可以编码的一些字符,例如 \ ,#, > ^ ,(,), {,} ,: >,> ,,] , [和 = 。

escape("Hello!! welcome to Tutorialspoint!")  // 编译后:Hello%21%21%20welcome%20to%20Tutorialspoint%21

e()

它是一个字符串函数,它使用string作为参数,并返回不带引号的信息。 它是一个CSS转义,它使用?“一些内容"转义的值和数字作为参数。

filter: e("Hello!! welcome to Tutorialspoint!");  // 编译后:filter: Hello!! welcome to Tutorialspoint!;

% format()

此函数格式化一个字符串。 它可以写成以下格式:%(string,arguments ...)

format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less"); // 编译后:format-a-d: ("myvalues: 5 myfile: "mydir/less_demo.less");

其他函数

image-size()

它用于从文件检查图像的维度。 它检查图像的宽度和高度。

.top {
   background-image:url("top.jpg");
   image-size:image-size("top.jpg");
}

编译后:

.top {
   background-image:url("top.jpg");
   image-size: 1200px 800px;
}

image-width(),image-height()

分别用于检测图像的宽度和高度。

convert()

数字从一个单位转换为另一个单位。 它包括两个论点; 第一个参数遍编号以及单位和第二个参数包含单位。 当本机兼容时,转换该数字。 如果第一个参数不变,则单位不兼容。

body{
  meter:convert(10cm, mm);
  time:convert(3s, "ms");
  no-unit:convert(5, mm);
}

编译后:

body {
  meter: 100mm;
  time: 3000ms;
  no-unit: 5;
}

当然上面的内容只是less用例中的一部分,只是开发过程中比较常用的。当然,现在的开发越来越倾向于less或者scss等方式,主要的原因还是相对于css他们大大地减少了开发量,减少了代码冗余,方便了开发者。所以这是一个进步的时代,更是一个不断追求美好的时代!

相关推荐

2023年最新微信小程序抓包教程(微信小程序 抓包)

声明:本公众号大部分文章来自作者日常学习笔记,部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载,请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...

测试人员必看的软件测试面试文档(软件测试面试怎么说)

前言又到了毕业季,我们将会迎来许多需要面试的小伙伴,在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中,隐藏着的...

复活,视频号一键下载,有手就会,长期更新(2023-12-21)

视频号下载的话题,也算是流量密码了。但也是比较麻烦的问题,频频失效不说,使用方法也难以入手。今天,奶酪就来讲讲视频号下载的新方案,更关键的是,它们有手就会有用,最后一个方法万能。实测2023-12-...

新款HTTP代理抓包工具Proxyman(界面美观、功能强大)

不论是普通的前后端开发人员,还是做爬虫、逆向的爬虫工程师和安全逆向工程,必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具,脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...

使用Charles工具对手机进行HTTPS抓包

本次用到的工具:Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles,今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解,网上有很多fidd...

苹果手机下载 TikTok 旧版本安装包教程

目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本,而AppStore是高于21.1.0版本,本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...

【0基础学爬虫】爬虫基础之抓包工具的使用

大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章,为实现从易到难全方位覆盖,特设【0基础学爬...

防止应用调试分析IP被扫描加固实战教程

防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代,应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中,保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...

一文了解 Telerik Test Studio 测试神器

1.简介TelerikTestStudio(以下称TestStudio)是一个易于使用的自动化测试工具,可用于Web、WPF应用的界面功能测试,也可以用于API测试,以及负载和性能测试。Te...

HLS实战之Wireshark抓包分析(wireshark抓包总结)

0.引言Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接...

信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )

HTTPS协议详解(加密方式、证书原理、中间人攻击)HTTPS协议的加密方式有哪些?HTTPS证书的原理是什么?如何防止中间人攻击?一:HTTPS基本介绍:1.HTTPS是什么:HTTPS也是一个...

Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口

使用Fiddler抓取移动应用程序(APP)的数据接口需要进行以下步骤:首先,确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具,并打开它。将手机的代理设置为Fiddler代理。具体方...

python爬虫教程:教你通过 Fiddler 进行手机抓包

今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢?我们经常在用的手机手机里面的数据怎么对它抓包呢?那么...接下来就是学习python的正确姿势我们要用到一款强...

Fiddler入门教程全家桶,建议收藏

学习Fiddler工具之前,我们先了解一下Fiddler工具的特点,Fiddler能做什么?如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...

fiddler如何抓取https请求实现手机抓包(100%成功解决)

一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议,默认端口:443(2)HTTP协议(HyperTextTransferProtocol):超文本传输协议。默认...