Skip to content
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

Adds range() function for lists #3334

Merged
merged 1 commit into from
Nov 29, 2018
Merged

Conversation

matthew-dean
Copy link
Member

@matthew-dean matthew-dean commented Nov 28, 2018

While attempting to upgrade a Bootstrap Less port to use each() (seanCodes/bootstrap-less-port#12), I saw that there were still some gaps for porting Sass to Less code. Specifically, when looping X number of times based on a variable value. (This has been discussed in numerous issues, including as early as #249 and #2270.)

This PR fills a major gap by adding a very modest list-generating range() function modelled after Lodash / PHP / others. Coupled with each() it provides a native replacement for a Sass @for loop (along with letting you generate range lists for any other general purpose). This solves for loops without the syntactic burden of adding a new paradigm. It simply creates and populates a list in a declarative way.

Like Lodash, the function signature is:

range([start=1], end, [step=1])

Start and step are optional (with step requiring a start). Also, this adopts Less behavior of unit casting. That is, the "end" value's unit is applied to the output units. (Also, consistent with Less, lists are 1-based, so unlike Lodash, the default start value is 1.)

Meaning:

@list: range(10px, 30px, 10); // equivalent to writing 10px 20px 30px

Coupled with each(), this constructs for-style incremental loops.

@columns: range(4);  // 1 2 3 4

each(@columns, .(@val) {
  .col-@{val} {
    width: (100% / length(@columns));
  }
});

Outputs:

.col-1 {
  width: 25%;
}
.col-2 {
  width: 25%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 25%;
}

@seven-phases-max
Copy link
Member

seven-phases-max commented Nov 28, 2018

I can't review/test the code. But my +10 for the method itself (clear non-intrusive function w/o any new burdening syntax facilities).

Copy link
Member

@calvinjuarez calvinjuarez left a comment

Choose a reason for hiding this comment

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

Straight forward and simple. I like it a lot!

@calvinjuarez
Copy link
Member

Failing test doesn't look to do with these changes at all.

@matthew-dean
Copy link
Member Author

Thanks @seven-phases-max @calvinjuarez !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants