sass实现文字两侧横线

sass实现文字两侧横线

自我记录

@mixin 的基本作用:

  • 代码复用:把常用的样式封装在一起,不需要重复写相同的代码。
  • 参数化:可以通过参数动态生成样式,提高灵活性。
  • 逻辑处理:结合 Sass 的控制语句(如 @if、@for),可以实现条件逻辑的样式生成。
css 复制代码
// 抽离公共样式
@mixin before-after-common-line($width: 40rpx) {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: $width;
  height: 1rpx;
  background: #333333;
  @content;
}
.test{
  position: relative;
    &::before {
      @include before-after-common-line {
        left: -64rpx;
      }
    }
    &::after {
      @include before-after-common-line(40rpx) {
        right: -64rpx;
      }
    }
}

简单记录一下sass的基础复用

用Sass简化媒体查询

css 复制代码
// 用Sass的混合实现媒体查询
$breakpoints: (
  phone:(320px, 480px),
  pad:(481px, 768px),
  notebook:(769px, 1024px),
  desktop:(1025px, 1200px),
  tv:1201px
);

@mixin responseTo($d_name) {
  $bp: map-get($breakpoints, $d_name);

  @if type-of($bp)=='list' {
    @media (min-width:nth($bp, 1)) and (max-width:nth($bp, 2)) {
      @content;
    }
  }
  @else {
    @media (min-width:$bp) {
      @content;
    }
  }
}

使用

css 复制代码
.nav {
  @include responseTo('phone') {
    width: 100px;
  }

  @include responseTo('pad') {
    width: 200px;
  }
}
相关推荐
言兴3 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte6 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常8 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常9 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101813 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28120 分钟前
Chrome插件开发
前端
前端 贾公子33 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#