SCSS-在基于@extend的方法中使用@mixin(classy css)
我被尤娜·克拉维茨创造SCS的方法所吸引。 我遇到的问题是在页面底部,她使用@mixin使构建更容易。但在我看来,如果我以所示的方式使用mixin,我最终会得到重复的代码 从她的帖子中摘取一些例子: 不使用混音器SCSS-在基于@extend的方法中使用@mixin(classy css),css,sass,mixins,extend,Css,Sass,Mixins,Extend,我被尤娜·克拉维茨创造SCS的方法所吸引。 我遇到的问题是在页面底部,她使用@mixin使构建更容易。但在我看来,如果我以所示的方式使用mixin,我最终会得到重复的代码 从她的帖子中摘取一些例子: 不使用混音器 $color--primary: #b29; $color--secondary: #19d; %btn--base { border: 1px solid currentColor; border-radius: 1.5em; background: none;
$color--primary: #b29;
$color--secondary: #19d;
%btn--base {
border: 1px solid currentColor;
border-radius: 1.5em;
background: none;
outline: none;
transition-duration: .25s;
cursor: pointer;
margin: 30px;
padding: .5em 1em;
&:hover {
color: white;
background: black;
}
}
%btn--primary {
@extend %btn--base;
color: $color--primary;
font-size: 1.5em;
}
%btn--secondary {
@extend %btn--base;
color: $color--secondary;
font-size: 1.1em;
}
.hero {
&__btn {
@extend %btn--primary;
}
}
.sidebar {
&__btn {
@extend %btn--secondary;
}
}
.global-nav {
&__btn {
@extend %btn--secondary;
&--login {
@extend .global-nav__btn;
margin-right: 1em;
// at this point, you're
// styling .global-nav__btn--login
}
}
}
结果是css没有重复
.hero__btn, .sidebar__btn, .global-nav__btn, .global-nav__btn--login {
border: 1px solid currentColor;
border-radius: 1.5em;
background: none;
outline: none;
transition-duration: .25s;
cursor: pointer;
margin: 30px;
padding: .5em 1em;
}
.hero__btn:hover, .sidebar__btn:hover, .global-nav__btn:hover, .global-nav__btn--login:hover {
color: white;
background: black;
}
.hero__btn {
color: #b29;
font-size: 1.5em;
}
.sidebar__btn, .global-nav__btn, .global-nav__btn--login {
color: #19d;
font-size: 1.1em;
}
.global-nav__btn--login {
margin-right: 1em;
}
好的,到目前为止还不错。但她建议使用@mixin。现在我真的很喜欢这个想法,我喜欢能够使用@if@else,我真的喜欢能够通过@mixin和静默占位符传递参数。她的示例只构建了一个css语句(以及两个带有悬停的语句)。例如,我将在原始示例的下面再添加一些。注意结果css是如何重复的。我是不是遗漏了什么?我可以使用上面的例子,但是我真的很喜欢将@mixin与它的选项结合使用
示例
// the colon after the argument denotes a default value
// creating the constructor function (mixin)
@mixin btn-me($color: hotpink, $size: normal) {
border: 1px solid $color;
border-radius: 1.5em;
background: none;
outline: none;
transition-duration: .25s;
cursor: pointer;
margin: 30px;
padding: .5em 1em;
@if $size == 'small' {
font-size: .8em;
} @else {
font-size: 1.2em;
}
&:hover {
color: white;
background: $color;
}
}
// creating placeholder classes to extend from and reference
%btn--primary {
@include btn-me; // no arguments means it takes defaults
}
%btn--secondary {
@include btn-me(blue, small);
}
%additional--btn--to--show--repeats {
@include btn-me(green, small);
}
// instantiating the code with semantic naming
// this is the only moment that we are writing
// any code to be compiled
.hero__btn {
@extend %btn--secondary;
}
.additional__btn {
@extend %btn--secondary;
}
.additional__btn__two {
@extend %btn--primary;
}
.additional__btn__three {
@extend %additional--btn--to--show--repeats;
}
结果重复CSS
.additional__btn__two {
border: 1px solid hotpink;
border-radius: 1.5em;
background: none;
outline: none;
transition-duration: .25s;
cursor: pointer;
margin: 30px;
padding: .5em 1em;
font-size: 1.2em;
}
.additional__btn__two:hover {
color: white;
background: hotpink;
}
.hero__btn, .additional__btn {
border: 1px solid blue;
border-radius: 1.5em;
background: none;
outline: none;
transition-duration: .25s;
cursor: pointer;
margin: 30px;
padding: .5em 1em;
font-size: .8em;
}
.hero__btn:hover, .additional__btn:hover {
color: white;
background: blue;
}
.additional__btn__three {
border: 1px solid green;
border-radius: 1.5em;
background: none;
outline: none;
transition-duration: .25s;
cursor: pointer;
margin: 30px;
padding: .5em 1em;
font-size: .8em;
}
.additional__btn__three:hover {
color: white;
background: green;
}
不幸的是,混音就是这样工作的。如果你想减少你的文件大小,我会考虑只使用MIXIN来改变你所使用的属性,并使用一个规则的扩展来支持不变的CSS规则。p>
@mixin btn-me($color: hotpink, $size: normal) {
border: 1px solid $color;
@if $size == 'small' {
font-size: .8em;
} @else {
font-size: 1.2em;
}
&:hover {
background: $color;
}
}
%btn {
border-radius: 1.5em;
background: none;
outline: none;
transition-duration: .25s;
cursor: pointer;
margin: 30px;
padding: .5em 1em;
&:hover {
color: white;
}
}
%btn--primary {
@include btn-me; // no arguments means it takes defaults
@extend %btn;
}
%btn--secondary {
@include btn-me(blue, small);
@extend %btn;
}
我有一条狗,他的名字叫宾果!谢谢你,乔。