Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Customizing embed aspect ratios

See original GitHub issue

The way to customize the embed aspect ratios is some confusing.

(1) The following SCSS occurs compile ERROR:

$embed-responsive-aspect-ratios: (2 1);

@import "../node_modules/bootstrap/scss/bootstrap";

Error message:

List index is 2 but list is only 1 item long for `nth'

Demo: https://www.sassmeister.com/gist/d8f4ece6f886602fc110c594a33357f5

(2) The following SCSS is OK:

$embed-responsive-aspect-ratios: (2 1), ;

@import "../node_modules/bootstrap/scss/bootstrap";

(3) The following SCSS is OK:

$embed-responsive-aspect-ratios: (2 1), (3 1);

@import "../node_modules/bootstrap/scss/bootstrap";

SASS seems to recognize $list: (2 1) as a list included the two values instead of one set of two values.

Demo: https://codepen.io/anon/pen/GzgrwL?editors=1111 - See console view

Issue Analytics

State:
Created 5 years ago
Comments:6 (5 by maintainers)

Top GitHub Comments

1reaction

martinbeancommented, Feb 6, 2019

Wow. That is some clunky syntax but thanks for pointing me in the right direction, @MartijnCuppens.

0reactions

MartijnCuppenscommented, Feb 6, 2019

Hi @martinbean, this is related to your comment on #25894. It’s not easy to define a sass list with one item. The most straightforward method is $embed-responsive-aspect-ratios: append((), (4 3)) I guess. We’ll probably change this in v5 and will use sass maps like ysds describes above.

But I think we’ll also need to add a notice about this in our docs for v4 since it seems a lot of people are having troubles with this.