本节知识点
- 注释
- 变量
- 混合
- 嵌套规则
- 运算
- 命名空间
- 引入
- 提高优先级
(一) 注释
在Less 里面 //注释不会保存到生成的css文件中
而相反 /* */会被保存到生成的css文件中(二)变量
- 变量都是以@开头
- 变量是支持延迟加载的，使用前加载和使用后加载，无区别。
- 要是定义了两个相同的变量，即变量名相同，那么 LESS 会以最后的解构为准,必须在作用域内，出了作用域，则没用了。
变量是用@开头，分号结尾
例如
@huize: #ccc;
.header{
background:@huise
}
- (2) 变量作为属性或者选择器
要是作为属性或者选择器那么前面除了有@还必须加上{}
@kuandu:width;
@toubu:header;
.@{toubu}{
@{kuandu}:320px;
}
//编译以后就变成
.header{
width:320px;
}
- (3) 变量作为 URL(CSS 里面存放地址) 变量的时候加上双引号。引用的时候还是@{}
@url:"../images/01.png";
.header{
background:url("@{url}") no-repeat center;
}(三) 混合
- 混合的定义
混合就是一种将一系列属性从一个规则集引入(“混合”)到另外的规则集的方式
(1) 普通混合
就是把好几个类共有的属性拿出来，封装成一个类，然后这几个类引用即可
普通混合里面公共类不能有变量，要不然解析不了
例如:
.all{
width:320px;
height:320px;
float:left;
}
.header1{
@{beijing}:@hongse;
.all;
}
.header2{
@{beijing}:@huise;
.all;
}
//解析以后
.all {
width: 320px;
height: 320px;
float: left;
}
.header1 {
background: red;
width: 320px;
height: 320px;
float: left;
}
.header2 {
background: #ccc;
width: 320px;
height: 320px;
float: left;
}(2) 隐藏共有类
简单来说就是 Less 里面有混合类，但是编译后变成 CSS 文件的不想输出这个混合类可以这样
在共有类后面加()这样解析的时候变成 CSS 文件就不会输出这个类
简单来时就是在共有类后面加个()即可
/*混合测试*/
.all(){
width:320px;
height:320px;
float:left;
}
.header1{
@{beijing}:@hongse;
.all;
}
.header2{
@{beijing}:@huise;
.all;
}
/*编译开始*/
.header1 {
background: red;
width: 320px;
height: 320px;
float: left;
}
.header2 {
background: #ccc;
width: 320px;
height: 320px;
float: left;
}(3)带选择器的混合。
要是在作用域里面出现& 他找的就是父级，例如
.all(){
width:320px;
height:320px;
float:left;
&:hover{
background:black;
}
}
编辑后就是
.all:hover{} === &:hover- 要是&在选择器后面，就表示把父元素的标签放到那个位置
div{
width:800px;
height:400px;
.all2 &{
background:red;
}
}
//编译后的结果
div {
width: 800px;
height: 400px;
}
.all2 div {
background: red;
}- 看一个例子
/*混合测试*/
.all(){
width:320px;
height:320px;
float:left;
&:hover{
background:black;
}
}
.header1{
@{beijing}:@hongse;
.all();
}
.header2{
@{beijing}:@huise;
.all();
}
//编译后的结果就是
/*混合测试*/
.header1 {
background: red;
width: 320px;
height: 320px;
float: left;
}
.header1:hover {
background: black;
}
.header2 {
background: #ccc;
width: 320px;
height: 320px;
float: left;
}
.header2:hover {
background: black;
}(3)带参数的混合
/*混合测试*/
.all(@lvse,@kuandu,@gaodu,@beijing,@beijingse){
@{kuandu}:320px;
@{gaodu}:320px;
float:left;
@{beijing}:@beijingse;
&:hover{
background:@lvse;
}
}
.header1{
.all(@lvse,@kuandu,@gaodu,@beijing,#ccc);
}
.header2{
.all(@lvse,@kuandu,@gaodu,@beijing,red);
}
//解析后变成
/*混合测试*/
.header1 {
width: 320px;
height: 320px;
float: left;
background: #ccc;
}
.header1:hover {
background: green;
}
.header2 {
width: 320px;
height: 320px;
float: left;
background: red;
}
.header2:hover {
background: green;
}
(4)带参数的混合,并且有默认值)
简单来说就是参数后面加:和值这样表示有默认值
/*混合测试*/
.all(@lvse,@kuandu,@gaodu,@beijing,@beijingse:#ccc){
@{kuandu}:320px;
@{gaodu}:320px;
float:left;
@{beijing}:@beijingse;
&:hover{
background:@lvse;
}
}
.header1{
.all(@lvse,@kuandu,@gaodu,@beijing);
}
.header2{
.all(@lvse,@kuandu,@gaodu,@beijing,red);
}
//编译以后，这样背景色默认值就是:#ccc
.header1 {
width: 320px;
height: 320px;
float: left;
background: #ccc;
}
.header1:hover {
background: green;
}
.header2 {
width: 320px;
height: 320px;
float: left;
background: red;
}
.header2:hover {
background: green;
}(四) 嵌套规则
- 简单来说就是按照层级结构，父套子，子套孙。要是同级就是在外面
.content {
width: 800px;
height: auto;
margin: 0 auto;
border: 1px solid #ccc;
overflow: hidden;
background:@huise;
li{
@{kuandu}: 350px;
margin-left: 50px;
overflow: hidden;
a{
div{
color:@hongse
}
}
}
}
/*编译以后就是*/
.content {
width: 800px;
height: auto;
margin: 0 auto;
border: 1px solid #ccc;
overflow: hidden;
background: #ccc;
}
.content li {
width: 350px;
margin-left: 50px;
overflow: hidden;
}
.content li a div {
color: red;
}(五) 运算法则
在 LESS 中任何数值，颜色，和变量都可以计算
这里特别注意的就是必须要有单位。写一次就足够了。然后运算符与前后用空格隔开
涉及到优先级的话用小括号即可。
例如
.content {
width: 400px + 400;
height: auto;
margin: 0 auto;
border: 1px solid #ccc;
overflow: hidden;
background:@huise;
li{
@{kuandu}: 350px;
margin-left: 50px;
overflow: hidden;
a{
div{
color:@hongse
}
}
}
}
//编译后的结果就是
.content {
width: 800px;
height: auto;
margin: 0 auto;
border: 1px solid #ccc;
overflow: hidden;
background: #ccc;
}
.content li {
width: 350px;
margin-left: 50px;
overflow: hidden;
}
.content li a div {
color: red;
}(六) 命名空间
要是在引用公共类的时候使用>表示指定找到哪个类
例如 HTML 结构
<div id="text1">
<div class="a">
测试a的颜色
</div>
<div class="b">
测试b的颜色
</div>
</div>要是没有 >
#gonggong(){
@{kuandu}:400px + 400;
@{gaodu}: 400px + 400;
@{beijing}:@hongse;
.a{
color:blue;
}
.b{
color:black;
}
}
#text1{
#gonggong;
}
//编译后的结果就是
#text1 {
width: 800px;
height: 800px;
background: red;
}
#text1 .a {
color: blue;
}
#text1 .b {
color: black;
}要是有>号的引用
#gonggong(){
@{kuandu}:400px + 400;
@{gaodu}: 400px + 400;
@{beijing}:@hongse;
.a{
color:blue;
}
.b{
color:black;
}
}
#text1{
#gonggong>.a;
}
//编译的结果就是
#text1 {
color: blue;
}(七) 引入
你可以引入一个或多个 Less 文件，这些文件的所有变量都可以在被引入的 LESS 文件中使用
1.新建一个 main.css
@huise:#ccc;
@hongse:red;
@kuandu:width;
@wrap:wrap;
@gaodu:height;
@beijing:background;
@lvse:green;
@url:"../images/01.jpg";
@value:100px;2.引入这个 less 文件
@import "config.less";3.这样引入后便可以使用这些变量了
(八) 提高优先级 !important
.all(@lvse,@kuandu,@gaodu,@beijing,@beijingse:#ccc){
@{kuandu}:320px;
@{gaodu}:320px;
float:left;
@{beijing}:@beijingse;
&:hover{
background:@lvse;
}
}
.header3{
.all(@lvse,@kuandu,@gaodu,@beijing,@beijingse:#ccc) !important;
}编译后记得结果就是
.header3 {
width: 320px !important;
height: 320px !important;
float: left !important;
background: #ccc !important;
}
.header3:hover {
background: green !important;
}
