更新时间:2022-09-25 22:42:07
几个学习Less的网站:(主体内容都差不多)
http://www.bootcss.com/p/lesscss/
http://www.css88.com/doc/less/features/
关于Less的安装方法有很多介绍,这里出于学习方便,使用 Koala 工具
今天主要学习的是Less中的变量,与其他语言中的变量一样,Less中的变量允许我们单独定义一系列的通用样式,然后在需要的时候调用,给代码维护也带来了方便。
需要注意的是,由于Less中的变量只能定义一次,实际上相当于是一个常量。
Less代码:
1
2
3
|
@charset "UTF-8" ;
@nice-blue: #5b83ad ; //这是一个变量
@light-blue:@nice- blue + #111 ; /*这也是一个变量*/
|
CSS代码编译:
1
2
|
@charset "UTF-8" ;
/*这也是一个变量*/ |
这里需要指出的就是Less中有关注释的两种不同用法,注释方法和Javascript中一样,所不同的是以//注释的注释内容不会编译成CSS内容,而以/**/注释的内容会自动编译成CSS的编译内容。
HTML代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html> < html >
< head lang = "en" >
< meta charset = "UTF-8" >
< title ></ title >
< link rel = "stylesheet" href = "css/style.css" >
</ head >
< body >
< div id = "header" >我就是我,颜色不一样的水果</ div >
< p class = "text" >My name is Li Lei!</ p >
< div id = "menu" ></ div >
< div id = "img" ></ div >
</ body >
</ html >
|
Less代码
1
2
3
4
5
6
7
|
@nice-blue: #5b83ad ;
@aWidth: 200px ;
@aHeight: 200px ;
//引用定义好的变量 #header{ color :@light- blue ;}
#menu{ width :@aWidth; height :@aHeight; background :@nice- blue + #f00 ;}
|
CSS代码
1
2
3
4
5
6
7
8
|
#header { color : #6c94be ;
} #menu { width : 200px ;
height : 200px ;
background : #5b83ad ;
} |
这里需要特别提出对文件路径的引入,变量是怎么写的
Less代码
1
2
|
@images: '../images' ;
#img{ width :@aWidth+ 300 ; height :@aHeight+ 300 ; background : url ( '@{images}/1.jpg' );}
|
CSS代码
1
2
3
4
5
|
#img { width : 500px ; height : 500px ; background : url ( '../images/1.jpg' ); }
|