当前位置：首页 > article >正文

Sass实现文字两侧横线及Sass常用方案

article 2024/9/24 10:16:52

Sass常用方案及Sass实现文字两侧横线

1.Sass实现文字两侧横线
2.`用Sass简化`媒体查询
3.使用继承+占位符实现样式复用
4.Sass 模块化
5.lighten 和 darken

自我记录

1.Sass实现文字两侧横线

@mixin 的基本作用：

代码复用：把常用的样式封装在一起，不需要重复写相同的代码。
参数化：可以通过参数动态生成样式，提高灵活性。
逻辑处理：结合 Sass 的控制语句（如 @if、@for），可以实现条件逻辑的样式生成。

// 抽离公共样式
@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的基础复用

2.`用Sass简化`媒体查询

// 用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;
    }
  }
}

使用

.nav {
  @include responseTo('phone') {
    width: 100px;
  }

  @include responseTo('pad') {
    width: 200px;
  }
}

3.使用继承+占位符实现样式复用

@mixin 混合注入会冗余代码
@extend 继承会去直接继承父类
@extend 配合 % 占位符使用更完美

//完美继承 使用%占位符去除无用类代码
%tip {
  font-size: 28px;
  opacity: 0.8;
  text-decoration: underline;
}

.tip-msg {
  @extend %tip;
  color: #666;
}

.tip-waring {
  @extend %tip;
  color: orange;
}

.tip-error {
  @extend %tip;
  color: red;
}

.tip-success {
  @extend %tip;
  color: green;
}

普通继承

// 普通继承 会冗余 .tip 代码
.tip {
  font-size: 28px;
  opacity: 0.8;
  text-decoration: underline;
}

.tip-msg {
  @extend .tip;
  color: #666;
}

.tip-waring {
  @extend .tip;
  color: orange;
}

.tip-error {
  @extend .tip;
  color: red;
}

.tip-success {
  @extend .tip;
  color: green;
}



// 混合注入样式 会冗余代码
@mixin tips-mixin {
  font-size: 28px;
  opacity: 0.8;
  text-decoration: underline;
}
.tip-msg-include {
  @include tips-mixin;
  color: #666;
}

.tip-waring-include {
  @include tips-mixin;
  color: orange;
}

.tip-error-include {
  @include tips-mixin;
  color: red;
}

.tip-success-include {
  @include tips-mixin;
  color: green;
}

4.Sass 模块化

@import 运行时与css一样
@import 编译时直接把编译结果生成 sass不建议用作编译时态 问题如下三点

混淆: 需要区分是运行时还是编译时状态
污染: 变量冲突
私有: 只要在文件写了就全部暴露出去了，不像js需要导出

@use

命名空间就是文件名字 as * | xx就是别名
私有性 _ 开头$_color

// @import url('xxxx.scss'); // 运行时
// @import './xxxx.scss';// 编译时
// @use '../../../common.scss';// 命名空间 就是文件名字
// @use './common.scss';// 命名空间 就是文件名字
// @use './abc.scss';// 命名空间 就是文件名字
// .test {
//   color: common.$color;
// }
// .test1 {
//   color: abc.$color;
// }

@use './common.scss' as *;// 命名空间 别名
@use './abc.scss' as b;// 命名空间 别名

.test {
  color: $color;
}
.test1 {
  color: b.$color;
}
// 私有性 加_就可以

5.lighten 和 darken

在这里插入图片描述

lighten 使颜色变浅 color:lighten($color: #000000, $amount: 0);

第一个是颜色
第二个是变浅多少
darken 使颜色变深 color:darken($color: #000000, $amount: 0);
第一个是颜色
第二个是变深多少

// @use 'sass:color';

body {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.btn {
  border: none;
  outline: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  transition: 0.1s;
  width: 100px;
  height: 40px;
  border-radius: 10px;
  margin: 0 auto;
}

$btnColors: #409eff, #67c23a, #e6a23c, #f56c6c, #6c6d71;

@for $i from 1 through length($btnColors) {
  .btn.type-#{$i} {
    $bg: nth($btnColors, $i);
    $color: #fff;
    background-color: $bg;
    color: $color;

    &:hover {
      background-color: lighten($bg, 10%);
    }

    &:active {
      background-color: darken($bg, 10%);
    }

    &:disabled {
      background-color: lighten($bg, 20%);
      color: lighten($color, 40%);
      cursor: not-allowed;
    }
  }

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮颜色</title>
  <link rel="stylesheet" href="./index.css"></link>
</head>
<body>
  <button disabled class="btn type-1">按钮</button>
  <button class="btn type-2">按钮</button>
  <button class="btn type-3">按钮</button>
  <button class="btn type-4">按钮</button>
  <button class="btn type-5">按钮</button>
</body>
</html>