Less教程及常用的操作
|
7,136
|
0
|
前端

2172 字
|
9 分钟

说到less，我们首先肯定会想到css或者scss。那抛开scss，就单独谈谈为什么选择了less，而非css，他们的区别又有那么些呢？

  • Less是一门CSS预处理语言，css是一种用来表现HTML或XML等文件样式的计算机语言。

  • less扩展了CSS语言，增加了变量、Mixin、函数、运算、继承、嵌套等特性。

  • css可以被浏览器直接识别，less需要先编译为css。

使用方法

说白了就是less可以看做是一个工具，让你操作css更方便的工具。既然是工具，在使用它之前肯定就要去“安装”这个工具。less官方也提供了几种“使用工具”的方法：

node环境中使用

通过npm的安装方式全局安装或者项目目录安装

npm install less -g

浏览器中使用

通过引入less.js的方法，然后在浏览器中可以自动编译你的.less文件

首先，将.less样式表的rel属性设置为“ stylesheet/less”：

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

接下来，下载less.js，并将其包含在页面元素中的<script></script>标记中<head>：

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

当然你也可以配置一些设定选项，这个可以转移到官网查看详情配置，这里就不过多赘述。

使用工具/插件装换格式

我用过比较好的一个工具是Koala（考拉），koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。可以直接把less文件装换成css文件，快速方便可配置。

当然有的开发工具也带有转换less为css文件的插件，比如Hbuilder X前端开发工具，安装less转换插件即可，可右键直接生成css文件

常用操作及技巧

当然，前面说的这么多不是今天的重点，重点是下面的一些关于less常用的操作及技巧。

变量（@）

通过@符号定义变量并且使用。

@color:#4078cb;
.home {
    background-color:@color;
}

编辑后：

.home {
    background-color:#4078cb;
}

变量也可以用在如：选择器名称，属性名称等

@my-selector: banner;
@images: "../img";
.@{my-selector} {
  font-weight: bold;
  background: url("@{images}/white-sand.png");
}

编译后：

.banner {
  font-weight: bold;
  background: url("../img/white-sand.png");
}

变量运算

变量可以进行加减乘除运算，加减法时，以第一个数据的单位为基准，乘除法是，单位要统一。

@width:300px;
@color:#222;
@fontSize:14px;
.top{
 width:@width - 20;
 height:@width - 20*5;
 color:@color*2;
 background-color:@color + #111;
 font-size: @fontSize*2; 
}

编译后：

.top { 
width: 280px; 
height: 200px; 
color: #444444; 
background-color: #333333; 
font-size: 28px; 
}

注意：加减运算时要注意符号左右两侧留空格，否则可能会有报错的风险。

嵌套及连接符（&）

父母选择器可用过嵌套的方式实现

div { 
  width:100px; 
  a { 
    color:#4078cb; 
  } 
}

编译后：

