less表达式使用

最新推荐文章于 2024-02-04 00:01:18 发布
最新推荐文章于 2024-02-04 00:01:18 发布
阅读量184 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/562202
版权

示例

@the-border:1px;
@base-color:#111;
@red:#842210;

#header{
	color:(@base-color * 3);
	border-left:@the-border;
	border-right:(@the-border * 2);
}

#footer{
	color:(@base-color + #003300);
	border-color:desaturate(@red,10%);
}


说明

(@base-color * 3)表示表达式运算


语法

(变量1 运算符 变量2)


生成的css文件(example4.css)

#header {
  color: #333333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}


在html文件中使用css(less4.html)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>less4</title>
	<link rel="stylesheet" href="example4.css">
	<style>
		#header,#footer{
			width: 500px;
			height: 400px;
		}

		#header{
			border-style: solid;
		}

		#footer{
			border-style: solid;
			border-width: 1px;
		}
	</style>
</head>
<body>
	<div id="header">
		header
	</div>

	<div id="footer">
		footer
	</div>
</body>
</html>

本文转自 素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1900685


weixin_34362991
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
less的使用
苦涩
10-20 325
less 变量和插值 less变量插值使用@{}表示 // less变量 @c: #e4393c; // less变量插值使用@{}表示 // 选择器变量插值 @b: box; // 路径变量插值 @imgUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'; // 属性变量插值 @bgsize: background-size; // ---------------------------------
Less里css表达式的写法示例介绍
09-25
主要介绍了Less里css表达式的写法，需要的朋友可以参考下。修复IE6的fixed，IE7+已经支持了
Less的条件表达式Guards
歪脖先生的博客
11-21 2725
Less的条件表达式 当需要根据表达式，而不是参数的值或数量进行匹配时，条件表达式（Guards）就显得非常有用。如果你熟悉函数式编程的话，对条件表达式也不会陌生。 为了尽可能地接近CSS的语言结构，Less使用关键字 when 而不是 if/else来实现条件判断，因为 when 已经在CSS的 @media query 特性中被定义。 表达式中可以使用比较运算符、逻辑运算符、或检查函
Less里css表达式的写法
weixin_33825683的博客
06-17 143
项目中用的grunt-contrib-less， 写了以下less代码 .mapfix{ position: fixed; top:10px; width: 430px; z-index: 100; background: #fff; -position:absolute; -top:expression(eval(document.documentE...
大家一起学习less 1:混合
weixin_34344403的博客
09-13 129
我们先看以下一段例子： // LESS .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #foot...
linux grep与正则表达式使用介绍
10-15
正则表达式引擎如PCRE（Perl兼容正则表达式）在许多程序中得到广泛应用，包括grep、sed、awk、vim、less、nginx和varnish等。 元字符是正则表达式中的特殊字符，例如`.`匹配任意单个字符，`[]`用于匹配指定范围内的...
less 三元表达式
07-28
三元表达式是一种简洁的条件表达式，它由三个部分组成：条件、真值和假值。在C语言中，三元表达式的语法如下： ``` 条件 ? 真值 : 假值 ``` 当条件为真时，表达式的值为真值；当条件为假时，表达式的值为假值。 ...
Less小结
ling_xy的博客
03-30 559
文章目录引入Less一 .变量二 .混合三 .嵌套四 .冒泡五 .转义六 .函数七 .命名空间八 .导入 Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 引入Less <!-- 浏览器端引入less文件 --> <link rel="stylesheet/less" href="./css/index.less">
学会如何使用LESS（三）----条件表达式、循环、合并属性和引入
热门推荐
NINE-NINE的博客
06-09 1万+
学会如何使用LESS（三）----条件表达式、循环、合并属性和引入
Less条件表达式和循环（8）
weixin_44679078的博客
12-20 937
条件表达式 带条件的混合 比较运算符：< >= = =< < true 例子： less编写 /* when 是关键字； lightness 是函数库里面的一个函数，作用是取得颜色值中的亮度，返回一个百分比的值 */ .mixin(@a) when (lightness(@a) >= 50%) { /* 255/2=127.5≈128 */ background-color:black; } .mixin(@a) when (lightness(@a) < 50%) {
Less 语法简述
杏子
03-04 6080
一、Less特征 Less是CSS预处理器，是对CSS的一种拓展；同时具备动态语言的特点，如变量、运算、函数等，故也是一门动态语言。 二、Less使用环境 Less既可以在客户端使用（浏览器），也可以在服务端使用（Node.js）； 客户端使用： <link rel="stylesheet/less" href="style.less"> <script src="le...
web前端基础——Less语法
NGUP_LEE的博客
03-11 9901
在使用rem对移动端界面布局进行适配时，需要完成px单位到rem单位的转换，这个过程中的除法运算对于界面中很多个标签时，是很麻烦的，但是CSS又不支持计算写法，那么有什么办法可以解决这个问题呢？ 文章目录1、Less语法简介2、Less语法的运算3、Less语法快速生成选择器4、Less变量设置属性值5、Less文件的导入与导出5.1 导入5.2 导出5.3 禁止导出 1、Less语法简介 Less是一个CSS预处理器，Less文件后缀是.less 扩充了CSS语言，使CSS具备一定的逻辑性、计算能力.
移动Web——less
最新发布
weixin_48719464的博客
02-04 738
写法：在less文件的第一行添加 // out: 存储URL。写法：在less文件第一行添加：// out: false。语法：导入：@import "文件路径";提示：如果是less文件可以省略后缀。作用：存储数据，方便使用和修改。作用：导入less公共样式文件。提示：文件夹名称后面添加 /作用：快速生成后代选择器。概念：容器，存储数据。
Less常用内置函数
妍思码匠的博客
09-05 763
示例： 示例： 示例： 示例： 示例： 示例： 示例：
Less预处理——继承、导入、条件表达式和函数
HuoZhiyan 的博客
10-04 2911
Less预处理——继承、导入、条件表达式和函数...
Less编译结果中除法未被执行？
席木木的博客
02-13 593
    先来看一个例子，编写了一个以下的common.less文件，用来进行针对不同机型的字体适配，less代码如下， //使用普通网页打开时，直接按照font-size：50px显示即可 html { font-size: 50px; } // 使用@media设置常见的屏幕尺寸及其HTML字体font-size属性值大小 //屏幕的划分份数：15份 @screennums: 15; //屏幕尺寸320px @media screen and (min-wi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值