CSS——LESS

最新推荐文章于 2023-10-15 11:47:55 发布
最新推荐文章于 2023-10-15 11:47:55 发布
阅读量416 收藏
点赞数

去年就初次接触了LESS,并用他制作了一个Less.org的首页页面，但由于CSS的固有模式，没有让自己喜欢上他。由于前段时间学习bootstrap from twitter再次让我接触了这个Less（我在《CSS——Bootstrap From Twitter》有简单的提到过Less），又发现了他的强大与方便，于是横下心来又重新开始学习Less。这次的学习中让我发现了他的更强大，从而也让自己更喜欢上了Less。当然任何东西都有好与坏，我还是那句，他并不影响我对知识的渴望，你要是也喜欢，我们就一起往下看吧。

Less是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置变量（Variables）、混合书写模式（mixins）、操作（operations）和功能（functions）等等，最棒的是，Less使用了现有的CSS语法，也就是说，你可以直接把你现成的样式文件“style.css”直接改成“style.less”，他也能正常工作。如：

				<link rel="stylesheet/less" href="less/style.less" />

Less现在可以在客户端（如：IE+,Webkit,Firefox）和服务器（如node.js）上运行。前面也说过Less是CSS的一种扩展，他不但向后兼容，而且在现有的CSS语法基础上增加许多额外的功能。如果你具有一定的CSS语法基础，学习Less将是一件轻而易举的事情，那么我们现在就开始吧，首先一起看一段用Less语法的CSS代码：

				.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
				  @val: @x @y @blur rgba(0, 0, 0, @alpha);
				  box-shadow:         @val;
				  -webkit-box-shadow: @val;
				  -moz-box-shadow:    @val;
				}
				.box { @base: #f938ab;
				  color:        saturate(@base, 5%);
				  border-color: lighten(@base, 30%);
				  div { .box-shadow(0, 0, 5px, 0.4) }
				}

看到这里或许你现在并不知道这些代码表示的是什么意思？不过不要紧张，我们会一步一步一介绍这些语法表示的是什么意思。别的先不说，我们一起动起来吧。

如何使用Less

要成功的使用Less，需要一个脚本的支持，这个脚本我们把他叫做less.js。大家可以在点击这里下载这个less脚本,并放到你的项目中。下载好以后我们需要把less.js引用到文件中，引用方式很简单：

				<link rel="stylesheet/less" type="text/css" href="less/styles.less">
				<script src="js/less.js" type="text/javascript"></script>
Less包含些什么？

Less具体有哪些东东呢？其实这个问题我在前面早就有说过，Less要CSS语法的基础上进行了扩展，主要包含：Variables，Mixins、Nested Rules、Functions & Operations、Client-side usage、Server-side usage等等，下面我们就针对这几个部分，更好帮助我们了解和深入的学习Less。

1、变量——Variables

Less中的变量充许你在样式中的某个地方对常用的值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果，我们先来看一段代码：

Less Code

				/*======== 定义变量===========*/
				@color: #4d926f;
				/*======== 应用到元素中 ========*/
				#header {
					color: @color;
				}
				h2 {
					color: @color;
				}

Compiled Css code:

				/*======= Less 编译成 css ======*/
				#header {
					color: #4d926f;
				}
				h2 {
					color: #4d926f;
				}

Less中的变量还具有计算功能，如：

Less Code:

				@nice-blue: #5b83ad;
				@light-blue: @nice-blue + #111;
				#header {
					color: @light-blue;
				}

Compiled Css Code:

				#header {color: #6c94be;}

我们还可以定义一个变量名为变量，如

Less Code:

				@color: #253636;
				@highlight: "color";
				#header {color: @@highlight;}

Compiled Css Code:

				#header {color: #253636;}

注：在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。

Less Code:

				@color: #253636;
				@highlight: "color";
				@color: #ff3636;
				#header {color: @@highlight;}

Compiled Css Code:

				#header {color: #ff3636;}

上面代码很明显说明了后的@color覆盖了前面的@color。

2、混入——Mixins

