less以及scss常用函数

最新推荐文章于 2024-09-04 15:06:41 发布

luluan_lin

最新推荐文章于 2024-09-04 15:06:41 发布

阅读量690

点赞数

分类专栏：前端 less sass 文章标签： less sass

本文链接：https://blog.csdn.net/luluan_lin/article/details/97889598

版权

前端同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

less

1 篇文章 0 订阅

订阅专栏

sass

1 篇文章 0 订阅

订阅专栏

h1, h2, h3, h4 {
  margin: 0;
}

.fl {
  float: left !important;
}

.fr {
  float: right !important;
}

.font-size(@size: 14px) {
  font-size: @size;

  [data-dpr="2"] & {
    font-size: @size * 2;
  }

  [data-dpr="3"] & {
    font-size: @size * 3;
  }
}

.size(@width, @height) {
  width: @width;
  height: @height;
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0
}

.container-center(@width, @height) {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: @width;
  height: @height;
}

.mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: @white;
  z-index: 9999;
}

.line-height(@height) {
  height: @height;
  line-height: @height;
}

.bg-image(@image, @width, @height) {
  background-image: url(@image);
  background-repeat: no-repeat;
  background-size: cover;
  width: @width;
  height: @height;
}

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin line-height($height) {
  height: $height;
  line-height: $height;
}

@mixin ellipsis($rowCount: 1) {
  @if $rowCount <=1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $rowCount;
    -webkit-box-orient: vertical;
  }
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}