[英]Parametric mixin values (not) affecting a nested variable
I'm trying to allow for instances where an element in a column is the only or first item on a line (giving it the appropriate margins) with the added classes of .first, .only, and .firstOnly. 我试图允许列中的元素是一行中的唯一或第一项(给它适当的边距)添加了.first,.only和.firstOnly类的实例。 Is there a way to incorporate the values supplied in a parametric mixin to define (or change) a variable?
有没有办法合并参数mixin中提供的值来定义(或改变)变量?
$colCount: 2;
$colSpan: 1;
$gutter: 4%;
$width: $colSpan * ((100% - $gutter) / $colCount);
@mixin width($colCount: 2, $colSpan: 1, $gutter: 4%) {
$width: $colSpan * ((100% - $gutter) / $colCount);
}
@mixin columns($colCount: 2, $colSpan: 1, $gutter: 4%) {
@content;
@include width() {
width: $width;
}
&.first {
@include first();
}
&.only {
@include only();
}
&.firstOnly {
@include firstOnly();
}
}
@mixin first($colCount: 2, $colSpan: 1, $gutter: 4%) {
margin-left: 100% - $width;
}
@mixin only($colCount: 2, $colSpan: 1, $gutter: 4%) {
margin-left: 100% - (2 * $width) - (2 * $gutter);
}
@mixin firstOnly($colCount: 2, $colSpan: 1, $gutter: 4%) {
margin-left: 100% - $width - $gutter;
margin-right: 100% - $width;
}
You have a number of things going on here that aren't quite right. 你有很多事情发生在这里并不完全正确。
// If this is part of a reusable library, use the default flag
// I typically prefer prefixing global variables to avoid collisions with other code
// (eg. $grid-colCount instead of $colCount)
$colCount: 2 !default;
$colSpan: 1 !default;
$gutter: 4% !default;
// Mixin changed to a function, better for its intended purpose
@function width($colCount: $colCount, $colSpan: $colSpan, $gutter: $gutter) {
@return $colSpan * ((100% - $gutter) / $colCount);
}
// The arguments are set to our global variables by default
@mixin columns($colCount: $colCount, $colSpan: $colSpan, $gutter: $gutter) {
@content;
// Something weird was going on here that just plain didn't compile
width: width($colCount, $colSpan, $gutter);
&.first {
// This is where your mixin was getting messed up,
// it wasn't passing the values it received on to the mixins
@include first($colCount, $colSpan, $gutter);
}
&.only {
@include only($colCount, $colSpan, $gutter);
}
&.firstOnly {
@include firstOnly($colCount, $colSpan, $gutter);
}
}
@mixin first($colCount: $colCount, $colSpan: $colSpan, $gutter: $gutter) {
margin-left: 100% - width($colCount, $colSpan, $gutter);
}
@mixin only($colCount: $colCount, $colSpan: $colSpan, $gutter: $gutter) {
margin-left: 100% - (2 * width($colCount, $colSpan, $gutter)) - (2 * $gutter);
}
@mixin firstOnly($colCount: $colCount, $colSpan: $colSpan, $gutter: $gutter) {
margin-left: 100% - width($colCount, $colSpan, $gutter) - $gutter;
margin-right: 100% - width($colCount, $colSpan, $gutter);
}
When we call the mixins like this: 当我们这样调用mixins时:
.test {
@include columns(3, 8, 40%);
}
.test2 {
@include columns;
}
We get this result: 我们得到这个结果:
.test {
width: 160%;
}
.test.first {
margin-left: -60%;
}
.test.only {
margin-left: -300%;
}
.test.firstOnly {
margin-left: -100%;
margin-right: -60%;
}
.test2 {
width: 48%;
}
.test2.first {
margin-left: 52%;
}
.test2.only {
margin-left: -4%;
}
.test2.firstOnly {
margin-left: 48%;
margin-right: 52%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.