less简介、less安装、编译、less语法之变量、嵌套、类混入、函数混入、运算、less文件导入

less基础:

CSS是一门非程序语言,没有变量、函数、作用域等,此时使用rem单位就会出现图片等大量计算尺寸的问题,但是less可以轻松实现运算,它是CSS预处理语言,引入了变量、混入、函数等,常见的CSS预处理语言还有:Sass、Stylus等,Less中文网址:http://lesscss.cn

Less安装:
①安装nodejs:进网址:http://nodejs.cn/download,选择对应自己电脑系统的node下载安装,检查是否安装成功:cmd控制台键入 node -v , 若出现有node版本信息则安装成功。

②基于node下的npm安装:cmd控制台键入 npm install -g less ,检查是否安装成功:cmd控制台键入:lessc -v ,若出现less版本信息,则安装成功。

Less编译:
less本质上是由一套自定义语法及一个解析器组成,根据语法定义自己的less文件,最终会编译成CSS文件供html使用。

Easy LESS插件:把less文件编译成css的VScode插件,在VScode安装此插件后,保存less文件后会自动生成对应的css文件,把此css文件引入html文件即可。

less.js插件:less文件不能直接在浏览器被解析,因此是不能直接将less文件通过link引入到html文件中的;但是可以通过引入js插件less.js同时声明link标签中type属性的值为text/less就可以被转化为在浏览器可识别的css,less被获取是通过ajax请求的,因此不能通过files的形式访问,如:

<head><link rel="stylesheet" type="text/less" href="lib/less/less.less"><script src="lib/less/less.js"></script>
</head>

less语法:

less文件中可以直接 写css代码,开始less编码时建议声明字符编码辑。

less中的注释:less中有两种注释语法,如下:

	 @charset:'UTF-8';/*注释内容,可以编译到css文件中*///注释内容,不能编译到css文件中

变量:没有固定的值,可以改变,css中的颜色值和数值经常使用,语法:@变量名:值 ,(变量名规范:必须以@为前缀、不包含特殊字符、不以数字开头、字母区分大小写),less中字符串拼接需要将变量名通过{}包裹,如:@color:pink; 、@number:10;、.{@className}

