我能'；不要将SCS更改为CSS

我对此幻灯片有问题：

HTML是：

幻灯片标题1
幻灯片说明1

幻灯片标题2
幻灯片说明2

幻灯片标题3
幻灯片说明3

幻灯片标题4
幻灯片说明4

1.
2.
3.
4.

SCSS代码为：

正文{
字体：14px/2“开放式sans”，无衬线；
字母间距：0.05em；
}
.btn{
显示：内联块；
填充：13px 20px；
颜色：#fff；
文字装饰：无；
位置：相对位置；
背景：透明；
边框：1px实心#e1e1；
字体：12px/1.2“奥斯瓦尔德”，无衬线；
字母间距：0.4em；
文本对齐：居中；
文本缩进：2px；
文本转换：大写；
过渡：颜色0.1s线性0.05s；
&：：之前{
内容：“；
显示：块；
位置：绝对位置；
最高：50%；
左：0；
宽度：100%；
高度：1px；
背景：#e1e1；
z指数：1；
不透明度：0；
过渡：高度0.2s缓和，顶部0.2s缓和，不透明度0s线性0.2s；
}
&：：之后{
过渡：边界0.1s线性0.05s；
}
.btn内部{
位置：相对位置；
z指数：2；
}
&：悬停{
颜色：#373737；
过渡：颜色0.1s线性0s；
&：：之前{
排名：0；
身高：100%；
不透明度：1；
过渡：高度0.2s缓和，顶部0.2s缓和，不透明度0s线性0s；
}
&：：之后{
边框颜色：#373737；
过渡：边界0.1s线性0；
}
}
}
.幻灯片放映{
溢出：隐藏；
位置：相对位置；
宽度：100%；
高度：100vh；
z指数：1；
.幻灯片放映内部{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.幻灯片{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1；
}
.幻灯片{
显示：无；
溢出：隐藏；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1；
不透明度：0；
过渡：不透明度0.3s；
&.处于活动状态{
显示：块；
}
&.已加载{
不透明度：1；
}
.标题{
填充：0 100px；
}
.image容器{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景位置：中心；
z指数：1；
背景尺寸：封面；
图像渲染：优化质量；
&：：在{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
}
}
.形象{
宽度：100%；
宽度：100%；
对象匹配：覆盖；
身高：100%；
}
&-内容{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：2；
颜色：#fff；
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.标题{
保证金：0自动15px；
最大宽度：1000px；
字体：300 50px/1.2“奥斯瓦尔德”，无衬线；
字母间距：0.35em；
文本转换：大写；
}
.文本{
保证金：0自动；
最大宽度：1000px；
字号：18px；
线高：1.4；
}
.btn{
利润率：15px0；
边框颜色：#fff；
&：：之前{
背景：#fff
}
}
}
.pagination{
位置：绝对位置；
底部：35px；
左：0；
宽度：100%；
高度：12px；
游标：默认值；
z指数：2；
文本对齐：居中；
.项目{
显示：内联块；
填充：15px 5px；
位置：相对位置；
宽度：46px；
高度：32px；
光标：指针；
文本缩进：-999em；
z指数：1；
+.第页{
左边距：-2px；
}
&：：之前{
内容：“；
显示：块；
位置：绝对位置；
顶部：15px；
左：5px；
宽度：36px；
高度：2倍；
背景：rgba（255,255,255,0.5）；
过渡：背景0.2秒；
}
&：：之后{
宽度：0；
背景：#fff；
z指数：2；
过渡：宽度0.2s；
}
&：hover：：在，
&.处于活动状态：：之前{
背景色：#fff；
}
}
}
.箭头{
.阿罗{
边距：-33px 0；填充：20px；位置：绝对；顶部：50%；光标：指针；z索引：3；
}
上一篇{
左：30px；
&：hover.svg{
左：-10px；
}
}
.下一个{
右：30px；
&：hover.svg{
左：10px；
}
}
.svg{
位置：相对位置；
左：0；
宽度：14px；
高度：26px；
填充：#fff；
过渡：左0.2秒；
}
}
}

JavaScript代码是：

var slideshowDuration=500；
var slideshow=$（'.main content.slideshow'）；
功能幻灯片切换（幻灯片、索引、自动）{
if（slideshow.data（'wait'））返回；
var slides=slideshow.find（'.slide'）；
var pages=slideshow.fi
sass filename.scss newfilename.css

https://codepen.io