我是 SASS 的新手,我不知道将其重写为 SCSS 语法。它是汉堡包导航的一部分。任何帮助将不胜感激。
.hamburger {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger, /* <-------
.hamburger::before,
.hamburger::after {
width: 30px;
height: 3px;
background: #0c0c0c;
border-radius: 0.5626em;
transition: all .4s ease-in-out;
}
.hamburger::before,
.hamburger::after {
position: absolute;
content: "";
}
.hamburger::before {
top: -8px;
}
.hamburger::after {
top: 8px;
}
我应该为这部分创建一个 mixin 并调用它两次吗?
width: 30px;
height: 3px;
background: #0c0c0c;
border-radius: 0.5626em;
transition: all .4s ease-in-out;
更新: 我试过这个似乎有效,但不确定我在语法方面是否正确:
.hamburger {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&,
&::before,
&::after {
width: 30px;
height: 3px;
background: #0c0c0c;
border-radius: 0.5626em;
transition: all .4s ease-in-out;
}
&::before,
&::after {
position: absolute;
content: "";
}
&::before {
top: -8px;
}
&::after {
top: 8px;
}
}
答案 0 :(得分:1)
.hamburger {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&,
&::before,
&::after {
width: 30px;
height: 3px;
background: #0c0c0c;
border-radius: 0.5626em;
transition: all .4s ease-in-out;
}
&::before,
&::after {
position: absolute;
content: "";
}
&::before {
top: -8px;
}
&::after {
top: 8px;
}
}