Skip to content

Commit

Permalink
Updates colspan() to accept mixed units
Browse files Browse the repository at this point in the history
  • Loading branch information
@robweychert
robweychert committed Nov 7, 2019
1 parent d5f6e76 commit 12d125d
Showing 1 changed file with 163 additions and 63 deletions.
226 changes: 163 additions & 63 deletions _column-setter.scss
View file
Expand Up @@ -32,22 +32,22 @@
@function wrong-type($type, $arg2:null, $arg3:null) {
@if $arg2
and $arg3 {
@return "'#{$arg2}' and '#{$arg3}' are not #{$type}s"
@return "'#{$arg2}' and '#{$arg3}' are not #{$type}s";
}
@if not $arg3 {
@return "'#{$arg2}' is not a #{$type}"
@return "'#{$arg2}' is not a #{$type}";
}
}
@function missing($number) {
@if $number < 2 {
@return "an argument is missing. "
@return "an argument is missing. ";
}
@if $number >= 2 {
@return "arguments are missing. "
@return "arguments are missing. ";
}
}
@function optional($number,$current,$correct) {
@return "the optional #{$number} argument (currently '#{$current}') will only accept a value of '#{$correct}'. "
@return "the optional #{$number} argument (currently '#{$current}') will only accept a value of '#{$correct}'. ";
}

// ----------------------------------------
Expand All @@ -67,7 +67,7 @@
// 40em

@function bp-attribute($bp-name, $bp-attribute) {
@return map-get(map-get($breakpoints, $bp-name), $bp-attribute)
@return map-get(map-get($breakpoints, $bp-name), $bp-attribute);
}

// ----------------------------------------
Expand All @@ -78,16 +78,16 @@