混入其实就是一种嵌套，它充许你将一个类嵌入到另一个类中，而被嵌入的这个类也称为是一个变量。换句话说，你可以用一个类定义CSS，然后把整个为当作一个变量来使用，嵌入到另一人类中当作他的属性；另外混入也像一个带有参数的functions，如下在的例子：

Less Code:

				/*========= 定义一个类 ===========*/
				.roundedCorners(@radius:5px) {
					-moz-border-radius: @radius;
					-webkit-border-radius: @radius;
					border-radius: @radius;
				}
				/*＝＝＝＝＝＝＝＝＝＝ 定义的类应用到另个一个类中 ＝＝＝＝＝＝＝＝＝＝＝*/
				＃header {
					.roundedCorners;
				}
				#footer {
					.roundedCorners(10px);
				}

Compiled Css Code:

				#header {
					-moz-border-radius:5px;
					-webkit-border-radius:5px;
					border-radius:5px;
				}
				#footer {
					-moz-border-radius:10px;
					-webkit-border-radius:10px;
					border-radius:10px;
				}

注：这样任何CSS的类或ID下的样式都可以当作变量，使用混入模式用来当作另一个元素的属性值。

混入(Mixin)有一个名词叫“混入参数（Parametric Mixins）”，上面也说过。Less具有一个特殊类型的规则集，那就是一个类可以当作另一个元素的属生值，并且还可以接受其自己的参数，我们来看一个典型的实例：

Less Code:

				/*========== 定义一个规则，并且不设置默认参数值 ============*/
				.borderRadius(@radius){
					-moz-border-radius: @radius;
					-webkit-border-radius: @radius;
					border-radius: @radius;
				}
				/*============ 应用到元素中 ============*/
				#header {
					.borderRadius(10px); /*把10px传给变量@radius*/
				}
				.btn {
					.borderRadius(3px);/*把3px传给变量@radius*/
				}

Compiled Css Code:

				#header {
					-moz-border-radius: 10px;
					-webkit-border-radius: 10px;
					border-radius: 10px;
				}
				
				.btn {
					-moz-border-radius: 3px;
					-webkit-border-radius: 3px;
					border-radius: 3px;
				}

我们还可以给Mixins的参数定义一人默认值，如

Less Code:

				.borderRadius(@radius:5px){
					-moz-border-radius: @radius;
					-webkit-border-radius: @radius;
					border-radius: @radius;
				}
				
				.btn {
					.borderRadius;
				}

Compiled Css Code:

				.btn {
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					border-radius: 5px;
				}

还有一种方法就是给Mixins不定我任何参数，特别是在你想隐藏输出的CSS规则，但又想在别的规则中包含他的属性，使用这种不带参数的Mixins将非常有用的，我们来看一段代码：

Less Code:

				.wrap(){
					text-wrap: wrap;
					white-space: pre-wrap;
					white-space: -moz-pre-wrap;
					word-wrap: break-word;
				}
				pre {
					.wrap;
				}

Compiled Css Code:

				pre {
					text-wrap: wrap;
					white-space: pre-wrap;
					white-space: -moz-pre-wrap;
					word-wrap: break-word;
				}

Mixins还有一个重要的变量：@arguments。@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，他将表示所有的变量，当你不想处理个别的参数时，这个将很有用，我们来看一个阴影的实例：

Less Code:

				.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
					-moz-box-shadow: @arguments;
					-webkit-box-shadow: @arguments;
					box-shadow: @arguments;
				}
				
				#header {
					.boxShadow(2px,2px,3px,#f36);
				}

Compiled Css Code:

				#header {
					-moz-box-shadow: 2px 2px 3px #FF36;
					-webkit-box-shadow: 2px 2px 3px #FF36;
					box-shadow: 2px 2px 3px #FF36;
				}

3、嵌套规则——Nested Rules

嵌套规则主要是针对一多层元素的样式规则写法，以前我们在多层元素中写样式，要么从头选下来，要么另外给这个元素加上类名或id名，但在Less中我们不需要这样操作了，我们只要使用他的嵌套规则就可以完成，我们来看一个简单的实例：

