如何缩小 css 类 之间重复的 css 属性代码？

Question

我有更少的代码可以编译成 css 代码，现在一切正常，但我需要缩小我的 css 代码，因为有些 class 它们具有相同的代码css 礼节。有什么方法可以将主题收集到一个函数中并在 class 或类似的东西之后调用它？

这是我的代码：

    // first css code 
    .relative-password-div-create {
                position: relative;

                .icon-eye-password-create {
                    width: 1.25em;
                    height: 0.75em;
                    position: relative;
                    display: inline-block;
                    --background: @vejmag_white-color;
                    --color: currentColor;

                    div {
                        overflow: hidden;
                        height: 50%;
                        position: relative;
                        margin-bottom: -1px;

                        &:before {
                            content: '';
                            background: currentColor;
                            position: absolute;
                            left: 0;
                            right: 0;
                            height: 300%;
                            border-radius: 100%;
                        }

                        &:last-child {
                            &:before {
                                bottom: 0;
                            }
                        }
                    }

                    &:before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 0.35em;
                        height: 0.35em;
                        background: var(--color);
                        border: 0.1em solid var(--background);
                        border-radius: 100%;
                        z-index: 1;
                    }

                    &:after {
                        content: '';
                        position: absolute;
                        top: -0.15em;
                        left: calc(33.333% - 0.15em);
                        transform: rotate(45deg) scaleX(0);
                        transform-origin: left center;
                        width: 90%;
                        height: 0.1em;
                        background: var(--color);
                        border-top: 0.1em solid var(--background);
                        z-index: 2;
                        transition: transform 0.25s;
                    }

                }

                .icon-eye-password-create.slash {
                    &:after {
                        transform: rotate(45deg) scaleX(1);
                        left: 4px;
                    }
                }

                div#togglePasswordCreate {
                    position: absolute;
                    z-index: 4;
                    right: 0em;
                    top: 1em;
                }

            }
            

             //same css code as first class above

            .relative-password-div-create-confirm {
                position: relative;

                .icon-eye-password-create-confirm {
                    width: 1.25em;
                    height: 0.75em;
                    position: relative;
                    display: inline-block;
                    --background: @vejmag_white-color;
                    --color: currentColor;

                    div {
                        overflow: hidden;
                        height: 50%;
                        position: relative;
                        margin-bottom: -1px;

                        &:before {
                            content: '';
                            background: currentColor;
                            position: absolute;
                            left: 0;
                            right: 0;
                            height: 300%;
                            border-radius: 100%;
                        }

                        &:last-child {
                            &:before {
                                bottom: 0;
                            }
                        }
                    }

                    &:before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 0.35em;
                        height: 0.35em;
                        background: var(--color);
                        border: 0.1em solid var(--background);
                        border-radius: 100%;
                        z-index: 1;
                    }

                    &:after {
                        content: '';
                        position: absolute;
                        top: -0.15em;
                        left: calc(33.333% - 0.15em);
                        transform: rotate(45deg) scaleX(0);
                        transform-origin: left center;
                        width: 90%;
                        height: 0.1em;
                        background: var(--color);
                        border-top: 0.1em solid var(--background);
                        z-index: 2;
                        transition: transform 0.25s;
                    }
                }

                .icon-eye-password-create-confirm.slash {
                    &:after {
                        transform: rotate(45deg) scaleX(1);
                        left: 4px;
                    }
                }

                div#togglePasswordCreateConfirm {
                    position: absolute;
                    z-index: 4;
                    right: 0em;
                    top: 1em;
                }

            }

Answer 1

您可以使用 mixins，实际上只是 类，您可以将它们称为函数。这是文档中的示例：

.my-mixin {
  color: black;
}

/* This class won't be included in the
 * final css because it has parantheses in the name */
.my-other-mixin() {
  background: white;
}

.class {
  .my-mixin();
  .my-other-mixin();
}

输出css:

.my-mixin {
  color: black;
}

.class {
  color: black;
  background: white;
}