嘿那里！如果您发现自己一遍又一遍地编写相同的 CSS，或者您一直在努力使您的设计能够适应不同的屏幕尺寸，那么您来对地方了。在本文中，我将分享一些非常有用的 SASS mixin 和函数，它们使我的工作流程更加顺畅。这些小工具让我的代码保持干燥（不要重复自己），并使响应式设计、分层和缓存清除等事情变得轻而易举，从而节省了我大量的时间和精力。
无论是将像素转换为 rems、处理 z-index 以实现更清晰的布局，还是创建可重用的帮助器类，我都为您准备了一些东西。让我带您了解这些 mixin 和函数，您可以轻松地将它们放入项目中并立即开始使用。
我将展示的示例可以改进或扩展，您可以在网上找到更多样的示例。但这些是我个人使用最多的。让我们开始吧！
将像素值转换为 rem。
@function rem($pixel) {
$convertedValue: ($pixel / 16) + rem;
@return $convertedValue;
}
// Usage
div {
font-size: rem(32);
width: rem(600);
}
简单易读的 mixin 用法，用于媒体查询的响应式设计。
@mixin small {
@media only screen and (max-width: 768px) {
@content;
}
}
@mixin medium {
@media only screen and (max-width: 992px) {
@content;
}
}
@mixin large {
@media only screen and (max-width: 1200px) {
@content;
}
}
// Usage
.title {
font-size: 16px;
@include small {
font-size: 14px;
}
@include medium {
font-size: 18px;
}
@include large {
font-size: 20px;
}
}
此设置可确保您的布局具有清晰的视觉层层次结构，同时保持灵活性和可扩展性。
$z-index: (
dropdown: 6,
mobileMenu: 7,
stickyHeader: 8,
tooltip: 10,
modalBackdrop: 11,
modal: 12,
header: 15,
notificationToast: 18,
spinner: 20,
);
@function z-index($key) {
@return map-get($z-index, $key);
}
.header {
z-index: z-index(header);
}
使用 id 缓存背景图片
$imageId: unique_id();
@mixin cacheBustBgImages($urls...) {
$backgroundImages: ();
@each $url in $urls {
$backgroundImages: append(
$backgroundImages,
url("#{$url}?v=#{$imageId}"),
comma
);
}
background-image: $backgroundImages;
}
// Single Image Usage
.hero {
@include cacheBustBgImages("asset/images/image.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
// Multiple Image Usage
.hero {
@include cacheBustBgImages(
"asset/images/image.png",
"asset/images/other-image.png"
);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
使用 ID 缓存应用字体。
$fontId: unique_id();
@font-face {
font-family: "Custom Fonts";
src: url("asset/images/custom-font.eot?v=#{$fontId}");
src: url("asset/images/custom-font.eot?v=#{$fontId}#iefix") format("embedded-opentype"),
url("asset/images/custom-font.woff2?v=#{$fontId}") format("woff2"),
url("asset/images/custom-font.woff?v=#{$fontId}") format("woff"), url("asset/images/custom-font.ttf?v=#{$fontId}")
format("truetype"),
url("asset/images/custom-font.svg?v=#{$fontId}#svg") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
绝对定位元素的混合。上、右、下、左顺序很重要。
@mixin absolute($top, $right, $bottom, $left) {
position: absolute;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
// Usage
div {
@include absolute(100px, 100px, auto, auto);
}
用省略号截断溢出的文本。
@mixin text-ellipsis($max-width: 100%) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: $max-width;
}
// Usage
.element {
@include text-ellipsis(200px);
}
对于悬停状态，允许您传入特定属性。
@mixin item-hover($color, $bg-color) {
&:hover {
color: $color;
background-color: $bg-color;
}
}
// Usage
.button {
@include item-hover(white, black);
}
// Center child elements both vertically and horizontally
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
// Center element both horizontally and vertically
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// Center text
.text-center {
text-align: center;
}
// Hide element
.hidden {
display: none;
}
// Hide element on desktop view
.d-none-desktop {
@media screen and (min-width: 680px) {
display: none;
}
}
// Hide element on mobile view
.d-none-mobile {
@media screen and (max-width: 680px) {
display: none;
}
}
// Add border radius to element
.border-radius {
border-radius: 10px;
}
感谢您的阅读。如果您觉得文章有用，请不要忘记点赞和评论，以便其他人也能访问到。如果你的日子很慷慨，你甚至可以请我喝杯咖啡。 ？
以上是使用这些 SASS Mixins 和函数最大化您的工作流程的详细内容。更多信息请关注PHP中文网其他相关文章！