Html Markup:

				<div id="header">
					<h1><a href="">W3cplus</a></h1>
					<p>记述前端那些事——引领Web前沿</p>
				</div>

Less Code:

				#header {
					display: inline;
					float: left;
					h1 {
						font-size: 26px;
						font-weight: bold;
						a {
							text-decoration: none;
							color: #f36;
							&:hover {
								text-decoration: underline;
								color: #63f;
							}
						}
					}
					p {
						font-size: 12px;
					}
				}

Compiled Css Code:

				#header {
				    display: inline;
				    float: left;
				}
				#header h1 {
				    font-size: 26px;
				    font-weight: bold;
				}
				#header h1 a {
				    color: #FF3366;
				    text-decoration: none;
				}
				#header h1 a:hover {
				    color: #6633FF;
				    text-decoration: underline;
				}
				#header p {
				    font-size: 12px;
				}

使用Less的嵌套规则让你的CSS代码更简洁，因为他的写法就是模仿HTML的DOM结构来写的。

从上在的实例代码中，我都很清楚的了解到，嵌套规则可以让我们写样式时能像DOM树形那样有结构的去写代码，从而减了选择器的层级关系，更主要的是这样使用我们的代码更简洁，更具有阅读生，这种嵌套规则对我们操作伪元素更为方便和重要，如:hover，:link,:focus等，他的写法是：

Less Code:

				a {
					color: red;
					text-decoration: none;
					&:hover {
						color: blue;
						text-decoration: underline;
					}
				}

Compiled Css Code:

				a {
					color: red;
					text-decoration: none;
				}
				a:hover {
					color: blue;
					text-decoration: underline;
				}

大家注意了，这里的&很重要，在Less中嵌套书写中有没有&区别是完全不一样的效果，有&时解析的是同一个元素或此元素的伪类，没有&解析是后代元素，我们一起来看一段代码：

Less Code:

				#header {
					&.fl{
						float: left;
					}
					.mln {
						margin-left: 0;
					}
				}

Compiled Css Code:

				#header.fl{float: left;}
				#header .mln {margin-left: 0;}

4、Functions & Operations

这两个功能很有意思的。在我们平时的样式中，有很多元素的属性都具有一定的比例或倍数。那么这两个刚好可以帮我们实现这方面的功能，首先来看Operations（直译“动作”）他可以让你对元素的属性值，颜色进行四则运算：加、减、乘、除。而Function就像javascript中的function一样可以让你进行你想要的值的操作。下面我们先来看一个简单的实例：

Less Code:

				@the-border: 1px;
				@base-color: #111;
				@red: #842210;
				#header {
					color: @base-color *3;
					border: 1px solid desaturate(@red,100%);
					border-width: @the-border @the-border*2 @the-border*3 @the-border;				
					border-color:desaturate(@red,100%) @red lighten(@red, 10%)	darken(@red, 30%);	
				}

Compiled Css Code:

				#header {
					color: #333;
					border: 1px solid #4a4a4a;
					border-width: 1px 2px 3px 1px;
					border-color: #4A4A4A #842210 #B12E16 #000000;
				}

这里提出一点，Less中的Operations主要是针对任何数字、颜色、变量的操作，可以对其是行加、减、、乘、除或者更复杂的综合运算；而Functions主要是针对Color funtions，Less提供了多种变换颜色的功能，下面多们来俱体看一下这两个功能的使用。

先来看Operation的使用

Less Code:

				@base: 5%;
				@filler: @base*2;
				@other: @base + @filler;
				#header {
					color: #888 / 4;
					height: 100% / 2 + @filler; 
				}

Compiled Css Code:

				#header {
				    color: #222222;
				    height: 60%;
				}

上面是一些简单的四则运算，他们都是在同一单位下进行操作，现在我们一起来看一个不同单位的操作

Less Code:

				@var: 1px + 5;
				#header {
					border: @var solid red;
				}

Compiled Css Code:

				#header {
				    border: 6px solid red;
				}

上面的代码直接反应出了，“@var: 1px + 5”，Less最终解析的值是“6px”。在Less中我们同样可以像做小学算术一样，使用括号“（）”来改变其运算的先后顺序，如：