div {width:100px;} 
div a {color:#4078cb;}

&操作符可实现伪类选择器、连接等操作

a { 
  &:hover { 
    color: green; 
  } 
}

编译后：

a:hover { 
  color: green; 
}
.button {
   &-ok {
     background-image: url("ok.png");
   }
   &-cancel {
     background-image: url("cancel.png");
   }
   &-custom {
     background-image: url("custom.png");
   }
 }

编译后：

.button-ok {
 background-image: url("ok.png"); 
} 
.button-cancel {
 background-image: url("cancel.png"); 
} 
.button-custom {
 background-image: url("custom.png"); 
}

&代表所有父选择器（而不仅仅是最接近的祖先），因此以下示例：

.grand {
  .parent {
     & > & {
       color: red; 
    } 
    & & {
     color: green; 
    } 
    && {
     color: blue; 
    } 
    &, &ish {
      color: cyan; 
   } 
  } 
}

编译后：

.grand .parent > .grand .parent {
 color: red; 
} 
.grand .parent .grand .parent {
 color: green; 
} 
.grand .parent.grand .parent {
 color: blue; 
} 
.grand .parent, .grand .parentish {
 color: cyan; 
}

less转义

通过‘~’符号对其后面的内容进行转义：

p { color: ~"green"; }

编译后：

p { color: green; }

在将LESS代码编译为CSS代码之后，〜“some_text”中的任何内容将显示为 some_text 。为什么需要这样的操作呢，比如在使用calc()方法计算的时候，如果不转义，就会识别出来，所以这个时候就必须要用这个‘~’来进行转义。

注释

可以通过“/**/”或者“//”的方法对代码进行注释，但是后者注释方法在编译后的文件中不显示。

/* 这是一个长注释 */ 
// 这是一个短注释

编译后：

/* 这是一个长注释 */

混合mixin模式

混合类似于编程语言中的函数。 Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。

.p1{ color:red; } 
.p2{ background : #4078cb; .p1(); } 
.p3{ background : #3dcd58; .p1; }

编译后：

.p1 { color: red; } 
.p2 { background: #4078cb; color: red; } 
.p3 { background: #3dcd58; color: red; }

mixins不仅可以包含属性，还可以包含选择器。

.hover() {
   &:hover {
     background: red; 
  } 
} 
a { 
  .hover() 
}

编译后：

a:hover { 
  background: red; 
}

命名空间

命名空间用于在通用名称下对mixin进行分组，进行针对性的内容引用继承。使用命名空间可以避免名称冲突，并从外部封装mixin组。

.h1() {
   background: yellow; 
  .span {
     color: orange; 
  } 
} 
.div { 
  .h1> .span 
}

编译后：

.div { color: orange; }

混合参数

参数mixin使用一个或多个参数，通过参数和其属性来扩展LESS的功能，以便在混合到另一个块时自定义mixin输出。

.border(@width; @style; @color) {
 border: @width @style @color; 
} 
.home {
 .border(2px; dashed; green); 
}

编译后：

.home { border: 2px dashed green; }

导入

@import 伪指令用于在代码中导入文件。 它将LESS代码分布在不同的文件上，并允许轻松地维护代码的结构。 您可以将 @import 语句放在代码中的任何位置。

// import.less 
.myImport { color:red; font-size:14px }
// style.less 
// 导入 import.less
@import "import.less"

style.less编译后：

.myImport { color:red; font-size:14px }

合并

LESS的一个特性，它允许使用单个属性从多个属性中为逗号或空格分隔列表添加值。为了避免任何无意的联接，在每个联接未决声明上都需要显式+或+_标记。

.mixin() {
 transform+_: scale(2); 
} 
.myclass {
 .mixin(); 
 transform+_: rotate(15deg); 
}

编译后：

.myclass { transform: scale(2) rotate(15deg); }

loops循环

Loops语句允许我们多次执行一个语句或一组语句。

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  width: (25px * @count);
}
div {
  .cont(7);
}

编译后：

div {
  width: 25px;
  width: 50px;
  width: 75px;
  width: 100px;
  width: 125px;
  width: 150px;
  width: 175px;
}

颜色函数

颜色函数darken(color,amount )

darken降低了元素中颜色的亮度，有两个可选参数，color：代表颜色对象，amount：包含0 – 100%之间的百分比。

.myclass1{
   height:100px;
   background-color: hsl(80, 90%, 20%);
}

.myclass2{
   height:100px;
   background-color: darken(hsl(80, 90%, 20%), 10%);
}

编译后：

.myclass1 {
  height: 100px;
  background-color: #426105;
}
.myclass2 {
  height: 100px;
  background-color: #213003;
}

颜色函数lighten(color,amount )

lighten增加了元素中颜色的亮度，有两个可选参数，color：代表颜色对象，amount：包含0 – 100%之间的百分比。

.myclass1{
   height:100px;
   background-color: hsl(80, 90%, 20%);
}

.myclass2{
   height:100px;
   background-color: lighten(hsl(80, 90%, 20%), 10%);
}

编译后：

.myclass1 {
  height: 100px;
  background-color: #426105;
}
.myclass2 {
  height: 100px;
  background-color: #639108;
}

颜色混合函数multiply(color1,color2)

将两种颜色相乘。 对应的RGB通道的两个颜色相乘，然后除以255以得到较暗的颜色作为结果。

.color {
    background: multiply(#111111,#222222);
}

编译后：

.color {
    background: #020202;
}

数学函数

ceil()

将数字向上舍入为下一个最大整数。

opacity:ceil(0.7);  //  编译后： opacity:1;

floor()

将数字向下取整为下一个最小整数。

opacity:floor(1.3);  //  编译后： opacity:1;

percentage()

将浮点数转换为百分比字符串。

opacity:percentage(0.2);  //  编译后： opacity:20%;

min()

它指定一个或多个参数的最小值。

opacity:min(0.2,0.1,0.3,4);  //  编译后： opacity:0.1;

max()

它指定一个或多个参数的最大值。

opacity:min(0.2,0.1,0.3,1);  //  编译后： opacity:1;

类型函数

isnumber()

它使用一个值作为参数，如果它是一个数字返回 true ，否则为 false

isstring()

它使用一个值作为参数，如果它是一个字符串返回 true ，否则为 false

iscolor()

它使用一个值作为参数，如果如果值是颜色返回 true ，否则为 false

iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false

isurl()

它使用一个值作为参数，如果值为url返回 true ，否则为 false

isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false

ispixel()

它使用一个值作为参数，如果值是以像素为单位的数字返回 true ，否则为 false

ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false

字符串函数

escape()

它通过对特殊字符使用URL编码来对字符串或信息进行编码。 您无法编码一些字符，例如，， / ，？ ， @ ，＆amp; ， + ，〜，！ ， $ ，‘和您可以编码的一些字符，例如 \ ，#， > ^ ，(，)， {，} ，: >，＆gt; ，，] ， [和 = 。

escape("Hello!! welcome to Tutorialspoint!")  // 编译后：Hello%21%21%20welcome%20to%20Tutorialspoint%21

e()

它是一个字符串函数，它使用string作为参数，并返回不带引号的信息。 它是一个CSS转义，它使用〜“一些内容”转义的值和数字作为参数。

filter: e("Hello!! welcome to Tutorialspoint!");  // 编译后：filter: Hello!! welcome to Tutorialspoint!;

% format()

此函数格式化一个字符串。 它可以写成以下格式：%(string，arguments …) 

format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less"); // 编译后：format-a-d: （"myvalues: 5 myfile: "mydir/less_demo.less"）;

其他函数

image-size()

它用于从文件检查图像的维度。 它检查图像的宽度和高度。

.top {
   background-image:url("top.jpg");
   image-size:image-size("top.jpg");
}

编译后：

.top {
   background-image:url("top.jpg");
   image-size: 1200px 800px;
}

image-width()，image-height()

分别用于检测图像的宽度和高度。

convert()

数字从一个单位转换为另一个单位。 它包括两个论点; 第一个参数遍编号以及单位和第二个参数包含单位。 当本机兼容时，转换该数字。 如果第一个参数不变，则单位不兼容。

body{
  meter:convert(10cm, mm);
  time:convert(3s, "ms");
  no-unit:convert(5, mm);
}

编译后：

body {
  meter: 100mm;
  time: 3000ms;
  no-unit: 5;
}

当然上面的内容只是less用例中的一部分，只是开发过程中比较常用的。当然，现在的开发越来越倾向于less或者scss等方式，主要的原因还是相对于css他们大大的减少了开发量，减少了代码冗余，方便了开发者。所以这是一个进步的时代，更是一个不断追求美好的时代！

less前端开发教程
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
						

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

															
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
中本聪$aKKa提币教程（附详细绑定钱包教程）

							
							

							
oex如何提现到钱包（附详细教程）

							
							

							
基于uni-app框架开发的多端小程序【少儿国学经典指南】

							
							

							
uniapp云开发发布小程序云函数报错:连接本地调试服务失败，请检查…

							
							

							
浏览器支持小于12px的字体了？

							
							

							
大屏可视化之动态数字

							
							

							
mpvue项目和原生微信小程序框架代码合并开发

							
							

							
uniapp+uView2.0自定义底部tabbar导航

							
							

							
二级域名申请部署以及免费的SSL证书部署教程

							
							

							
炫酷的css加载动画系列2