Question

我试图将LESS文件从Creative Bootstrap主题转换为SASS。它编译没有错误，但标题品牌类不能正常工作。我检查了课程并发现警告＆＃34; 无效的属性值＆＃34;关于以下代码：

color: fade(white, 70%);

这里是SASS中的转换代码：

@media (min-width: 768px) 
    background-color: transparent
    border-color: fade(white, 0.3)
    .navbar-header .navbar-brand 
        color: fade(white, 70%)
        &:hover,
        &:focus 
            color: white

这里是原来的LESS：

@media (min-width: 768px) {
    background-color: transparent;
    border-color: fade(white, 30%);
    .navbar-header .navbar-brand {
        color: fade(white, 70%);
        &:hover,
        &:focus {
            color: white;
        }
    }

有人能给我一些线索吗？感谢

Answer 1

使用LESS 淡入淡出功能导致问题，因为它在SASS中不存在。减轻功能似乎是另一种选择，具体取决于您要执行的操作：以下是Sass Functions的列表。

Answer 2

我知道这个问题很老，但是让我回答一下，以帮助其他有此问题的人。您在这里需要的SASS函数是transparentize。第二个参数需要表示为0到1之间的分数，并且必须是LESS fade函数的反函数。因此，以您的示例为例...

fade(white, 30%)

将成为

transparentize(white, 0.7)

这是正确转换的SASS：

@media (min-width: 768px) 
    background-color: transparent
    border-color: transparentize(white, 0.7)
    .navbar-header .navbar-brand 
        color: transparentize(white, 0.3)
        &:hover,
        &:focus 
            color: white

从创意主题引导转换LESS到SASS

2 个答案: