`
tcspecial
  • 浏览: 911630 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Less

    博客分类:
  • web
阅读更多

互联网技术发展太快了,想想前几年还在手动改一行行修改CSS文件。直至现在Less的出现,less支持变量,类似函数调用,使得CSS更加容易维护和编写。上手非常容易,官方也提供了详细的资料。

 

/* less学习备忘 */

/*1.一种注释,可以在css文件中显示*/
//另一种注释,不在css文件中显示

// 2.变量以@开始,正如php变量以$开始
@test_width:100px;

.border{
	border: solid 5px pink;
}

.content{
	background-color: red;
	width: @test_width;
	height: @test_width;

	.border;  // 混入
}


.radius(@myradius:20px){
	-webkit-border-radius:@myradius;
	-moz-border-radius:@myradius;
	border-radius: @myradius;
}


#rd{
	width: 100px;
	height: 100px;
	background-color: yellow;

	// 3.混入(类似函数调用)
	.radius();
}


// 4.匹配模式,相当于js中的if语句,if(top){}else if(bottom){}
.triangle(top,@w:5px,@c){
	// width: 0px;
	// height: 0px;
	// overflow: hidden;

	border-width: @w;
	border-color: transparent transparent @c transparent;
	border-style: solid;
}

.triangle(bottom,@w:20px,@c:red){
	border-width: @w+10;		// 5.变量可参与+-*/运算
	border-color: @c transparent transparent transparent;
	border-style: solid;
}

// 6.@_用于添加公共部分代码
.triangle(@_,@w:20px,@c:red){
	width: 0px;
	height: 0px;
	overflow: hidden;
}

.tangle{
	.triangle(bottom);
}


// 7.嵌套规则,非常实用的一个功能
.news{
	width: 300px;
	margin: 30px auto;
	padding: 0px;
	list-style: none;

	li{	// news li {}
		height: 30px;
		line-height: 30px;
		background-color: yellow;
		margin-bottom: 5px;
		padding: 0 10px;
	}

	a{
		float: left;

		&:hover{	// &: 相当于 news a:hover{}
			color: red;
		}
	}

	span{
		float: right;
	}
}


// 8.@arguments,参数比较多时,可直接用关键字@arguments代替
.border_arg(@s:solid,@w:5px,@c:red){
	border: @arguments;
}


.br{
	.border_arg();

	// 9.避免编译,直接在语句前加上~
	//width: calc(30px-5px);
	width: ~'calc(30px-5px)';
}

 

 更多介绍见:lesscss.net

 Less编译工具:koala-app.com/index-zh.html

 

 

分享到:
评论

相关推荐

    less.min.js

    less

    关于less的(node npm)环境配置

    标题提及的是“关于less的(node npm)环境配置”,这指的是在计算机环境中设置和配置LESS预处理器的开发环境,其中涉及到Node.js和npm(Node包管理器)这两个关键工具。LESS是一种CSS预处理器,它可以让你用更简洁、...

    webpack-less-loader

    它们的作用是将不同类型的文件(如 CSS、图片、字体等)转化为 Webpack 可以理解的模块,并且可以进行预处理,例如 Babel 对 ES6 代码的转换,或者 Less-Loader 对 Less 代码的编译。 **Less** 是一种 CSS 预处理器...

    mrcrowl.easy-less-1.7.2.zip

    《深入解析mrcrowl.easy-less-1.7.2.zip:轻松驾驭LESS语言的VSCode插件》 在Web开发领域,LESS是一种强大的CSS预处理器,它扩展了CSS的功能,引入了变量、嵌套规则、混合(mixins)以及函数等特性,使得CSS代码...

    learn more study less 英文原版

    ### 《Learn More Study Less》核心知识点概览 #### 标题解读 - **"Learn More Study Less"**:本书的核心理念在于通过高效的学习方法帮助读者在减少学习时间的同时掌握更多的知识。 #### 描述解读 - **尝试改变已...

    less.js, less 转 css 工具

    **less.js 和 Less 语言简介** Less 是一种 CSS 预处理器,它扩展了 CSS 的功能,让样式表编写变得更简洁、模块化和可维护。Less 提供了变量、嵌套规则、运算符、函数等高级特性,允许开发者编写更灵活、可复用的...

    less_scss_lesssass_

    在前端开发领域,LESS 和 SASS 是两种非常流行的CSS预处理器,它们扩展了CSS的语法,使得编写样式表更加高效、模块化。标题"less_scss_lesssass_"表明我们将探讨这两个工具的核心概念和使用方法。 LESS(层叠样式表...

    处理页面引入less资源

    在前端开发过程中,LESS是一种流行的CSS预处理器,它允许我们使用变量、嵌套规则、混合、函数等特性来编写更简洁、可维护的CSS代码。本文将深入探讨如何处理HTML页面中直接引用的LESS资源,无需预先将其编译为CSS。 ...

    IDEA配置 File Watcher CSS压缩及Less格式转换

    本知识点将详细介绍如何在IntelliJ IDEA中配置File Watcher来实现CSS的自动压缩以及Less文件的格式转换。 首先,让我们了解什么是File Watcher。File Watcher是IntelliJ IDEA中的一个功能,它可以监视指定文件或...

    Less详解.pdf 电子书文档

    Less 详解 Less 是一种 CSS 预处理语言,它扩展了 CSS 语言,增加了诸如变量、混合、函数等功能,让 CSS 更易维护、具有逻辑性,能像编程一样编写 CSS 代码。 Less 的安装 服务器端安装:可以通过 npm(node.js ...

    lessc 转换less为css

    《lessc:从Less到CSS的转换神器》 在现代前端开发中,CSS预处理器扮演着重要的角色,其中Less就是一款广泛使用的预处理器。它扩展了CSS,引入了变量、嵌套规则、运算符等功能,使得CSS代码更加简洁、可维护。而...

    前端开源库-less-modify-var-loader

    "less-modify-var-loader"就是一个专为前端开发者设计的开源库,它主要用于处理Less预处理器中的变量,特别是在使用Webpack构建项目时,能够方便地替换Less文件中的变量值。 Less是一种CSS预处理器,它允许我们使用...

    less ,移动端less常见问题处理

    在移动端开发中,LESS作为一款强大的CSS预处理器,极大地提升了CSS的可维护性和扩展性。本文将深入探讨在移动端项目中使用LESS时可能遇到的常见问题及其解决方案。 首先,我们来了解一下LESS的基本概念。LESS是一种...

    LESS 动态样式语言

    ### LESS 动态样式语言详解 #### 一、LESS简介 LESS是一种动态样式语言,它扩展了CSS的功能,为开发者提供了变量、嵌套规则、混合(Mixins)、运算以及函数等高级特性。通过这些功能,LESS使样式表更加模块化、可...

    远程登录linux,使用vi和less查看文本出现中文乱码,使用cat正常.docx

    在远程登录 Linux 系统时,使用 vi 和 less 查看文本可能会出现中文乱码的问题。这是因为 Linux 系统的字符编码问题导致的。下面将详细介绍解决这个问题的方法。 问题分析 在远程登录 Linux 系统中,使用 vi 和 ...

    less.js-1.7.3

    《深入理解Less.js 1.7.3:前端开发中的CSS预处理器利器》 Less.js是JavaScript实现的一个CSS预处理器,它允许我们使用变量、嵌套规则、运算符以及函数等编程特性来编写CSS,极大地提高了CSS代码的可维护性和复用性...

    Less css框架1.3

    Less,一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。 极大的减少...

    详解在React项目中安装并使用Less(用法总结)

    React项目中安装并使用Less的步骤和方法涉及了多个方面,包括配置工具链、编写Less样式以及Less的高级特性,如变量、混合和参数混合等。接下来,我会详细解释React项目安装和使用Less所包含的知识点。 首先,安装...

    less.js-windows

    **less.js-windows** LESS.js 是一个流行的 CSS 预处理器,它允许开发者使用变量、嵌套规则、混合(mixins)、函数等编程特性编写 CSS 代码。"less.js-windows" 提供了一个在 Windows 操作系统上运行 LESS.js ...

    css开发的利器less

    标题"css开发的利器less"准确地捕捉了LESS在前端开发中的核心价值,它就像JavaScript中的jQuery一样,简化了复杂的CSS操作,提升了开发效率。 首先,LESS引入了变量的概念,允许开发者定义和重用变量,减少代码重复...

Global site tag (gtag.js) - Google Analytics