chore(rename): Changed all scss functions and mixins from camel case to kebab case.

Author: Jen Downs

examples/bootstrap/css-gridish/bootstrap-grid.sketch

@@ -81,24 +81,24 @@ body {
 }
 
 @each $name, $breakpoint in $allBreakpoints {
-  @include gridBreakpointWrapper($breakpoint, $first) {
+  @include grid-breakpoint-wrapper($breakpoint, $first) {
     @if $includeFlexFallback {
-      @include gridLegacyZeros($breakpoint, $allBreakpoints, $name);
-      @include gridLegacyColumns($breakpoint, $first, $last, $name, $allBreakpoints);
-      @if isSameBreakpoint($breakpoint, $last) == false {
-        @include gridLegacyHeights($name, $rows, $rowHeight);
+      @include grid-legacy-zeros($breakpoint, $allBreakpoints, $name);
+      @include grid-legacy-columns($breakpoint, $first, $last, $name, $allBreakpoints);
+      @if is-same-breakpoint($breakpoint, $last) == false {
+        @include grid-legacy-heights($name, $rows, $rowHeight);
       }
     }
 
     @if (map-has-key($allBreakpoints, $name)) {
-      @include gridMargin($breakpoint, $last);
-      @include gridPadding($breakpoint);
-      @include gridLegacyWrapper($includeFlexFallback) {
-        @include gridColumns($breakpoint, $first, $last) {
+      @include grid-margin($breakpoint, $last);
+      @include grid-padding($breakpoint);
+      @include grid-legacy-wrapper($includeFlexFallback) {
+        @include grid-columns($breakpoint, $first, $last) {
           display: grid;
           grid-auto-rows: minmax($rowHeight * 1rem, min-content);
         }
-        @include gridVariables($breakpoint, $first, $rows, $rowHeight);
+        @include grid-variables($breakpoint, $first, $rows, $rowHeight);
       }
     }
   }

examples/bootstrap/css-gridish/scss/_core.scss

@@ -1,7 +1,7 @@
 @import "sass-list-maps";
 
 // Transform the gutter property into a padding property for web
-@function addPadding($breakpoints) {
+@function add-padding($breakpoints) {
   $cleanBreakpoints: ();
   @each $name, $breakpoint in $breakpoints {
     $cleanBreakpoints: map-merge(
@@ -20,8 +20,8 @@
 }
 
 // Merge standard and custom breakpoints into list
-@function allBreakpoints($breakpoints, $extraBreakpoints, $first, $last) {
-  $allBreakpoints: $breakpoints;
+@function all-breakpoints($breakpoints, $extraBreakpoints, $first, $last) {
+  $all-breakpoints: $breakpoints;
   @each $currentBreakpoint in $extraBreakpoints {
     $extraBreakpointName: nth($currentBreakpoint, 1);
     $extraBreakpointWidth: nth($currentBreakpoint, 2);
@@ -56,17 +56,17 @@
     $currentBreakpoint: (
       $extraBreakpointName: map-merge(nth($match, 2),  (breakpoint: $extraBreakpointWidth))
     );
-    $allBreakpoints: map-merge($allBreakpoints, $currentBreakpoint);
+    $all-breakpoints: map-merge($all-breakpoints, $currentBreakpoint);
   }
 
-  @return maps-sort($allBreakpoints, breakpoint);
+  @return maps-sort($all-breakpoints, breakpoint);
 }
 
-@function columnStringWidth($string, $multiple) {
+@function column-string-width($string, $multiple) {
   @return 1rem;
 }
 
-@function columnWidth($breakpoint, $first, $last, $i, $columnAmount) {
+@function column-width($breakpoint, $first, $last, $i, $columnAmount) {
   $columnSize: 100 / map-get($breakpoint, columns) * $i *
     map-get($breakpoint, columns) / $columnAmount;
   $margin: 0;
@@ -77,51 +77,20 @@
   @if (map-get($breakpoint, margin) != null and
 map-get($breakpoint, margin) != 0) {
     $columnSize: calc(
-       (#{100vw} - #{$margin}) * #{roundDecimal($i / $columnAmount, 3, floor)}
+       (#{100vw} - #{$margin}) * #{round-decimal($i / $columnAmount, 3, floor)}
     );
     $type: "";
   }
 
   @return #{$columnSize}#{$type};
 }
 
-@function isSameBreakpoint($a, $b) {
+@function is-same-breakpoint($a, $b) {
   @return map-get($a, breakpoint) == map-get($b, breakpoint);
 }
 
 // _decimal.scss | MIT License | gist.github.com/terkel/4373420
-@function roundDecimal ($number, $digits: 0, $mode: round) {
-  $n: 1;
-  // $number must be a number
-  @if type-of($number) != number {
-    @warn '#{ $number } is not a number.';
-    @return $number;
-  }
-  // $digits must be a unitless number
-  @if type-of($digits) != number {
-    @warn '#{ $digits } is not a number.';
-    @return $number;
-  } @else if not unitless($digits) {
-    @warn '#{ $digits } has a unit.';
-    @return $number;
-  }
-  @for $i from 1 through $digits {
-    $n: $n * 10;
-  }
-  @if $mode == round {
-    @return round($number * $n) / $n;
-  } @else if $mode == ceil {
-    @return ceil($number * $n) / $n;
-  } @else if $mode == floor {
-    @return floor($number * $n) / $n;
-  } @else {
-    @warn '#{ $mode } is undefined keyword.';
-    @return $number;
-  }
-}
-
-// _decimal.scss | MIT License | gist.github.com/terkel/4373420
-@function roundDecimal ($number, $digits: 0, $mode: round) {
+@function round-decimal($number, $digits: 0, $mode: round) {
   $n: 1;
   // $number must be a number
   @if type-of($number) != number {
@@ -153,7 +122,7 @@ map-get($breakpoint, margin) != 0) {
 
 /// String to number converter
 /// @author Hugo Giraudel
-@function stringToNumber($value) {
+@function string-to-number($value) {
   @if type-of($value) == "number" {
     @return $value;
   } @else if type-of($value) != "string" {

examples/bootstrap/css-gridish/scss/_functions.scss

@@ -1,6 +1,6 @@
 // Enclose content in appropiate media query
-@mixin gridBreakpointWrapper($breakpoint, $first) {
-  @if isSameBreakpoint($breakpoint, $first) {
+@mixin grid-breakpoint-wrapper($breakpoint, $first) {
+  @if is-same-breakpoint($breakpoint, $first) {
     @content;
   } @else {
     @media (min-width: map-get($breakpoint, breakpoint) * 1rem) {
@@ -10,7 +10,7 @@
 }
 
 // Set the width of a grid’s column
-@mixin gridColumns($breakpoint, $first, $last) {
+@mixin grid-columns($breakpoint, $first, $last) {
   @if (map-get($breakpoint, columns) != null) {
     $columnQuantity: map-get($breakpoint, columns);
     $columnSize: 100vw / $columnQuantity;
@@ -21,15 +21,15 @@
       $totalMargin: map-get($breakpoint, margin) * 2;
     }
 
-    @if isSameBreakpoint($breakpoint, $last) and map-get($last, margin) != null {
+    @if is-same-breakpoint($breakpoint, $last) and map-get($last, margin) != null {
       $totalMargin: map-get($last, margin) * 2;
     }
 
-    @if isSameBreakpoint($breakpoint, $last) and $totalMargin != 0 {
+    @if is-same-breakpoint($breakpoint, $last) and $totalMargin != 0 {
       $columnSize: calc(
          (#{map-get($breakpoint, breakpoint) * 1rem} - #{$totalMargin}) / #{$columnQuantity}
       );
-    } @else if isSameBreakpoint($breakpoint, $last) {
+    } @else if is-same-breakpoint($breakpoint, $last) {
       $columnSize: calc(
         #{map-get($breakpoint, breakpoint) * 1rem} / #{$columnQuantity}
       );
@@ -38,7 +38,7 @@
     }
 
     .#{$prefix}-grid {
-      @if isSameBreakpoint($breakpoint, $first) {
+      @if is-same-breakpoint($breakpoint, $first) {
         @content;
       }
       grid-template-columns: repeat(auto-fill, $columnSize);
@@ -59,14 +59,14 @@
 }
 
 // Generate variables for commonly used rows
-@mixin gridHeightsFixed($rows, $rowHeight) {
+@mixin grid-heights-fixed($rows, $rowHeight) {
   @for $i from 1 to $rows {
     --#{$prefix}-height-#{$i}: $i * $rowHeight * 1rem;
   }
 }
 
 // Set the width of a grid’s column for legacy grid
-@mixin gridLegacyColumns($breakpoint, $first, $last, $name, $breakpoints) {
+@mixin grid-legacy-columns($breakpoint, $first, $last, $name, $breakpoints) {
   $columnValue: null;
   $columnSize: null;
   $totalMargin: 0;
@@ -76,7 +76,7 @@
   }
 
   // Do not make class if last media query
-  @if isSameBreakpoint($breakpoint, $last) == false {
+  @if is-same-breakpoint($breakpoint, $last) == false {
     // Loop each breakpoint to insert previous breakpoint classes inside this breakpoint’s media query
     // Ex: Make sure .yourPrefix-grid__col--sm--2 has correct sizes in the lg media query
     @each $currentName, $currentBreakpoint in $breakpoints {
@@ -87,15 +87,15 @@
         // Loop each column in current breakpoint for new class
         // Ex: .yourPrefix-grid__col--sm--1, .yourPrefix-grid__col--sm--2, etc.
         @for $i from 1 through map-get($currentBreakpoint, columns) {
-          $columnSize: columnWidth(
+          $columnSize: column-width(
             $breakpoint,
             $first,
             $last,
             $i,
             $columnAmount
           );
 
-          $isSecondToLast: isSameBreakpoint(
+          $isSecondToLast: is-same-breakpoint(
             $breakpoint,
             nth(nth($breakpoints, length($breakpoints) - 1), 2)
           );
@@ -138,15 +138,15 @@
     }
   }
 
-  @if isSameBreakpoint($breakpoint, $last) {
+  @if is-same-breakpoint($breakpoint, $last) {
     [class*="#{$prefix}-grid__col--"] {
       min-width: 0;
     }
   }
 }
 
 // Set the height of an item for legacy grid
-@mixin gridLegacyHeights($name, $rows, $rowHeight) {
+@mixin grid-legacy-heights($name, $rows, $rowHeight) {
   .#{$prefix}-grid__height--#{$name}--0 {
     height: 0;
   }
@@ -158,7 +158,7 @@
 }
 
 // If we need legacy grid, wrap this content in support tag
-@mixin gridLegacyWrapper($includeFlexFallback) {
+@mixin grid-legacy-wrapper($includeFlexFallback) {
   @if $includeFlexFallback {
     @supports (display: grid) {
       @content;
@@ -169,7 +169,7 @@
 }
 
 // Generate all classes for 0 and 0-only displaying, including custom breakpoints if they exist
-@mixin gridLegacyZeros($breakpoint, $breakpoints, $name) {
+@mixin grid-legacy-zeros($breakpoint, $breakpoints, $name) {
   // Undo previous breakpoint’s 0--only class
   $onlyCorrectionFound: false;
   @for $i from length($breakpoints) *-1 through -1 {
@@ -195,7 +195,7 @@
 
 // Set the width of a grid’s margin
 // and allow for a child to break out of the grid’s margin
-@mixin gridMargin($breakpoint, $last) {
+@mixin grid-margin($breakpoint, $last) {
   @if map-get($breakpoint, margin) != null and map-get($breakpoint, margin) > 0 {
     $margin: #{map-get($breakpoint, margin)};
 
@@ -205,7 +205,7 @@
     }
 
     .#{$prefix}-grid.#{$prefix}-grid--bleed {
-      @if isSameBreakpoint($breakpoint, $last) {
+      @if is-same-breakpoint($breakpoint, $last) {
         $maxBleed: "(100vw - #{map-get($breakpoint, breakpoint) * 1rem}) / -2";
         margin-left: calc(#{$maxBleed} - #{$margin});
         margin-right: calc(#{$maxBleed} - #{$margin});
@@ -230,7 +230,7 @@
       margin-right: -$margin;
     }
 
-    @include gridLegacyWrapper($includeFlexFallback) {
+    @include grid-legacy-wrapper($includeFlexFallback) {
       .#{$prefix}-grid__break--left {
         margin-left: -$margin;
       }
@@ -243,7 +243,7 @@
 }
 
 // Classnames for different padding options
-@mixin gridPadding($breakpoint) {
+@mixin grid-padding($breakpoint) {
   @if (map-get($breakpoint, padding) != null) {
     $padding: map-get($breakpoint, padding);
 
@@ -280,10 +280,10 @@
 }
 
 // Use all CSS Variable mixins
-@mixin gridVariables($breakpoint, $first, $rows, $rowHeight) {
-  @if isSameBreakpoint($breakpoint, $first) {
+@mixin grid-variables($breakpoint, $first, $rows, $rowHeight) {
+  @if is-same-breakpoint($breakpoint, $first) {
     :root {
-      @include gridHeightsFixed($rows, $rowHeight);
+      @include grid-heights-fixed($rows, $rowHeight);
     }
   }
 }

examples/bootstrap/css-gridish/scss/_mixins.scss

@@ -5,7 +5,7 @@
 /// Function returns the value for a given breakpoint.
 /// @param {String} $breakpointName Breakpoint name.
 /// @return {Length} The breakpoint value in rems.
-@function getBreakpointValue($breakpointName) {
+@function get-breakpoint-value($breakpointName) {
   $breakpointValue: map-deep-get($breakpointsAndArtboards, $breakpointName, 'breakpoint');
 
   @return $breakpointValue * 1rem;
@@ -18,8 +18,8 @@
 /// @example scss
 /// @media screen and (min-width: 20rem) {
 /// button {
-///   @include mediaQuery('sm') {
-///     max-width: getFluidSize('sm', 1);
+///   @include media-query('sm') {
+///     max-width: get-fluid-size('sm', 1);
 ///   }
 /// }
 /// @output css
@@ -28,7 +28,7 @@
 ///     max-width: 25vw;
 ///   }
 /// }
-@function getFluidSize($breakpointName, $columnSpan) {
+@function get-fluid-size($breakpointName, $columnSpan) {
   $breakpoint: map-get($breakpointsAndArtboards, $breakpointName);
 
   @if ($breakpoint == null or type-of($breakpoint) != 'map') {
@@ -63,8 +63,8 @@
 /// @return {Length} A calculated rem value.
 /// @example scss
 /// button {
-///   @include mediaQuery('sm') {
-///     max-width: getFixedSize(10);
+///   @include media-query('sm') {
+///     max-width: get-fixed-size(10);
 ///   }
 /// }
 /// @output css
@@ -73,7 +73,7 @@
 ///     max-width: 5rem;
 ///   }
 /// }
-@function getFixedSize($fixedUnit) {
+@function get-fixed-size($fixedUnit) {
   $rowHeight: map-get($grid-values, 'rowHeight');
 
   @if ($rowHeight == null or type-of($rowHeight) != 'number') {
@@ -89,8 +89,8 @@
 
 /// Utility for declaring mobile-first media queries.
 /// @param {String} $breakpointName The name of the breakpoint to set its width value to media query.
-@mixin mediaQuery($breakpointName) {
-  @media screen and (min-width: #{getBreakpointValue($breakpointName)}) {
+@mixin media-query($breakpointName) {
+  @media screen and (min-width: #{get-breakpoint-value($breakpointName)}) {
     @content;
   }
 }

examples/bootstrap/css-gridish/scss/_utilities.scss

@@ -5,12 +5,12 @@ $prefix: gridish !default;
   $prefix: map-get($grid-values, "prefix");
 }
 $extraBreakpoints: () !default;
-$breakpoints: addPadding(map-get($grid-values, "breakpoints"));
+$breakpoints: add-padding(map-get($grid-values, "breakpoints"));
 $first: nth(nth($breakpoints, 1), 2);
 $last: nth(nth($breakpoints, -1), 2);
 $includeFlexFallback: false !default;
 $rowHeight: map-get($grid-values, "rowHeight");
 $rows: map-get($grid-values, "rows");
 $extraArtboards: map-get($grid-values, "extraArtboards");
-$allBreakpoints: allBreakpoints($breakpoints, $extraBreakpoints, $first, $last);
-$breakpointsAndArtboards: allBreakpoints($breakpoints, $extraArtboards, $first, $last);
+$allBreakpoints: all-breakpoints($breakpoints, $extraBreakpoints, $first, $last);
+$breakpointsAndArtboards: all-breakpoints($breakpoints, $extraArtboards, $first, $last);