打开我们自己创建的这个 carousel 样式 .. 这里主要就是定制了一下旋转木马上面的那个控制按钮 .. 这些样式被我嵌套在了 .ui.hero.carousel 里面 ..

也就是这个旋转木马的控制按钮的样式只在这类元素里面有效 .. 我页面的其它地方或者其它的页面上，我有可能会再次用到这个旋转木马 .. 而且我也想使用同样样式的控制按钮 ..

所以我们可以让这个样式更通用一些 ..

先去掉这个样式选择器里的 hero .. 这样如果元素带 ui 还有 carousel 这两个类，它里面的控制按钮就会使用这里定制的这些样式 ..

这对按钮在英雄区这里显示的时候，我想让它在底部 .. 不过很有可能在其它的地方我希望让它居中显示 .. 我们可以先把按钮的默认的位置设置成居中 ..

去掉 bottom .. 把 top 的值设置成 50% .. 再添加一个 margin-top ，它的值设置成负的小按钮的高度的一半 .. -16px

现在这对儿按钮会居中显示 .. 我们可以再设置一下底部状态 ..

嵌套一个样式 &.bottom .. & 是引用 ..

sass 在编译 css 的时候会替换掉它，这里替换成的就是上面这个 .prev.button ， 这样如果元素上面同时包含 prev.button 还有 bottom 类 ..

就去应用点样式 .. 这里可以把 top 设置成 auto .. 然后把 bottom 设置成 0 .. 底部再添加点边距 .. 24px ..

再打开自定义的脚本 .. 在配置英雄区上的旋转木马这里 .. 这个按钮元素上面，除了 prev 还有 button 类以外，再加上一个 bottom ..

你会发现，现在这对按钮就会在底部显示了 ..

英雄区的下面的旋转木马里的导航点需要点特别的样式 .. 我们单独再去设置一下 ..