-
Sass

工作中Sass常用混合器总结

背景图片

@mixin background($url, $size: cover) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: $size;
}

字体

@mixin font($size, $color, $align: left, $bold: normal) {
  font-size: $size;
  color: $color;
  text-align: $align;
  font-weight: $bold;
}

flex布局

@mixin flex($align:center, $justify:center, $direction:row) {
  display: flex;
  align-items: $align;
  justify-content: $justify;
  flex-direction: $direction;
}

文字单行省略

@mixin ellipsi {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

文字多行省略

@mixin ellipsis($lines) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}
全部评论(9)
  • 默认
  • 回复数量
  • 与我相关
  • 执念说来自成都2024/01/15

    ⚙️⛓🔫💣🔪🗡⚔️🔨💸🔦📟💻📲⌚️⌚️📠📺📀🏎🚲🚙🚕🚠🚞

    点赞0
  • 执念说来自成都2024/01/15

    bangbangtangbaojinbishibizuicahancaidao

    点赞1
    • 执念说来自成都2024/01/15

      caidaohuaixiaohexiehaqianhaobangyoulingyangtuo

      点赞1
  • 执念说来自成都2023/01/30

    34534

    点赞0
  • 执念说来自成都2023/01/04

    The Window.resizeBy() method resizes the current window by a specified amount.

    点赞0
  • 执念说来自成都2023/01/04

    The Window.resizeBy() method resizes the current window by a specified amount.

    点赞0
  • 执念说来自成都2023/01/04

    Window.scrollTo() scrolls to a particular set of coordinates in the document.

    点赞0
  • 执念说来自成都2023/01/04

    var恢复sdfsdf水电费

    点赞0
  • 执念说来自成都2023/01/04
    撒旦发射点
    
    点赞0
  • 执念说来自成都2023/01/04
    @mixin background($url, $size: cover) {
      background-image: url($url);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: $size;
    }
    
    点赞1
推荐文章
测试文章2
测试
Linux安装svn服务器(yum方式)
工作中Sass常用混合器总结
微信公众号开发避坑指南之Vue篇
Navicat Premium 15 安装破解教程(Win、Mac)
Javascript基础知识总结,持续更新(一)
Adobe 通用破解工具(含window、Mac)
linux安装redis完整步骤
工作中Sass常用混合器总结
原文:https://znsay.com/article/6
更新:2021-08-16
浏览:1289
评论12