Repository navigation
Customizing embed aspect ratios #28106
Description
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
Activity
pcodedviral commentedon Jan 23, 2019
hello @ysds
you can not add single value in list variable
plz use multiple list values
ysds commentedon Jan 23, 2019
Yeah, I understand the usage of the Sass list. This is not a question but a issue report about the documents or SCSS.
MartijnCuppens commentedon Jan 27, 2019
It's just not easy to define a list with one list as value in sass. I would go for
$list: append((),(2 1)), but yeah, that's just something you got to know. Maybe we should switch to sass maps instead of lists? Something like this:This would be a breaking change
What do you think about that, @ysds?
ysds commentedon Jan 29, 2019
I prefer to use sass map for v5, because it can create semantic class names and can use a number containing a decimal separator. e.g.:
MartijnCuppens commentedon 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
v5and 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
v4since it seems a lot of people are having troubles with this.martinbean commentedon Feb 6, 2019
Wow. That is some clunky syntax but thanks for pointing me in the right direction, @MartijnCuppens.