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>