嵌套:在less中可以像html一样,如果标签是父子级关系,可以嵌套书写,编写后会生成对应的父子级形式的选择器,less语法中伪类伪元素前面要加 & 符号才表示当前元素的伪类,否则表示此元素的子代伪元素,如:

	@bgcolor:rgb(199, 235, 250);@font12:12px;@className:box;div {background-color: @bgcolor; a {font-size:@font12;//  less语法中伪类前面要加 & 符号才表示当前元素的伪类,若不加则表示此元素的子代伪元素:&:hover {color:bisque;}  }}.@{className}{color:red;};//编译后的css代码://div {//  background-color: #c7ebfa;//}//div a {//  font-size: 12px;//}//div a:hover {//若less前面没有加 &,则解析成div a :hover//  color: bisque;//}// .box {//   color: red;// }

混入:混入分类混入和函数混入,类混入是将若干个类在另一个{}中使用()调用,使被调用的类的属性代码在新的类中生成,如:

	.floatLeft{float:left;}.bgc{background-color:blue;}// 将上面两个类的属性及值混入到新的类中:.box{.floatLeft();.bgc();}//生成的对应css代码:.floatLeft {float: left;}.bgc {background-color: blue;}.box {float: left;background-color: blue;}

函数混入:由于类混入定义的类会编译到css代码造成代码冗余,这样不太好,可以使用函数混入,解决这个代码冗余的情况,函数语法:.函数名(){};,使用时是将类定义到函数中,在另一个类中使用时,直接调用函数即可,但是不会在css代码中生成类,函数里面可以传入参数,但是定义了参数后就必须传入参数,否则会报错,但是可以传入默认参数,就是在形参变量名后面加冒号,冒号后面的值即为默认值,如:

	@fl:left;@fr:right;.floatLeft(@left:left){//定义了默认值为leftfloat: @left;}.bgc(){background-color: blue;}.box {.floatLeft(@fr);//当不传入参数时,会使用默认值left.bgc();}// 生成的css代码:.box {float: right;background-color: blue;}

混入函数定义中{}里面可以继续定义类,便于将代码重用和方便管理,要想使用到函数里面具体的某个类时,直接通过函数名加类名的方式就可以调用到,如:

.bgc(){.yello{color:yello;}.width{width:20px;}
}
.box {.bgc.width;
}
//使用.bgc函数中的.width编译后生成的css代码如下:切记调用时函数名后面不能加()
.box {width: 20px;
}

映射:通过上面代码可以看出混入函数中可以定义类,less3.5开始可以定义映射,简单的说就是在函数中可以定义key和value键值对,使用时可以通过[]加键拿到具体的value,如:

.bgc(){divcolor:blue;key:value;
}
.box {color:.bgc[divcolor];font:.bgc[key];
}
//使用.bgc函数中定义的key和value编译后生成的css代码如下:
.box {color: blue;font: value;
}

作用域:less 中的作用域和css中的作用域相似,都是先从本作用域查找,找不到继续往父级查找,如:

@color: yellow;
div {@font: 20px;p {color: @color;font-size:@font;}
}
//编译后的代码如下:
div p {color: yellow;font-size: 20px;
}

运算:less语法提供了加(+)减(-)乘(*)除(/或外面加小括号)等运算,任何的数字、颜色、变量都可以参与运算。运算符号左右两边必须要用空格隔开,如果两个变量中只有一个变量有单位或两个变量的单位相同时,则结果的单位就是其中的这个单位;当两个变量都有单位时,以前面变量的单位为结果的单位;

	@fontsize:12px;@width:200px;div {width: (24 / @fontsize);height: @width / 2rem;border: 12rem / @fontsize solid (#333222 - #111222);}//对应的css代码://div {//  width: 2px;//  height: 100px;//  border: 1rem solid #222000;//}

calc() :使用calc()后,将不再对数学表达式进行计算,但是在嵌套函数中是会计算变量和数学公式的值,如:

@add: 20px/2;
@num:calc(20px/2);
div{width:calc(20% + (@add - 5px));height:@num;
};//对应生成的css代码如下:
div {width: calc(20% + (10px - 5px));height: calc(20px/2);
}

转义:将所有字符串作为属性或变量值,除interpolation外,语法是:~‘字符,串’,如:

@maxw: ~"(max-widht: 1200px)";//less3.5后可以省略~及引号,直接写成@maxw:(max-widht: 1200px)
div {@media @maxw {width:1200px;}
}//上面代码是生成一个条件为max-widht: 1200px的媒体查询,编译后的代码如下:
@media (max-widht: 1200px) {div {width: 1200px;}
}

函数:less和其他语言一样内置了很多好用的函数,小编在这里不做过多的强调了,如需了解更多,可以阅读官方文档函数篇:https://less.bootcss.com/functions/,这里介绍高频使用的函数:

	//1.length(array):获取array数组的长度,less中也是可以定义像其他语言类似的数组,其语法如:@arr:320px,540px,750px,920px,1200px;//less中定义数组不使用[]包裹。//获取arr数组的长度,并赋值给变量arrLength:@arrLength:length(@arr);//2.extract(arr,index);获取数组arr中第index个元素,如获取@rr中的第二个元素并赋值给@arrSecond:@arrSecond:extract(@arr,2);//特别提醒,元素是从1开始计算的。

less中函数实现遍历功能:less语言中没有遍历,若要实现遍历的方法,可以通过函数自调用的方式来模拟遍历,但是函数自调用可能会陷入死循环,因此需要加入条件(此方法常用于rem + less + 媒体查询 布局中,因为rem + less布局时需要适应多款设备,此时就要定义多个html根font-size的值,为了更好的维护,采用函数模拟遍历的方式可自动生成多种font-size的值,如下案例:)

//.functionName(参数) when (条件){code},less中函数可以使用when加条件,当条件满足时会执行函数,否则不再执行函数,如:
.setFontSize(@index) when (@index <= @arrLength){@media (min-widht:extract(@arr,@index){html{font-size:@baseSize / @psdWidth * extract(@arr,@index);};};.setFontSize(@index + 1);//函数自己调用自己实现遍历效果,每次调用时参数+1来提满足判断条件
};//调用:
.setFontSize(1);//调用时传入参数1,从1开始遍历

将一个less文件导入另一个less文件:

	@import "common.less"

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575361.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql数据库备份和按条件导出表数据

Mysql数据库备份和按条件导出表数据一、备份数据库# mysqldump -u root -p dbcurr>/home/20090219.sqlmysqldum为备份命令&#xff0c;-u用户&#xff0c;-p密码&#xff0c;dbcurr数据库名&#xff0c;>备份符&#xff0c;/home/20090219.sql存储数据文件的路径。www.2…

jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器

jQuery简介&#xff1a; jQuery是一个高效、精简并且功能丰富的javascript库&#xff0c;它提供的API简单易学&#xff0c;且兼容众多浏览器&#xff0c;极大地简化了javascript代码开发&#xff0c;包含内容&#xff1a;HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函…

睡觉应该按时

最近又想奋起 &#xff0c;最天又是 12 点多睡的&#xff0c;结果呢&#xff0c;呵呵&#xff1f; 一个规律的认识&#xff0c;真是反反复复&#xff0c;希望养成一个好的习惯&#xff0c;而不是不能可持续发展的习惯转载于:https://www.cnblogs.com/51Tsinghua/p/3831444.html…

golang的指针到string,string到指针的转换

由于某个需求&#xff0c;需要如题的转换&#xff0c;废话不多说&#xff0c;直接贴代码了&#xff0c;其实挺丑了&#xff0c;备用了 func (this *Server) socketParserHandler(client *genTcpServer.Client, fullData []byte) {fmt.Println("original data is", cl…

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery事件&#xff1a; jQuery中的事件和javascript中的事件基本相似&#xff0c;不同的是jQuery中的事件处理函数写在事件后面的括号中&#xff0c;如&#xff1a; <script>$(input).click(function() {alert(hello word);});</script>jQuery中常见事件&#xf…

atitit.提升开发效率---mda 软件开发方式的革命

atitit.提升开发效率---mda 软件开发方式的革命 1. 软件开发方式的革命开发工具的抽象层次将再次提升 1 2. 应用框架和其实现相分离 2 3. 目前的问题模型和代码不同步 2 4. MDA的历史及其由来 2 5. MDA的三个主要目标是&#xff1a;轻便性、 互操作性和可重用性。 3 6. MDA跟代…

BigQuery 分区表简介和使用

大纲 什么是分区表 我们先看定义&#xff1a; 分区表是一种数据库表设计和管理技术&#xff0c;它将表中的数据划分为逻辑上的多个分区&#xff0c;每个分区包含一组特定的数据。每个分区都根据定义的分区键&#xff08;通常是一个列或字段&#xff09;的值进行分类&#xff…

jQuery操作属性、设置文本、遍历元素、元素创建添加删除、操作元素尺寸、操作元素位置、注册事件、事件处理、解绑事件、拷贝、多库共存、jQuery插件

jQuery操作属性&#xff1a; jQuery中提供三种方法操作属性&#xff0c;分别是&#xff1a;prop()、arrt()、data(),具体如下&#xff1a; prop()操作自带属性&#xff1a;用来操作元素本身自带的属性&#xff08;包括没有显示在DOM上的自带属性&#xff09;&#xff0c;如:a…

C_文件读写流

strcmp() 所在头文件&#xff1a;string.h 功能&#xff1a;比较俩个字符串 一般形式&#xff1a;strcmp(字符串1&#xff0c;字符串2) 说明&#xff1a; 当S1<S2时&#xff0c;返回为负数return result,result<0 当S1S2时&#xff0c;返回值0 当S1>S2时&#xff0c;返…

初次使用Apache、ip地址、防火墙、域名、DNS、hosts文件、端口、URL介绍、Apache配置文件、配置虚拟主机、请求响应、http协议、

Apache提供web服务&#xff1a; 启动Apache&#xff0c;让其客户端可以使用你机器上安装的Apache提供的web服务&#xff0c;访问你机器上的网站。这种情况下你的计算机就是服务器&#xff0c;别人的机器就是客户端。 注意&#xff1a;确保配置文件语法检查通过&#xff0c;确…

量子计算机算法与应用研究论文(转载务必注明出处)

量子计算机算法与应用研究 学科分类&#xff1a;计算机科学 湖北省沙市中学 谢晓啸 摘要 1.量子计算机 2.量子计算机算法 3.移动互联 4.云计算 5.经典计算机的局限 6.量子计算前景 二零一四年一月十二日 目 录 摘 要......................................................…

cookie和session、web服务工作原理、Apache配置php扩展、php简介

cookie和session: cookie和session区别&#xff1a;cookie数据是存在本地的&#xff0c;而session数据是存在服务端的&#xff0c;session比cookie更安全。 cookie&#xff1a;用于http做会话时记住客户端所做的事,这里可以解决首次登陆页面广告等问题。 服务端与客户端在做开…

分享MYSQL中的各种高可用技术(源自姜承尧大牛)

图片和资料来源于MYSQL大牛姜承尧老师&#xff08;MYSQL技术内幕作者&#xff09; 姜承尧&#xff1a; 网易杭州研究院 技术经理 主导INNOSQL的开发 mysql高可用各个技术的比较 数据库的可靠指的是数据可靠 数据库可用指的是数据库服务可用 可靠的是数据&#xff1a;例如工商银…

php中数据类型、数组排序、循环语句、混编、操作本地文件流程、常用API、函数、魔术常量

php中数据类型&#xff1a; php中有7种数据类型&#xff0c;分别是&#xff1a; //1.String字符串&#xff0c;用引号包裹的字符&#xff0c;如&#xff1a;$str hello word;//2.Integer整型&#xff0c;可以是正数或负数&#xff0c;有十进制、十六进制、八进制&#xff0c;…

J2ME游戏中的图片处理

图片资源乃是游戏的外衣&#xff0c;直接影响一个游戏是否看上去很美。在J2ME游戏开发中&#xff0c;由于受到容量和内存的两重限制&#xff0c;图片使用受到极大的限制。在这种环境中&#xff0c;处理好图片的使用问题就显得更加重要。 本文从容量和内存两个方面谈谈J2ME游戏图…

php中命名空间、面向对象、访问控制、接口

命名空间&#xff1a; php中命名空间&#xff1a;解决自己编写的代码和php内置及第三方的函数、常量、类命名冲突问题(在不同的命名空间可以定义相同名称的常量、类、函数)&#xff1b;及为繁琐的命名创建一个别名&#xff0c;具体如下&#xff1a; //1.简单定义命名空间&…

经典的十个机器学习算法

1、C4.5 机器学习中&#xff0c;决策树是一个预测模型&#xff1b;他代表的是对象属性与对象值之间的一种映射关系。树中每个节点表示某个对象&#xff0c;而每个分叉路径则代表的某个可能的 属性值&#xff0c;而每个叶结点则对应从根节点到该叶节点所经历的路径所表示的对象的…

JSON数据、字符串拼接、宽字符处理、数组、Notice警告、isset和empty、变量、作用域、常量、include和require

JSON数据&#xff1a; 字面量是代码中表述数据的手段&#xff0c;JSON是一门类似于js字面量表述数据的手段&#xff0c;JSON是现在市面上用的最广的数据表述手段。 1.JSON对象中属性名称必须用双引号引起来 2.JSON中字符串必须用双引号引起来 3.JSON中不允许使用注释 4.JS…

表单及数据提交、表单的作用、服务端接收提交的数据、php处理数据流程、文件域及文件域中数据处理、php展示数据(响应)

表单及数据提交&#xff1a; 表单的作用&#xff1a; 用于收集相关信息&#xff1b;html中有专门提交数据的标签&#xff0c;可以很容易的收集用户输入的信息&#xff0c;这个标签有两个重要的属性&#xff1a;action表单提交的地址和method以什么方式提交表单&#xff0c;通…

数据库、MySQL介绍及安装流程、SQL语句中增删改查、SQL注入、通过php操作数据库,plugin ‘caching_sha2_password加密规则,分表查询

MySQL数据库&#xff1a; 数据库&#xff1a; 存放数据的仓库&#xff0c;用来按照特定的结构去组织和管理我们的数据&#xff0c;有数据库就可以更加方便的储存数据&#xff1b; 数据库只是存储数据的一种手段&#xff0c;最终数据是存放在硬盘中的&#xff0c;只是存放的格…