九、less语法

最新推荐文章于 2024-01-16 17:38:46 发布

gaoya7305

最新推荐文章于 2024-01-16 17:38:46 发布

阅读量350

点赞数

分类专栏： html+css 文章标签： less 前端 css

本文链接：https://blog.csdn.net/gaoya7305/article/details/131534605

版权

html+css 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

目录：
1.基础知识
2.详解

一、基础知识

在前面less相关插件已经安装好的情况下，我们开始练习相关语法。

需求：给body的后代div设置字体颜色为红色。

css写法：

body div {
  color: red;
}

less写法：

body{
  width: 100px;
  height: 100px;
  // 在body里面我们还可以随意设置任何属性
  
  //less:body的后代div 设置字体颜色
  div{
    color:red;
  }
}

特别注意：通常我们都是创建一个xx.less文件，然后写上样式语法后，保存，他会立马自动在该文件目录下面生成xx.css。
而我们使用的是xx.css文件。
如下面：

<head>

  <!-- 要用less里面的效果，必须要引入的是对应的css文件 -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <div class="box1"></div>
  
</body>

二、详解（以下都是less语法写法）

1.注释
多行注释，在less中写了的多行注释，保持less文件后，自动会在css中继承下来，单行注释不会。
2.父子兄弟关系

// 父子兄弟关系
.box1{
  background-color: red;
  // 给box1的后代设置背景颜色
  .box2{
    background-color: #ff0;
    // box2的后代
    .box4{
      color:orange;
    }
  }
  // 这里的box2,box3是兄弟关系
  .box3{
    background-color: #ff0;
  }
}

3.变量
定义变量： @变量名，
用的话： @变量名, 变量不仅可以存数字，颜色，也可以存类名

//作为变量名使用
@num:100px;
@b:#bfa;
@c:box6;

.box5{
  width: @num;
}

类名使用

// 作为类名使用，或者一部分使用时，：.@{变量名}
.@{c}{
  width:@num; 
  // background-image: url("box6/1.png");
  background-image: url("@{c}/1.png");
}

就近原则

@d:200px;
@d:300px;

div{
  // 用的@d用值是就近原则300px,如果在这里面又写了@d,也是用最近的这个150px
  @d:150px;
  width:@d;
  height:@e;
}

//可以在变量声明前就使用变量
@e:335px;

直接引用变量

div{
  // 如果我的width和height 都是100px, 我不想重复写，我想让height直接引用width的值, $width
  width: 100px;
  // height: 100px;
  height:$width;
}

4.后代，子元素：>, &：父元素

.box1{
  .box2{
    // 后代是直接写
    color:red;
  }
  >.box3{
    //子元素是需要>
    color:green;
     //&就表示外层的父元素,所以此时是代表box3
    &:hover{
      color:blue;
    }
  }

  // 为box1设置hover,当你外层也是box1,就不能再里面在写box1,而是用&
 //&就表示外层的父元素
  &:hover{
    color:orange;
  }
 //&就表示外层的父元素, 这里表示box1
  div &{
    width:100px;
  }
}

5.扩展extend
比如有p1, p2两个有相同的width,height,也有不同的color，正常情况下是这样写的。

.p1{
  width: 100px;
  height: 100px;
}
.p2{
   width: 100px;
   height: 100px;
   color:red;
 }

但是我现在不想写重复的width,height. 所以，我用到extend语法来写p2。

表示，p2有p1相同的width,height，同时在为p2多扩展设置一个color

.p1{
  width: 100px;
  height: 100px;
}
//:extend 对当前选择器扩展指定选择器的样式（选择器分组），可以通过选择器分组的形式对样式进行扩展
.p2:extend(.p1){
  color:yellow;
}

翻译出来的css：


/*
我们可以改写,p2对p1的一个扩展， 就会自动变成选择器分组的样式
.p1,p2{}
*/
.p1,
.p2 {
  width: 100px;
  height: 100px;
}
.p2 {
  color: yellow;
}

6.类似扩展，但比扩展5这里的写法差点：

//这种写法的性能比上面的那种差一点
.p3{
  //直接对指定的样式进行引用，这里就相当于把p1的样式在这里进行了复制
  //mixin 混合，把p1的样式混合到p3
  .p1();
}

上面写法的优化：
优化这种写法，不让他在重复写一次
使用类选择器时，可以在选择器后面添加一个括号，这时我们实际上就创建了一个mixins

/*
你会发现这里加了（）后，当没有用到他p4，他不会显示，只有当别人在用到
他的时候，才会显示
*/
.p4(){
  width: 100px;
  height: 100px;
  background-color: #bfa;
}

.p5{
  // 引用的时候，可以加（），也可以不加
  // .p4();
  .p4;
}

7.混合函数用法：
混合函数写法 .xx(){}, 可以在这个混合函数中直接设置变量

// .test(@w,@h,@bg-color){
//   width:@w;
//   height:@h;
//   border:1px solid @bg-color;
// }

.test(@w:100px,@h:200px,@bg-color:red){
  width:@w;
  height:@h;
  border:1px solid @bg-color;
}

div{
  // 注意，你的混合函数（括号里面指定几个参数，就必须传几个,而且顺序要对应上）
  // .test(200px,300px,#bfa);
  // 还可以这样写,如果你不想按照顺序写，就需要写上前面的名字在传值。
  // .test(@bg-color:red,@h:100px,@w:300px)

  //如果我们确实不想传值，其实我们也可以在设置混合函数方法的时候给他们一个默认值
  // 有了默认值，你可以不传，或者只传一个
  // .test();
  .test(200px);
}

8.颜色的混合

span{
  /* 两个数之间取平均数,只能取颜色的平均值 */
  color:average(red,yellow);
}

html{
  width: 100%;
  height: 100%;
}
body{
  width: 100%;
  height: 100%;
  background-color: #bfa;
}
body:hover{
  // 在#bfa这个颜色的基础上再加深10%
  background-color: darken(#bfa,10%);
}

gaoya7305

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
九、less语法

多行注释，在less中写了的多行注释，保持less文件后，自动会在css中继承下来，单行注释不会。表示，p2有p1相同的width,height，同时在为p2多扩展设置一个color。使用类选择器时，可以在选择器后面添加一个括号，这时我们实际上就创建了一个mixins。//如果我们确实不想传值，其实我们也可以在设置混合函数方法的时候给他们一个默认值。用的话： @变量名, 变量不仅可以存数字，颜色，也可以存类名。// 有了默认值，你可以不传，或者只传一个。优化这种写法，不让他在重复写一次。
复制链接

扫一扫

专栏目录