最近我们在使用CSS渲染页面时遇到了一些问题。我们发现，如果我们使用大量的CSS传参来进行渲染，页面的加载速度会非常缓慢。

我们最初使用CSS传参来进行渲染是因为它非常方便。我们可以轻松地使用变量来定义页面上的样式，这使得代码更加整洁和易于维护。但是，我们发现这种方式在渲染速度方面存在一些缺陷。

首先，使用CSS传参来进行渲染需要将所有的CSS代码都写在一个样式表中。这意味着，如果我们的页面有很多样式，那么这个样式表就会非常大，这会导致页面加载缓慢。

$primary-color: #1E88E5;
$secondary-color: #FF8F00;
.button {
background-color: $primary-color;
color: #fff;
padding: 10px;
}

其次，使用CSS传参来进行渲染也会导致性能问题。当我们使用CSS传参时，浏览器需要对传参进行解析和处理，这会使页面的加载速度变慢。

因此，为了避免这个问题，我们现在开始使用CSS变量来进行渲染。与CSS传参不同的是，CSS变量是在运行时定义的，并且它们只对与变量相关联的元素生效。这意味着，页面上的元素只会在需要时才会渲染相关的CSS变量，从而提高了页面的加载速度。

:root {
--primary-color: #1E88E5;
--secondary-color: #FF8F00;
}
.button {
background-color: var(--primary-color);
color: #fff;
padding: 10px;
}

综上所述，使用CSS传参来进行渲染虽然很方便，但它也可能导致页面加载速度变慢。相比之下，使用CSS变量则更加高效和灵活，因此建议使用CSS变量来完成页面的样式渲染。