Less Code:

				@var: 20px;
				#header {
					width: @var + 5 * 2;
					height: (@var + 5 ) * 2;
				}

Compiled Css Code:

				#header {
				    height: 50px;
				    width: 30px;
				}

从结果中我们很明显的得出他们的区别

					@var: 20px;
					#header {
						width: @var + 5 * 2;/* 先计算了5 * 2 = 10 然后在计算了 @var + 10 = 30px,其实就是"@var+(5*2)"*/
						height: (@var + 5 ) * 2;/*先计算了(@var + 5) = 25px,然后在计算了25*2=50px，因为括号更具有优先权，小学数学题*/
					}

Less中还提供了一个Color Functions，他具有多种变换颜色的功能，先把颜色转换成HSL色，然后在此基础上进行操作，具体包括以下几种：

					lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
					darken(@color, 10%);      // return a color which is 10% *darker* than @color

					saturate(@color, 10%);    // return a color 10% *more* saturated than @color
					desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

					fadein(@color, 10%);      // return a color 10% *less* transparent than @color
					fadeout(@color, 10%);     // return a color 10% *more* transparent than @color

					spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
					spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

使用这种functions方法很简单：

Less Code:

					@base: #f04615;
					#header {
						color: @base;
						background-color: fadein(@base, 10%);
						h1 {
							color: lighten(@base,20%);
							background-color: lighten(fadeout(@base,20%),5%);
							a {
								color: darken(@base,50%);
								background-color: spin(@base,10);
								&:hover {
									color: saturate(@base,30%);
									background-color: fadein(spin(@base,-5),20%);
								}
							}
						}
						p {
							color: desaturate(@base,60%);
						}
					}

Compiled Css Code:

					#header {
					    background-color: #F04615;
					    color: #F04615;
					}
					#header h1 {
					    background-color: rgba(242, 89, 45, 0.8);
					    color: #F69275;
					}
					#header h1 a {
					    background-color: #F06B15;
					    color: #060200;
					}
					#header h1 a:hover {
					    background-color: #F03415;
					    color: #FF3E06;
					}
					#header p {
					    color: #A56F60;
					}

大家还可以通过这样的方式提取颜色值

					hue(@color);        // returns the `hue` channel of @color
					saturation(@color); // returns the `saturation` channel of @color
					lightness(@color);  // returns the 'lightness' channel of @color

下面我们来看一下如何取得他的颜色

Less Code:

					@color: #f36;
					#header {
						background-color: hsl(hue(@color),45%,90%);
					}

Compiled Css Code:

					#header {
					    background-color: #F1DAE0;
					}

5、命名空间——Namespaces

有时候你想把一些变量或mixins组织起来，并将他封装，想用的时候就把要关的一部分取出来，那么我们将在前面的mixins基础上将其功能扩展，比如说我们有一个这样的库：

					#bundle {
					  .button () {
					    display: block;
					    border: 1px solid black;
					    background-color: grey;
					    &:hover { background-color: white }
					  }
					  .tab { ... }
					  .citation { ... }
					}

现在在实际操作中，我们header中的a样式和.button一样，那么我们就可以这样操作：

					#header a {
					  color: orange;
					  #bundle > .button;
					}

换过一种思维来说，如果页面上有几个部分的样是完全一样的，或者只是部分不同，我们就可以这样来写，就如上面的代码，#bundle可是以web页面中已存在的元素，然后#header中的a元素和#bundle中的.button样式是一样的，那么我们就可以把#bundle中 .button的所有样式引用到#header中的a元素上。

6、变量范围——Scope

Less中的变量和别的程序语言一样，他的变量也有一个范围概念，这个概念就有点像局部变量和全局变量一样，只是在Less中采取的是就近原则，换句话说，元素先找本身有没有这个变量存在，如果本身存在，就取本身中的变量，如果本身不存在，就寻找父元素，依此类推，直到寻找到相对应的变量，我们来看个简单的实例：

					@var: red;

					#page {
					  @var: white;
					  #header {
					    color: @var; // white
					  }
					}

					#footer {
					  color: @var; // red  
					}

