Less Css总结

最新推荐文章于 2024-08-15 14:30:00 发布
最新推荐文章于 2024-08-15 14:30:00 发布
阅读量646 收藏
点赞数
分类专栏： CSS 文章标签： css less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hansuiqingsong/article/details/33776677
版权

    LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (要在服务器中运行，不能再本地运行)，也可以借助Node.js或者Rhino在服务端运行。


在使用less前，你要为你的HTML文件引入相应的文件
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.min.js" type="text/javascript"></script>

其中styles.less是我们自己写的样式文件。 style.less的引入必须在less.min.js前面。​

一、变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了​。 
  // LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
 
/* 生成的 CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}


二、混合(继承)

// LESS


@color: #4D926F;
.common-div(@radius: 5px, @margin: 10px) {
	border: 1px solid @color;
	border-radius: @radius;
	display: inline-block;
	margin: @margin;
}
.div1 {
	.common-div;
}
.div2 {
	.common-div(2px);
}
 
/* 生成的 CSS */

.div1 {
  border: 1px solid #4d926f;
  border-radius: 5px;
  display: inline-block;
  margin: 10px;
}
.div2 {
  border: 1px solid #4d926f;
  border-radius: 2px;
  display: inline-block;
  margin: 10px;
}


三、嵌套

// LESS

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


/* 生成的 CSS */

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

四、运算

less还提供了一个强大的功能——运算。运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。 
// LESS

@color: #4D9261;
@border: 1px;
@div_display: inline-block;


.div1 {
	display: @div_display;
	border: @border * 2 solid       @color + #111;
}

/* 生成的 CSS */

.div1 {
  display: inline-block;
  border: 2px, solid, #5ea372;
}

五、 @augmentums

@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写: 
// LESS

@div_display: inline-block;


.box-shodow (@x: 1px, @y: 2px, @blur: 1px, @color: rgb(246, 184, 195)) {
	box-shadow: @arguments;
}


.div1 {
	display: @div_display;
	.box-shodow;
}

/* 生成的 CSS */

.div1 {
  display: inline-block;
  box-shadow: 1px 2px 1px #f6b8c3;
}

六、匹配模式

根据传入的参数，我们将会匹配不同的样式。如: 
// 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);
}

/* 生成的 CSS */

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

具体实现如下：
第一个混合定义并未被匹配，因为它只接受dark做为首参
第二个混合定义被成功匹配，因为它只接受light
第三个混合定义被成功匹配，因为它接受任意值

less还会根据参数个数进行匹配 
// LESS
.div-content (@display, @color: #FF0000) {
	display: @display;
	color: @color;
}
.div-content (@display) {
	display: @display;
}


.div1 {
	.div-content(inline-block);
}


/* 生成的 CSS */

.div1 {
  display: inline-block;
}

七、引导

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果你对函数式编程非常熟悉，那么你很可能已经使用过导引。其实在我看来，引导最主要的就是if/else判断。 
// LESS
.max-div (@width) when (@width > 150) {
	background-color: pink;
}
.max-div (@width) when (@width =< 150) {
	background-color: green;
}
.div1 {
	width: 100px;
	.max-div(100px);
}
.div2 {
	width: 200px;
	.max-div(200px);
}


/* 生成的 CSS */

.div1 {
  width: 100px;
  background-color: green;
}
.div2 {
  width: 200px;
  background-color: pink;
}


when关键字用以定义一个导引序列。导引中可用的全部比较运算有： >, >=, =, =<, <。此外，只有关键字true表示布尔真值，除去关键字true以外的值都被视示布尔假。
此外，less css提供
  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl
来判断类型。
提供
  • ispixel
  • ispercentage
  • isem
