Less
文章平均质量分 67
less的简单使用
心刻
这个作者很懒,什么都没留下…
展开
-
Less颜色混合函数(14)
颜色混合函数multiply()函数作用:分别将两种颜色的红绿蓝(RGB)三种值做乘法运算,然后再除以255,输出结果是更深的颜色。例子:Less中编写div{ background:#ff6600; background:#000000; background:multiply(#ff6600,#000000);}编译结果div{ background:#ff6600; background:#000000; background:#000000;}...原创 2021-02-02 09:45:12 · 677 阅读 · 0 评论 -
Less颜色值运算函数(13)
颜色值运算函数注意事项:颜色值运算的时候要保证单位是相同的,计算时候百分比会通过绝对值来处理,参数必须在限定的范围内,不能超过界限(比如饱和度值最大是100%,那么计算时候最大值就不能超过100%)。返回值会自动转换成十六进制的颜色值saturate()函数作用:增加一定数值的颜色饱和度例子:Less中编写div{ background:hsl(90,80%,50%); background:saturate(hsl(90,80%,50%),20%);}编译后的结果div{ bac原创 2021-01-30 14:36:12 · 2632 阅读 · 1 评论 -
Less颜色值定义函数和颜色值通道提取函数(12)
颜色值定义函数rgb()函数作用:通过十进制红色、绿色、蓝色三种值(RGB)创建不透明的颜色对象。rgba()函数作用:通过十进制红色、绿色、蓝色以及alpha四种值(RGBA)创建带alpha透明的颜色对象。argb()函数作用:创建格式为#AARRGGBB的十六进制(hex representation)颜色hsl()函数作用:通过色相(hue)、饱和度(saturation)、亮度(lightness)三种值(hsl)创建不透明的颜色对象。hsla()函数作用:通过色相(hue)、原创 2021-01-29 09:14:32 · 1404 阅读 · 0 评论 -
Less数学函数和类型函数(11)
数学函数ceil()函数作用:向上取整例子:Less中编写div{ width:ceil(2.5px);}编译结果div{ width:3px;}floor()函数作用:向下取整例子:Less中编写div{ width:floor(2.5px);}编译结果div{ width:2px;}percentage()函数作用:将浮点数转换为百分比例子:Less中编写div{ width:percentage(2.5px); width:percen原创 2021-01-25 19:37:06 · 717 阅读 · 0 评论 -
Less字符串函数和长度相关函数(10)
字符串函数escape()函数作用:将输入字符串中的uri特殊字符进行编码处理不转义编码:, / ? @ & + ' ~ ! $转义编码:# ^ ( ) { } | : > < ; [ ] =例子:Less中编写div{ d:escape('123=abc');}编译结果div{ d:123%3Dabc;}e()函数作用:Css转义,用~“值”符合代替。(作用其实就是原样输入内容,避免编译)常见在calc属性中,避免less提前编译了结果例子Le原创 2021-01-25 17:05:56 · 382 阅读 · 0 评论 -
Less函数(9)
函数(functions)介绍:Less提供了许多用于转换颜色,处理字符串和进行算术运算的函数,这些函数使用起来非常简单。实例1:最常见的 rgb() 函数,将 rgb 模式的值转换为16进制的值less写法:.bgcolor{ background:rgb(0,133,0);}编译结果:.bgcolor{ background:#008500;}实例2:提取蓝色值的 blue() 函数less写法:.bgcolor{ background:blue(#ffffff);原创 2020-12-20 23:46:25 · 3502 阅读 · 1 评论 -
Less条件表达式和循环(8)
条件表达式带条件的混合比较运算符:< >= = =< < true例子:less编写/* when 是关键字; lightness 是函数库里面的一个函数,作用是取得颜色值中的亮度,返回一个百分比的值 */.mixin(@a) when (lightness(@a) >= 50%) { /* 255/2=127.5≈128 */ background-color:black;}.mixin(@a) when (lightness(@a) < 50%) {原创 2020-12-20 23:08:15 · 935 阅读 · 1 评论 -
Less引入和关键字(7)
引入(important)引入一个或多个 .less 文件,然后引入的这个文件中的所有变量都可以在当前的less项目中使用。例子:main.less文件@wp:960px;style.less文件@import "main";.content{ width:@wp;}编译结果.content{ width:960px;}注意:引用 .css 文件会被原样输出到编译的文件中,所以在写less里面不能混合css文件中的样式例子:index.css文件.color{ co原创 2020-12-20 12:07:59 · 494 阅读 · 1 评论 -
Less命名空间和作用域(6)
命名空间什么是命名空间?将一些需要的混合组合在一起,可以通过嵌套多层id或者class来实现。例子:less编写#bgcolor(){ background:#ffffff; .a{ color:#888888; &:hover{ color:#ff6600; } .b{ background:#ff0000; } }}.bgcolor1{ background:#fdfee0; // 相当于把.a里面的内容copy到这里 #bgcolor&原创 2020-12-20 01:05:10 · 418 阅读 · 1 评论 -
Less运算(5)
运算(operations)说明:任何数值,颜色和变量都可以进行运算。数值型运算Less会为你自动推断数值的单位,所以不必每个值都加上单位注意:运算符与值之间必须以空格分开,涉及优先级时以()进行优先级运算实例:Less写法,wp{ width:450px + 450;}编译结果:,wp{ width:900px;}颜色值运算Less在运算时,先将颜色值转换成 rgb 模式,然后运算完再转换为16进制的颜色值并且返回注意:既然是转成 rgb 模式, rgb 的取值范围是原创 2020-12-19 23:30:55 · 209 阅读 · 1 评论 -
Less嵌套规则(4)
嵌套规则嵌套规则它模仿了HTML的结构,让我们的css代码更加简洁明了清晰实例:传统CSS写法#header{ color:black;}#header .navigation{ font-size:12px;}#header .logo{ width:300px;}less中的写法#header{ color:black; .navigation{ font-size:12px; } .logo{ width:300px; }}父元素选择器&原创 2020-12-19 22:42:36 · 223 阅读 · 1 评论 -
Less混合(3)
混合(mixins)什么是混合混合就是一种将一系列属性从一个规则集引入(“混合”)到另一个规则集的方式。普通混合例子:less编写.bordered{ border-top:dotted 1px black; border-bottom: solid 2px black;}.post a { color:red; .bordered;}编译结果.bordered{ border-top:dotted 1px black; border-bottom: solid 2px原创 2020-12-19 11:00:16 · 497 阅读 · 1 评论 -
Less变量(2)
变量(variables)1.普通的变量由于变量只能定义一次,中途值是不变的,所以实际上他们就是“常量”定义方式: @变量名: 值;例子:less中写法@blue: #5B83AD;#header { color: @blue;}编译结果:#header{ color: #5B83AD;}2.作为选择器和属性名的变量使用方式:@{变量名}例子:less中写法@mySelector: width;.@{mySelector}{ @{mySelector}: 9原创 2020-12-13 22:27:38 · 925 阅读 · 0 评论 -
Less初始(1)
什么是LessLess是一个Css预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions)和许多其他的技术,让你的Css更具有维护性,主题性,扩展性。Less官方网站英文:http://lesscss.cn/中文:https://less.bootcss.com/传统Css写法与Less写法css写法与less写法简单对比(下面两段代码实现的效果是一样的)style.css文件 .content ul { l原创 2020-12-13 10:37:25 · 187 阅读 · 0 评论