当前位置:首页 > html5+css3 > 正文内容

less

自由小鸟5年前 (2019-09-09)html5+css32049

继承:2种 box1想公用box2的内容

1,完全复制  

.box1{
    .box2
}

2,只公用同级的
.box1{
    &:extend(.box2)
}

嵌套

.box1{

    img{

    }

    &:hover img{}
    >img{}

}

函数封装:

封装函数
 .func_center(@W:100,@H:100){
   position:absolute
   top:50%;
   left:50%
   margin:unit(-@W/2,px) 0 0 unit(-@H/2,px)
 }


导入less文件

@import './reset.less'


公用方法文件引入的时候可以只导入不编译,所以引入有区别 加上reference

@import (reference) './common.less';



unit
background:darken(@BG,50%)    darken变深  lighten变浅


.loop(@n) when (@n<=4){

    .loop(@n+1);

    .column-@{n}{

        width:unit(@n*10,%)

    }

}

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=63

“less” 的相关文章

多行文字固定行显示省略号

第一种display: -webkit-box-webkit-box-orient: vertical-webkit-line-clamp: 2overflow: hidden第二种p{position: relative; line-height: 20px;&nbs...

动态计算rem适应

<script>~ function(){function computed(){let HTMl=document.documentElement,deviceW=HTML.clientWidth, //显示屏宽度deviceWdesignw=750,     &n...

弹出框在页面左右上下居中的写法

自适应写法 .dialog{ border-radius: 8px; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%;...

实现背景色半透明渐变效果

实现背景色半透明渐变效果

父级相对定位 .box__shadow_left,.box__shadow_right{ position: absolute; top:0; height: 65rpx; width: 60px; z-index: 9; } 左边的效果 .box_...