@function bp-validator() {
@if type-of($mar) != number or unitless($mar) == false {
@warn "Here is the bp-validator $mar warning."
@warn "Here is the bp-validator $mar warning.";
}
@if type-of($col) != number or unitless($col) == false {
@warn "Here is the bp-validator $col warning."
@warn "Here is the bp-validator $col warning.";
}
@if type-of($gut) != number or unitless($gut) == false {
@warn "Here is the bp-validator $gut warning."
@warn "Here is the bp-validator $gut warning.";
}
@if type-of($pad) != number or unitless($pad) == false {
@warn "Here is the bp-validator $pad warning."
@warn "Here is the bp-validator $pad warning.";
}
@for $i from 1 through length($breakpoints) {
@if type-of(map-get(map-get($breakpoints, (nth(map-keys($breakpoints), $i))), cols)) != number or unitless(map-get(map-get($breakpoints, (nth(map-keys($breakpoints), $i))), cols)) == false {
Expand All @@ -112,8 +112,8 @@
//
// 538

@function width($width) {
@return (($col * $width) + ($gut * ($width - 1)))
@function fluidWidth($width) {
@return (($col * $width) + ($gut * ($width - 1)));
}

// ----------------------------------------
Expand All @@ -134,60 +134,160 @@

$colspan-lesson: "A 'colspan' function call must include the unitless numeric column widths of both the target and its container, e.g. 'colspan(4,8)'. The target width can also be specified as 'p' (for $pad width) or 'g' (for $gut width).";

@function colspan($target:null,$container:null) {
@if $target
and $container {
@if $target == "m"
and (type-of($container) == "number" and unitless($container) == true) {
@return percentage($mar / (width($container) + ($mar * 2)))
}
@if $target == "p"
and (type-of($container) == "number" and unitless($container) == true) {
@return percentage($pad / width($container))
}
@if $target == "g"
and (type-of($container) == "number" and unitless($container) == true) {
@return percentage($gut / width($container))
}
@if (type-of($target) != "number" or unitless($target) == false)
and (type-of($container) != "number" or unitless($container) == false)
and $target != "m"
and $target != "p"
and $target != "g" {
@warn invalid("colspan",$target,$container) + wrong-type("unitless number",$target,$container) + ". " + $colspan-lesson;
@return false;
}
@if (type-of($target) != "number" or unitless($target) == false)
and (type-of($container) == "number" and unitless($container) == true) {
@warn invalid("colspan",$target,$container) + wrong-type("unitless number",$target) + ". " + $colspan-lesson;
@return false;
}
@if ((type-of($target) == "number" and unitless($target) == true) and (type-of($container) != "number" or unitless($container) == false))
or ($target == "m" and (type-of($container) != "number" or unitless($container) == false))
or ($target == "p" and (type-of($container) != "number" or unitless($container) == false))
or ($target == "g" and (type-of($container) != "number" or unitless($container) == false)) {
@warn invalid("colspan",$target,$container) + wrong-type("unitless number",$container) + ". " + $colspan-lesson;
@return false;
}
}
@if $target
and not $container {
@if (type-of($target) == "number" and unitless($target) == true) {
@warn invalid(colspan,$target) + missing(1) + $colspan-lesson;
@return false;
} @else {
@warn invalid(colspan,$target) + wrong-type("unitless number",$target) + ", and " + missing(1) + $colspan-lesson;
@function colspan($target:null, $container:null, $addgut:false, $neg:false) {
@if $target and $container { // If a target and container have been specified
@if $target == $container { // If the target and container are the same
@return 100%;
} @else if type-of($container) == "number" and unitless($container) == true { // If the container is a unitless number

$fluidMar: true;
$fluidCol: true;
$fluidGut: true;
$fluidPad: true;
$addgutAmount: 0;
$negAmount: 1;
$negOpen: "";
$negClose: "";

@if unitless($mar) == false { // If margins are fixed width
$fluidMar: false;
}
@if unitless($col) == false { // If columns are fixed width
$fluidCol: false;
}
@if unitless($gut) == false { // If gutters are fixed width
$fluidGut: false;
@if $addgut == true { // If a gutter is added to the desired width
$addgutAmount: $gut;
}
} @else if $addgut == true { // If gutters are fluid width and a gutter is added to the desired width
@if $fluidCol == true { // If columns are fluid width
$addgutAmount: percentage($gut / fluidWidth($container));
} @else { // If columns are fixed width
$addgutAmount: 1;
}
}
@if unitless($pad) == false { // If padding is fixed width
$fluidPad: false;
}
@if $neg == true { // If the desired width is negative
$negAmount: -1;
$negOpen: "(";
$negClose: ") * " + $negAmount;
}

@if $target == "p" { // If the target is "p" (padding)
@if $addgut == true { // If a gutter is added to the desired width
@warn "$addgut can't be used with p or g.";
@return false;
} @else if $fluidPad == false { // If padding is fixed width
@return $pad * $negAmount;
} @else if $fluidCol == true and $fluidGut == true { // If padding, columns, and gutters are fluid width
@return percentage($pad / fluidWidth($container)) * $negAmount;
} @else if $fluidCol == true { // If padding and columns are fluid width and gutters are fixed width
@return calc(#{$negOpen}((100% - #{$gut * ($container - 1)}) / #{$container}) * #{$pad / $col}#{$negClose});
} @else if $fluidGut == true { // If padding and gutters are fluid width and columns are fixed width
@return calc(#{$negOpen}((100% - #{$col * $container}) / #{$container - 1}) * #{$pad / $gut}#{$negClose});
} @else { // If padding is fluid width and columns and gutters are fixed width
@warn "For padding to be fluid width, columns and/or gutters must also be fluid width.";
@return false;
}
} @else if $target == "g" { // If the target is "g" (gutter)
@if $addgut == true { // If a gutter is added to the desired width
@warn "$addgut can't be used with p or g.";
@return false;
} @else if $fluidGut == false { // If gutters are fixed width
@return $gut * $negAmount;
} @else if $fluidCol == true { // If gutters and columns are fluid width
@return (percentage($gut / fluidWidth($container)) + $addgutAmount) * $negAmount;
} @else { // If gutters are fluid width and columns are fixed width
@return calc(#{$negOpen}(100% - #{$col * $container}) / #{$container - 1}#{$negClose});
}
} @else if type-of($target) == "number" and unitless($target) == true { // If the target is a unitless number
@if $fluidCol == false { // If columns are fixed width
@if $fluidGut == true { // If gutters are fluid width
@return calc(#{$negOpen}(((100% - #{$col * $container}) / #{$container - 1}) * #{$target - 1 + $addgutAmount}) + #{$col * $target}#{$negClose});
} @else if unit($col) == unit($gut) { // If columns and gutters are fixed width and use the same units
@return (($col * $target) + ($gut * ($target - 1)) + $addgutAmount) * $negAmount;
} @else { // If columns and gutters are fixed width and use different units
@return calc(#{$negOpen}#{($col * $target)} + #{($gut * ($target - 1)) + $addgutAmount}#{$negClose});
}
} @else if $fluidGut == true { // If columns are fluid width and gutters are fluid width
@return (percentage(fluidWidth($target) / fluidWidth($container)) + $addgutAmount) * $negAmount;
} @else { // If columns are fluid width and gutters are fixed width
@return calc(#{$negOpen}(((100% - #{$gut * ($container - 1)}) / #{$container}) * #{$target}) + #{($gut * ($target - 1)) + $addgutAmount}#{$negClose});
}
} @else { // If the specified target is not "m", "p", "g", or a unitless number
@warn "A colspan() target must be either 'p' (padding), 'g' (gutter), or a unitless number.";
@return false;
}
} @else { // If the specified container is not a unitless number
@warn "A colspan() container must be a unitless number.";
@return false;
}
}
@if not $target {
@warn invalid(colspan) + missing(2) + $colspan-lesson;
} @else if $target and not $container { // If a target is specified but not a container
@warn "colspan() requires a container to be specified.";
@return false;
} @else if not $target { // If neither target nor container are specified
@warn "colspan() requires a target and container to be specified.";
@return false;
} @else {
@return percentage(width($target) / width($container))
}
}

// @function colspan($target:null,$container:null) {
// @if $target
// and $container {
// @if $target == "m"
// and (type-of($container) == "number" and unitless($container) == true) {
// @return percentage($mar / (width($container) + ($mar * 2)));
// }
// @if $target == "p"
// and (type-of($container) == "number" and unitless($container) == true) {
// @return percentage($pad / width($container));
// }
// @if $target == "g"
// and (type-of($container) == "number" and unitless($container) == true) {
// @return percentage($gut / width($container));
// }
// @if (type-of($target) != "number" or unitless($target) == false)
// and (type-of($container) != "number" or unitless($container) == false)
// and $target != "m"
// and $target != "p"
// and $target != "g" {
// @warn invalid("colspan",$target,$container) + wrong-type("unitless number",$target,$container) + ". " + $colspan-lesson;
// @return false;
// }
// @if (type-of($target) != "number" or unitless($target) == false)
// and (type-of($container) == "number" and unitless($container) == true) {
// @warn invalid("colspan",$target,$container) + wrong-type("unitless number",$target) + ". " + $colspan-lesson;
// @return false;
// }
// @if ((type-of($target) == "number" and unitless($target) == true) and (type-of($container) != "number" or unitless($container) == false))
// or ($target == "m" and (type-of($container) != "number" or unitless($container) == false))
// or ($target == "p" and (type-of($container) != "number" or unitless($container) == false))
// or ($target == "g" and (type-of($container) != "number" or unitless($container) == false)) {
// @warn invalid("colspan",$target,$container) + wrong-type("unitless number",$container) + ". " + $colspan-lesson;
// @return false;
// }
// }
// @if $target
// and not $container {
// @if (type-of($target) == "number" and unitless($target) == true) {
// @warn invalid(colspan,$target) + missing(1) + $colspan-lesson;
// @return false;
// } @else {
// @warn invalid(colspan,$target) + wrong-type("unitless number",$target) + ", and " + missing(1) + $colspan-lesson;
// @return false;
// }
// }
// @if not $target {
// @warn invalid(colspan) + missing(2) + $colspan-lesson;
// @return false;
// } @else {
// @return percentage(width($target) / width($container));
// }
// }

// ------------------------------------------------------------
// MIXINS
// ------------------------------------------------------------
Expand Down Expand Up @@ -356,7 +456,7 @@ $grid-lesson: "A 'grid' mixin call must include a valid class name, e.g. 'grid(c
@each $bp, $value in $breakpoints {
@include breakpoint-min($bp) {
@if map-has-key(map-get($breakpoints, $bp), margin) {
margin: 0 colspan(bp-attribute($bp, margin), width(bp-attribute($bp, cols)) + (bp-attribute($bp, margin) * 2));
margin: 0 colspan(bp-attribute($bp, margin), fluidWidth(bp-attribute($bp, cols)) + (bp-attribute($bp, margin) * 2));
} @else {
margin: 0 colspan(m, bp-attribute($bp, cols));
}
Expand All @@ -371,11 +471,11 @@ $grid-lesson: "A 'grid' mixin call must include a valid class name, e.g. 'grid(c
max-width: $max-width;
$bp-final: nth(map-keys($breakpoints), -1); // Name of the widest breakpoint
@if map-has-key(map-get($breakpoints, $bp-final), margin) {
@media screen and (min-width: ((((bp-attribute($bp-final, margin) / width(bp-attribute($bp-final, cols))) * $max-width) * 2) + $max-width)) {
@media screen and (min-width: ((((bp-attribute($bp-final, margin) / fluidWidth(bp-attribute($bp-final, cols))) * $max-width) * 2) + $max-width)) {
margin: 0 auto;
}
} @else {
@media screen and (min-width: (((($mar / width(bp-attribute($bp-final, cols))) * $max-width) * 2) + $max-width)) {
@media screen and (min-width: (((($mar / fluidWidth(bp-attribute($bp-final, cols))) * $max-width) * 2) + $max-width)) {
margin: 0 auto;
}
}
Expand Down

0 comments on commit 12d125d

Please sign in to comment.