这个按比例显示的容器的样式，很可能在其它的地方也会用到，而且我可能会用到不同的比例，比如 4:3 ，3:2 ... 每次我们都需要重复使用这块样式 ... 然后还需要为这个 padding-top 计算出不同的值 ...

我们可以把这块样式定义成一个 mixin ... 先去创建一个新的 sass 文件 ... 名字可能是 _mixins.scss ... 定义的 mixin 可以放到这个文件里面 ..

打开 main.scss ，导入这个 mixins ... 注意导入的顺序 ... 尽量把它放到靠上的位置上 .. 比如这个变量文件的下面 ...

这样可以保证下面这些样式可以正常的使用在这个文件里定义的 mixin ..

再打开 mixins 文件 ... 定义一个 mixin @mixin ... 名字可以是 aspect-ration ... 它有两个参数 ... 一个是 $width ，表示宽，一个是 $height ，表示高 ..

再把刚才直接放到 story 里面的按比例的容器的样式剪切到这个 mixin 里面 ...

然后这个 padding-top 的值，可以根据使用这个 mixin 的时候，交给它的宽，还有高的值自动计算出来 ..

($height / $width) * 100%

这样就定义好了一个叫 aspect-ration 的 mixin ...

然后在想要使用这个 mixin 的地方 ... 可以用一下 @include .. 后面是要用的 mixin 的名字 .. aspect-ratio(16, 9); 用的时候可以告诉它需要的宽还有高的比例 ...

这样这个 story 容器就会是 16:9 的比例 ...

再改一下 ... 比如 3:2 ... 我们定义的 mixin 会自动算出正确的 padding-top 的值 ... 现在这个 story 容器的显示比例就会是 3:2 ...