7、Less的注解——Comments

Less中的注解有两种方式，单行注解很像js中的，如：

					// Hi, I'm a silent comment, I won't show up in your CSS
					.class { color: white }

Less中的多行注解和使用css中的一样：

					/* Hello, I'm a 
					 CSS-style comment
				 */
					.class { color: black }

当然单行注解也可以使用css的方式注解，本人更强调使用css中的注解方式：

					/* Hello, I'm a CSS-style comment */
					.class { color: black }

8、客户端的使用——Client-side usage

客户端的使用其实好简单，我们最开始引用的就是客户端的使用方法，使用这种方法前提条件是需要一个less.js的脚本支持，大家可以先到点击下载less.js然后把他引用到页面的head中，如下所示：

					<script src="less.js" type="text/javascript"></script>

其中src所指定的路径是你项目中的相对路径，当然你也可以把这个js放到你认为安全可用的服务器上，换成绝对路径也是可以的。接着我们就需要把less文件引进到项目中，这个引入的方式和css方式是一样的，只是有一点点不同，css中的是“rel="stylesheet"”而less的却是“rel="stylesheet/less"”,请看下面的代码：

					<link rel="stylesheet/less" type="text/css" href="styles.less">

特别强调一点，客户端使用Less,一定要注意，“Less样式文件一定要放在less脚本文件之前”。

正确的引入方式：

					<link rel="stylesheet/less" type="text/css" href="styles.less">
					<script src="less.js" type="text/javascript"></script>

错误的引入方式：

					<script src="less.js" type="text/javascript"></script>
					<link rel="stylesheet/less" type="text/css" href="styles.less">

上在我分了八个部分介绍了Less，其实Less不只包含这些东西，他还包括了“服务器端的使用”，“导入文件和变量”，“字符串插值”等，由于这几个部分相对而言较少使用，加上我自己没有完全理解，特意截下这几个部分不做陈述，如果大家相完全了解或者更清楚的学习他，大家可以可击到他的官网。（不过要翻墙才能正常阅读。）

最后要感谢Alexis Sellier（又名：cloudhead）给我们带来这么好的LESS。

