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

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>