Less 3.8

README.md

@@ -11,12 +11,10 @@ The code is currently aligned with [Bootstrap v4.1.3](https://github.com/twbs/bo
 
 ## Getting Started
 
-Options for installing Bootstrap Less in your project:
+Options for installing Bootstrap Less in your project (Less v3.7+ required):
 
-- Install with [npm](https://www.npmjs.com/): `npm install bootstrap-less-port`
-- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap-less-port`
-- Clone the repo: `git clone https://github.com/seanCodes/bootstrap-less-port.git`
-- [Download the latest release](https://github.com/seanCodes/bootstrap-less-port/archive/master.zip)
+- Install with [npm](https://www.npmjs.com/): `npm install less bootstrap-less-port`
+- Install with [yarn](https://yarnpkg.com/): `yarn add less bootstrap-less-port`
 
 Note that this code is only necessary if you want to use Less in your project and want to import and/or customize Bootstrap’s variables, mixins or styles. If you plan to use the CSS framework wholesale, you can get the compiled CSS files from the main Bootstrap repo, so there’s no need for this code.
 
@@ -36,48 +34,34 @@ your-project/
              └─ ...
 ```
 
-In this case, you could then import what you need into `custom.less` using relative paths to the files in the `node_modules` folder:
+In this case, you could then import what you need into `custom.less` using module-relative paths:
 
 ```less
 // custom.less
 
 
 // Required Files
-@import "../../node_modules/bootstrap-less-port/less/_functions";
-@import "../../node_modules/bootstrap-less-port/less/_variables";
-@import "../../node_modules/bootstrap-less-port/less/_mixins";
+@import "bootstrap-less-port/less/_functions";
+@import "bootstrap-less-port/less/_variables";
+@import "bootstrap-less-port/less/_mixins";
 
 // Optional Files
-@import "../../node_modules/bootstrap-less-port/less/_reboot";
-@import "../../node_modules/bootstrap-less-port/less/_utilities";
-@import "../../node_modules/bootstrap-less-port/less/_type";
-@import "../../node_modules/bootstrap-less-port/less/_grid";
+@import "bootstrap-less-port/less/_reboot";
+@import "bootstrap-less-port/less/_utilities";
+@import "bootstrap-less-port/less/_type";
+@import "bootstrap-less-port/less/_grid";
 ...
 ```
 
 This approach is recommended since it will result in a smaller CSS file by omitting the styles you don’t need. (Just be aware that some files are dependent on others.)
 
-Alternatively, you can get the entire framework by importing the main `bootstrap.less` file:
+Alternatively, you can get the entire framework by importing the default `bootstrap.less` file:
 
 ```less
 // custom.less
 
 
-@import "../../node_modules/bootstrap-less-port/less/bootstrap";
-```
-
-#### Usage with `less-plugin-npm-import`
-
-If you’re using `lessc` on the command line, you can use [`less-plugin-npm-import`](https://github.com/less/less-plugin-npm-import) to import the files in a much cooler and more maintainable way. Just install the plugin via npm and then reference the Bootstrap Less files using the plugin’s default `npm://` prefix:
-
-```less
-@import "npm://bootstrap-less-port/less/bootstrap";
-```
-
-Then simply include the `--npm-import` flag when compiling:
-
-```bash
-$ lessc --npm-import file.less file.css
+@import "bootstrap-less-port";
 ```
 
 
@@ -89,7 +73,7 @@ The recommended way of customizing Bootstrap is to modify the provided variables
 // custom.less
 
 
-@import "../../node_modules/bootstrap-less-port/less/bootstrap";
+@import "bootstrap-less-port";
 
 // Variable Overrides
 @body-bg: @black;
@@ -124,9 +108,7 @@ This port attempts to mirror the source Sass files as closely as possible in ord
 
    Note: The plugins are included using the [`@plugin`](http://lesscss.org/features/#plugin-atrules-feature) at-rule instead of as arguments to the `lessc` CLI. This was intentionally done since most Less GUI compilers don’t allow you to customize the command-line arguments.
 
-0. **Maps** Less has no _native_ concept of maps, which are used extensively in the Bootstrap Sass files. They can be emulated, however, by using a comma-separated list of space-separated lists, which is what is done in this port.
-
-0. **Loops** Sass `@for` and `@each` loops have been replaced with Less’s method of looping which requires unique, named mixins for every loop. This is a bit clunky and means that the loops used in this port are verbose and difficult to read, but it’s the best we’ve got until I can figure out how to overcome this with a plugin.
+0. **Loops** Where possible, Sass `@each` loops have been replaced by the Less `each()` function. Sass `@for` directives are trickier and have no direct Less analog (yet), so they are replaced with a method of looping which requires unique, named mixins for every loop. This is a bit clunky, and means that in some places, loops are verbose and difficult to read, but it’s the best we’ve got until I can figure out how to overcome this with a plugin or Less has a native equivalent.
 
    In order to make catching bugs easier, the Sass versions of most for/each loops have been kept in the code, commented, above the Less versions.
 
@@ -139,6 +121,9 @@ This port attempts to mirror the source Sass files as closely as possible in ord
 
 ## Contributing
 
+- Clone the repo: `git clone https://github.com/seanCodes/bootstrap-less-port.git`
+- [Download the latest release](https://github.com/seanCodes/bootstrap-less-port/archive/master.zip)
+
 For bugs, feature-requests, or issues with the compiled CSS, please create an issue in the main Bootstrap repo.
 
 For errors or bugs related to the ported code, please submit a pull request or create an issue.

less/_alert.less

@@ -49,13 +49,8 @@
 //    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
 //  }
 //}
-#each-theme-color-alert(@i) when (@i =< length(@theme-colors)) {
-	@item: extract(@theme-colors, @i);
-	@color: extract(@item, 1);
-
+each(@theme-colors, #(@value, @color) {
 	.alert-@{color} {
 		#alert-variant(theme-color-level(@color, @alert-bg-level), theme-color-level(@color, @alert-border-level), theme-color-level(@color, @alert-color-level));
 	}
-
-	#each-theme-color-alert((@i + 1));
-} #each-theme-color-alert(1);
+})

less/_badge.less

@@ -45,14 +45,8 @@
 //    @include badge-variant($value);
 //  }
 //}
-#each-theme-color-badge(@i: 1) when (@i =< length(@theme-colors)) {
-	@item: extract(@theme-colors, @i);
-	@color: extract(@item, 1);
-	@value: extract(@item, 2);
-
+each(@theme-colors, #(@value, @color) {
 	.badge-@{color} {
 		#badge-variant(@value);
 	}
-
-	#each-theme-color-badge((@i + 1));
-} #each-theme-color-badge();
+})

less/_buttons.less

@@ -62,17 +62,11 @@ fieldset:disabled a.btn {
 //    @include button-variant($value, $value);
 //  }
 //}
-#each-theme-color-button(@i: 1) when (@i =< length(@theme-colors)) {
-	@item: extract(@theme-colors, @i);
-	@color: extract(@item, 1);
-	@value: extract(@item, 2);
-
+each(@theme-colors, #(@value, @color) {
 	.btn-@{color} {
 		#button-variant(@value, @value);
 	}
-
-	#each-theme-color-button((@i + 1));
-} #each-theme-color-button();
+})
 
 //@each $color, $value in $theme-colors {
 //  .btn-outline-#{$color} {
@@ -83,17 +77,11 @@ fieldset:disabled a.btn {
 //    }
 //  }
 //}
-#each-theme-color-button-outline(@i: 1) when (@i =< length(@theme-colors)) {
-	@item: extract(@theme-colors, @i);
-	@color: extract(@item, 1);
-	@value: extract(@item, 2);
-
+each(@theme-colors, #(@value, @color) {
 	.btn-outline-@{color} {
 		#button-outline-variant(@value);
 	}
-
-	#each-theme-color-button-outline((@i + 1));
-} #each-theme-color-button-outline();
+})
 
 
 //

less/_custom-forms.less

@@ -270,34 +270,14 @@
 
 	//@each $lang, $value in $custom-file-text {
 	//  &:lang(#{$lang}) ~ .custom-file-label::after {
-	//    content: @value;
+	//    content: $value;
 	//  }
 	//}
-	#each-language-file-input-label(@i: 1) when (@i =< length(@custom-file-text)) {
-		// LESS PORT: This gets really funky because a single key/value pair has to be handled
-		// differently than a list of key/values. This is because Less will see a single key/value as
-		// a space-separated list of two items instead of a comma-separated list of just a single
-		// item, so logic is added to handle both cases.
-		& when (length(extract(@custom-file-text, @i)) = 1) {
-			@lang: extract(@custom-file-text, 1);
-			@text: extract(@custom-file-text, 2);
-
-			&:lang(@{lang}) ~ .custom-file-label::after {
-				content: @text;
-			}
-		}
-		& when (length(extract(@custom-file-text, @i)) = 2) {
-			@item: extract(@custom-file-text, @i);
-			@lang: extract(@item, 1);
-			@text: extract(@item, 2);
-
-			&:lang(@{lang}) ~ .custom-file-label::after {
-				content: @text;
-			}
-
-			#each-language-file-input-label((@i + 1));
+	each(@custom-file-text, #(@value, @lang) {
+		&:lang(@{lang}) ~ .custom-file-label::after {
+			content: @value;
 		}
-	} #each-language-file-input-label();
+	});
 }
 
 .custom-file-label {

less/_functions.less

@@ -3,7 +3,9 @@
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
 
 @plugin "plugins/index";
-@plugin "plugins/map-get";
+
+// Implements a keys function like map-keys
+@plugin "plugins/keys";
 
 // Ascending
 // Used to evaluate Sass maps like our grid breakpoints.
@@ -67,22 +69,6 @@
 //}
 @plugin "plugins/color-yiq";
 
-// Retreive color Sass maps
-//@function color($key: "blue") {
-//  @return map-get($colors, $key);
-//}
-@plugin "plugins/color";
-
-//@function theme-color($key: "primary") {
-//  @return map-get($theme-colors, $key);
-//}
-@plugin "plugins/theme-color";
-
-//@function gray($key: "100") {
-//  @return map-get($grays, $key);
-//}
-@plugin "plugins/gray";
-
 // Request a theme color level
 //@function theme-color-level($color-name: "primary", $level: 0) {
 //  $color: theme-color($color-name);

less/_grid.less

@@ -41,6 +41,6 @@
 //
 // Common styles for small and large grid columns
 
-#output-columns() when (@enable-grid-classes) {
+& when (@enable-grid-classes) {
 	#make-grid-columns();
-} #output-columns();
+}

less/_list-group.less

@@ -110,13 +110,9 @@
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
-//@each @color, @value in @theme-colors {
-//  #list-group-item-variant(@color, theme-color-level(@color, -9), theme-color-level(@color, 6));
+//@each $color, $value in $theme-colors {
+//  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
 //}
-#each-theme-color-list-group(@i: 1) when (@i =< length(@theme-colors)) {
-	@color: extract(extract(@theme-colors, @i), 1);
-
+each(@theme-colors, #(@value, @color) {
 	#list-group-item-variant(@color, theme-color-level(@color, -9), theme-color-level(@color, 6));
-
-	#each-theme-color-list-group((@i + 1));
-} #each-theme-color-list-group();
+});