johnhomsea
关注
Style笔记(css, stylus,less)
Ndbsa的博客
11-24 612
css，stylus，less各种语法记录
预处理css——Less
qq_43161118的博客
04-23 195
css弊端 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。 CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。 不方便维护及扩展，不利于复用。 CSS 没有很好的计算能力 Less 介绍 Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。 做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而...
CSS——less
qq_48613863的博客
04-09 8741
1、less简述 less就是简便书写css的工具，还是像写css那样写，只是有些比较简洁，可以写除法、选择器套选择器等等。保存.less文件，就会在同级别下自动生成.css文件。 在px单位转换到rem单位过程中，哪项工作是最麻烦的？ 答：除法运算。CSS不支持计算写法。解决方案：可以通过Less实现。 Less是一个CSS预处理器, Less文件后缀是.less； 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力； 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CS
CSS - less
小蚂蚁的世界
06-13 721
LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能。我的less的测试是基于angular-cli基础学习的。首先明确，本地静态测试不了，必须依赖于服务器。npm install less@latest --save-devangular-cli.json修改如下："defaults": { "styleExt": "...
CSS预处理---Less
通俗易懂
05-06 879
前言 CSS的短板 作为前端学习者的我们 或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能 给初学者第一印象 就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可以说 CSS 短板不容忽视。 问题的诞生往往伴随着技术的兴起， 在 Web 发展的这几年， 为了让 CSS 富有逻辑性，短板不那么严重，涌现出了 一些神奇的预处理语言。 它们让 CSS 彻底变成一门 可以使用 变量
常见的CSS预处理器——Less
RouKou的博客
05-18 2691
目录 一.Less介绍 1. 官方介绍 2.自我理解 二.Less的使用 1.在VSCode上的安装使用 （1）插件安装 2.在HMTL上的引用 三.常见用法示例 1.从第一个Less变量开始 2.变量计算 3.变量混合 4.嵌套规则 5.函数的使用 6.条件判断 7.变量作用域 8.不得不说的import指令 9.综合实例 一.Less介绍 1. 官方介绍 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CS
CSS——web静态页面设计
08-13
Sass、Less和Stylus等CSS预处理器允许使用变量、嵌套规则、混合（mixins）、函数等特性，提高代码可维护性和复用性。 七、响应式设计 随着移动设备的普及，响应式设计成为必备技能。利用媒体查询@media，可以根据...
CSS预处理语言——less
weixin_45457515的博客
08-02 286
会计站项目 1：采用rem+媒体查询+less实现 less文件夹下的文件内容 【 adapter.less适配文件 index.less 首页对应less文件 mixin.less 混合文件 reset.less 重置样式文件 var.less 变量定义文件 】 rem适配方案不好维护 设备会更新 设计稿尺寸 预设基准值 咱们主要适配主流设备即可 十几种 2:var.less 设置变量 ...
CSS——Web静态页面开发
08-15
在实际开发中，我们还可能遇到CSS预处理器，如Sass和Less，它们扩展了CSS语法，支持变量、嵌套规则和混合等功能，提高代码的可读性和复用性。预处理器编译后的代码仍然是有效的CSS，可以直接在浏览器中运行。 总之...
CSS—LESS基础整理
sophia_xiaoma的专栏
02-26 497
第一次接触CSS预编译，然后对比后发现其实less的上手容易度确实比sass高不少，再加上公司项目也是使用的less。所以想想还是根据网上的各种教程，整理出来了一些比较基础的、而且比较能让我们这种初学者快速上手的例子。菜鸡一只，代码要是有错或者表达不清的地方，请各位批评指正！那么，现在我们就开始正文部分了。1.什么是lessLESS是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置...
css less_LESS CSS –入门指南
cune1359的博客
06-26 634
CSS预处理器现在已成为Web开发中的主要内容。 它附带具有编程特性（例如变量，函数或Mixin和操作）的普通CSS，这些特性使Web开发人员可以构建模块化，可扩展且更易管理CSS样式 。 在这篇文章中，我们将研究LESS，LESS是周围最受欢迎CSS预处理器之一，并且已广泛部署在众多的前端框架（如Bootstrap）中。 我们还将逐步介绍基本的实用程序，工具和设置，以帮助您入门和使用LE...
css less语法
weixin_43294560的博客
02-29 931
less 1、安装 cnpm install -g less (1)耗费性能,不能在开发环境中使用 在文件引入less编译器 <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.3/less.min.js" ></script> 或下载好的less.js文件 引...
CSS预处理器—less
weixin_52629158的博客
04-16 956
CSS预处理器的概念 首次成为前端web开发工作流程的主流 并改变了我们编写CSS的方式。CSS预处理器是一种工具，用于通过自己的脚本语言扩展默认普通CSS的基本功能。它可以帮助我们使用复杂的逻辑语法，比如变量、函数、混合、代码嵌套和继承等等，使普通的CSS更加强大。通过使用CSS预处理器，您可以无缝地自动化日常任务，构建可重用的代码段，避免代码重复和膨胀，并编写组织良好且易于阅读的嵌套代码块。目前世界各地开发人员使用的3种最流行的CSS预处理器，即LESS、Stylus和Sass。
less基础
csdn_jwdlh的博客
11-26 408
less基础less介绍维护css弊端less使用Less 使用之变量Less 嵌套Less 运算 less介绍 Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。 做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。 它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们
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预处理语言）
杜永康的博客
03-19 3575
less（css预处理语言）Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
CSS预处理器Less（学习记录）
最新发布
qq_57872258的博客
10-15 117
常见的CSS预处理器Less
CSS掌中宝第四版：权威指南
"CSS经典资料——CSS Pocket Reference 第四版，作者 Eric A. Meyer" 《CSS经典资料》提及的是一本名为《CSS Pocket Reference》的书籍，由业界知名的CSS专家Eric A. Meyer撰写。这本书是第四版，自2001年以来经过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值