Skip to content

Refactor using native each(), bump Less version #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 19 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,10 @@ The code is currently aligned with [Bootstrap v4.1.1](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.

Expand All @@ -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";
```


Expand All @@ -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;
Expand Down Expand Up @@ -124,9 +108,9 @@ 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. **Maps** Less has native maps as of Less 3.5, but map keys must follow rules of property names (e.g. keys can't start with a number). Sass maps don't require those rules, so in this port, maps are emulated by using a comma-separated list of space-separated lists.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@matthew-dean So wait, does this break in 3.8? → https://github.com/calvinjuarez/bootstrap-less-port/blob/less3.7/less/_variables.less#L23 It didn't seem to have trouble compiling when I first tried it. (I'll have to try it out.)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update: that map's not currently used anywhere, so that variable would never need to be resolved. :/

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update again, the @sizes map is used (with each() and works fine).

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wait so is there still a question?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess no, just that Less maps don't really enforce any requirements on properties. @grays[900]; works just fine, for example.

https://gist.github.com/calvinjuarez/7da0db15c421afcca1fc53e382936cce

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. I guess I assumed the parser followed CSS rules in that regard.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've done a PR to Microsoft for VSCode, so it should no longer flag:

a) Numeric properties (since they're apparently allowed in Less)
b) Mixin / DR lookups

microsoft/vscode-css-languageservice#135


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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Considering range() has a PR (less/less.js#3334), we could wait on this change and implement each()+range() to replace @for.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You certainly could!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


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.

Expand All @@ -139,6 +123,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.
Expand Down
Loading