来判断单位，如 
// LESS
.btn-gb (@c) when(iscolor(@c)) {
	color: @c;
}
.btn-gb (@c) when(isnumber(@c)) {
	width: @c;
}
.div1 {
	.btn-gb(#FF0000);
}
.div2 {
	.btn-gb(200px);
}

/* 生成的 CSS */
.div1 {
  color: #ff0000;
}
.div2 {
  width: 200px;
}


八、Math 函数

LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:
round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2` 
// LESS
.div1 {
	width: round(2.34)px;
}
.div2 {
	width: ceil(3.55)px;
}

/* 生成的 CSS */
.div1 {
  width: 2 px;
}
.div2 {
  width: 4 px;
}


九、作用域

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止. 
// LESS
@color: #FF0000;


#div-common {
	@color: #00FF00;
	.div-child {
		color: @color;
	}
}
.div-common2 {
	color: @color;
}
.div1 {
	#div-common > .div-child;
}
.div2 {
	.div-common2;
}

/* 生成的 CSS */
#div-common .div-child {
  color: #00ff00;
}
.div-common2 {
  color: #ff0000;
}
.div1 {
  color: #00ff00;
}
.div2 {
  color: #ff0000;
}


十、Importing

我们可以通过importing关键字引入less文件或css文件。引入less文件时后缀名可带可不带。
@import "lib.less";   /* 或@import "lib";  */
@import "lib.css";

十一、字符串插值

变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构: 
// LESS
@base-url: "http://assets.fnord.com";


.div1 {
	background-image: url("@{base-url}/images/bg.png");
}

/* 生成的 CSS */
.div1 {
  background-image: url("http://assets.fnord.com/images/bg.png");
}





如果安装了node.js，那我们可以安装less将less文件解析成css文件。
1. npm install -g less
2. lessc styles.less > styles.css
3. 如果想要压缩版的css, 使用命令: lessc -x styles.less > style.css




寒岁青松
关注
专栏目录
Webpack中css-loader和less-loader的使用教程
12-03
在处理CSS和预处理器语言如Less时，Webpack 提供了专门的加载器（loader）来处理这些任务。本文将详细介绍如何在Webpack配置中使用`css-loader`和`less-loader`。 ### 一、css-loader `css-loader`的主要功能是...
VueJS如何引入css或者less文件的一些坑
10-19
在使用Vue.js框架开发Web应用时，引入CSS或Less样式文件是项目中的常见需求。然而，在此过程中可能会遇到一些“坑”，即遇到了难以预料的问题或配置上的挑战。本篇文章将详细探讨在Vue.js项目中引入CSS或Less文件时...
LESS
01-08 526
什么是LESSCSS LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。 语言特性快速预览： 变量： 变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的
css-Less
weixin_34306446的博客
01-22 273
介绍 语法 介绍 Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护,提高开发效率。 但正因为它是预处理语言，因此不能直接被使用，需要进行编译后才可以。 less需要 nodejs支持。 安装： > npm install -g less 查看: > lessc 编译 命令编...
CSS——less
最新发布
Fan_web的博客
08-15 431
本文主要分享less的一些简单地学习内容，以及对于混合函数的一些引入，下一篇我们即将学习CSS的弹性盒知识。
LESS (CSS 框架)
weixin_33713350的博客
03-27 130
CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。 LESS 在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS...
less css
金溪的博客
12-13 687
Less是一个CSS的超集，Less允许我们定义变量，使用嵌套式声明，定义函数等。严格说Less包含两部分：（1）Less的语法 （2）Less预处理器。浏览器终究只认识CSS，所以Less文件需要经过Less预处理器编译成为CSS。 在工具的支持下，一个Less文件首先会经过CSS modules的编译，把类名全局唯一化，然后才被Less 预处理器编译成为CSS文件，所以Less文件可以和CS...
详解Angular-cli生成组件修改css成less或sass的实例
12-09
总结一下，通过修改Angular CLI的配置文件`angular.json`，我们可以让生成的组件默认使用Less或Sass作为样式语言，同时确保编译过程的正确性。这种方式不仅提高了开发效率，也使得代码组织更加符合个人或团队的编程...
Button-animations:一些使用lesscss的简单按钮动画
05-18
总结来说，“Button-animations”项目为开发者提供了一套基于Less CSS的按钮动画集合，通过伪元素和HTML实体实现各种视觉效果。这不仅提升了用户界面的互动性和吸引力，还展示了Less CSS在简化CSS编写和维护方面的...
【Less-CSS】初识Less，使编写 CSS 变得简洁
A-Itfuture的博客
09-22 486
LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。方法一：实现把less文件夹里的less文件，保存后生成的css文件都放到css文件夹中。./表示当前文件夹的目录。
less css 语法
一名普通码农的菜地
07-21 4766
作为CSS的一种扩展，LESSCSS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS的语法。这样的设计使得学习LESS很轻松，而且你可以在任何时候回退到CSS。 变量 很容易理解： @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } 输出： #he
css Less基础
黄大仙
08-23 503
维护css的弊端less介绍Less使用less变量变量名语法规范less编译less嵌套less算数运算 维护css的弊端 CSS是一门非程序式语言,没有变量、函数、 SCOPE(作用域)等概念CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的。不方便维护及扩展,不利于复用，没有很好的计算能力。非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CS代码项目。 less介绍 Less( Leaner Style Sheets的缩写)是一门CSS扩展语言,也成为CSS预
less css 教程_LESS CSS教程：设计漂亮的菜单导航栏
cune1359的博客
07-04 723
Web设计和开发的世界确实在Swift发展。 我们每天（几乎）在社区中发布的大量新内容中都可以看到这一点，无论是Apps还是新框架 ，都有助于使我们作为Web设计师或开发人员的日常工作更加有效和高效。 今天，我从Web设计的发展中引起了我的注意的是LESS ，这是一种可编程样式表语言，它通过结合一些编程概念（如变量，混合，函数和运算）来扩展我们编写CSS语法的方式。 它打开了编写CSS...
Less简介——CSS
mantou_riji的博客
04-18 3649
文章目录CSS的高级功能定义变量可以直接传计算式子问题：这些属性比较新，很多浏览器不支持less简介less基础语法嵌套结构注释变量可以通过`$属性名`，直接对属性值进行引用父元素扩展extend第二种扩展：混合函数混合函数函数 CSS的高级功能 定义变量 css也可以进行变量的定义 可以在html中定义全局变量，之后想要修改的时候直接修改全局变量即可。 变量定义格式： --变量名:变量值; 变量的使用格式： var(--变量名) eg： <!DOCTYPE html> <html l
LESS CSS 框架简介////Bootstrap 简洁、直观、强悍的前端开发框架，
zsx930305的博客
10-12 385
https://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ less的在线编译网址： http://lesscss.org
less，css样式扩展
Libra99WU的博客
09-12 245
文章目录前言二、使用步骤1.less使用语法2.读入数据总结 前言 less使用的一点小结 # 一、less简介？ less是一门css的预处理语言 - less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式 - 在less中添加了许多的新特性：像对变量的支持、对mixin的支持... ... -- less的语法大体上和css语法一致，但是less中增添了许多对css的扩展， 所以浏览器无法直
Less CSS预处理器入门指南
官方文档（http://lesscss.org/）是一个很好的入门教程，同时，Bootstrap框架广泛使用Less，这也为学习者提供了一个实践Less的最佳实例。 **二、搭建学习环境** 学习Less通常有两种方式：浏览器端实时编译和服务器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值