Sass 轻量安全无污染运行时工具集，简化 css 编写，不增加代码量！
功能特点
- 响应式布局
- unocss 一致的 rem 转化
- 小三角
- placeholder 样式更改
- 多行文本省略号
- 清除浮动
- 删除 margin 折叠
- 去除 右边的箭头
- 隐藏滚动条
yarn add sass-runtime-tool -D
# or
npm i -D sass-runtime-tool// xxx.scss
@use "sass-runtime-tool/all.scss" as *;
// ...Vite 全局使用
// 创建 src/assets/global.scss
@forward "sass-runtime-tool/all.scss";// vite.config.ts
import { defineConfig } from "vite";
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "/src/assets/global.scss" as *;',
},
},
},
});<div class="box">
<span>box1</span>
<span>box2</span>
</div>.box {
height: 10px;
background-image: linear-gradient(
to right,
toLighten(pink, 50%),
toDarken(pink, 50%)
);
border: 2px solid green;
@include media("md-and-down") {
width: 50vw;
}
@include media("xs-only") {
background-color: orangered;
background-image: unset;
}
@include media(only-width(768px, 960px)) {
background-color: red;
background-image: unset;
}
}<div>Content</div>div {
font-size: rem(4); // 1rem, 可通过 $rem-base 改变
}<input class="input" placeholder="Please enter content" />.input {
@include placeholder(red) {
font-size: 12px;
}
}
/* 或者 */
.input {
@include placeholder {
color: red;
font-size: 12px;
}
}<div class="triangle">
<div class="triangle-2"></div>
</div>.triangle {
&::before {
content: "";
display: inline-block;
@include triangle;
}
&::after {
content: "";
display: inline-block;
@include triangle("left", 26px, green);
}
}
.triangle-2 {
@include triangle($color: blue);
}<div class="ellipsis-2">一行省略号一行省略号一行省略号一行省略号</div>
<div class="ellipsis">
多行省略号多行省略号多行省略号多行省略号多行省略号多行省略号
</div>.ellipsis {
width: 100px;
@include ellipsis(3);
}
.ellipsis-2 {
width: 100px;
@include ellipsis;
}<div class="left">left</div>
<div class="right">right</div>.left {
float: left;
}
.right {
@include clearfix;
}<div class="box-clearfix">
<div class="inner">inner-inner-inner</div>
</div>.inner {
margin-top: 10px;
}
.box-clearfix {
background-color: yellow;
@include margin-recover;
}<input type="number" />/* 推荐全局使用 */
:where(input[type="number"]) {
@include hide-arrow;
}<div class="scroll">
<p style="height: 1000px"></p>
</div>.scroll {
height: 100px;
@include hide-scroll;
}@debug toLighten(red, 10%);
@debug toLighten(#123456, 10%);
@debug toDarken(red, 10%);
@debug toDarken(#123456, 10%);
@debug min-width(768px);
@debug max-width(768px);
@debug only-width(768px, 1240px);
@debug rem(20);
@debug values(20, 5px);// Break point
$breakpoints: (
"sm": 768px,
"md": 960px,
"lg": 1240px,
"xl": 1920px,
);
$breakpoints-spec: (
"xs-only": "(max-width: #{map.get($breakpoints, sm)})",
"sm-and-up": "(min-width: #{map.get($breakpoints, sm)})",
"sm-only":
"(min-width: #{$map.get($breakpoints, sm)}) and (max-width: #{map.get($breakpoints, md) - 1})",
"sm-and-down": "(max-width: #{map.get($breakpoints, md)})",
"md-and-up": "(min-width: #{map.get($breakpoints, md)})",
"md-only":
"(min-width: #{$map.get($breakpoints, md)}) and (max-width: #{map.get($breakpoints, lg) - 1})",
"md-and-down": "(max-width: #{map.get($breakpoints, lg)})",
"lg-and-up": "(min-width: #{map.get($breakpoints, lg)})",
"lg-only":
"(min-width: #{$map.get($breakpoints, lg)}) and (max-width: #{map.get($breakpoints, xl) - 1})",
"lg-and-down": "(max-width: #{map.get($breakpoints, xl)})",
"xl-only": "(min-width: #{map.get($breakpoints, xl)})",
);
// Rem base
$rem-base: 4;
$rem-unit-base: 16px;@forward "sass-runtime-tool/all.scss" with (
// 自定义响应式断点
$breakpoints: ("sm": 640px),
// 设置 rem base
$rem-base: 5 // [20 => 4rem, 10 => 2rem]
);