Question

我的最终产品是这样一种情况，即我可以对链接和悬停具有不同级别的淡入淡出效果。所以在这种情况下，我为主题背景选择的颜色并不重要，链接和悬停将改变以匹配。这也将允许使用淡入淡出变量来设置任何其他元素的样式。

我设置了一个CodePen来演示这个http://codepen.io/SiscoKid/pen/dMzXzJ。

我想清理它并将其扩展为包含Internet Explorer功能。

phrase_to_look_for = raw_input("What phrase would you like to look for?")
name_of_file = raw_input("What is the name of your file?") #File must be in the same folder
file_to_search = open(name_of_file,'r')
contents_of_file = file_to_search.read()
if phrase_to_look_for in contents_of_file:
    print("The word is in the file.")
else:
    print("The phrase is not in the file.")

我希望能够做到这样的事情：

// Fade
$fade-base: #fff;
$fade0: rgba($fade-base, 0);
$fade1: rgba($fade-base, 0.1);
$fade2: rgba($fade-base, 0.2);
$fade3: rgba($fade-base, 0.3);
$fade4: rgba($fade-base, 0.4);
$fade5: rgba($fade-base, 0.5);
$fade6: rgba($fade-base, 0.6);
$fade7: rgba($fade-base, 0.7);
$fade8: rgba($fade-base, 0.8);
$fade9: rgba($fade-base, 0.9);
$fade10: rgba($fade-base, 1);
//
// Color
$test-color: #f00;
$theme-base: #483; // CHANGE ME
$title-color: $fade5;
//
// Links
@mixin links() {
  a {
    color: $fade3;
    &:hover {
      color: $fade1;
    }
  }
}
//
// Body
@mixin main() {
  @include links;
  background-color: $theme-base;
}

.main {
    @include main();
}

而不是：

color: $fade(0.3);

那么实现这种扩展功能的最佳方法是什么？

我做了一些研究，发现我们无法动态分配这些变量。

dynamic variables #1450

Answer 1

我并不完全确定您在此尝试实现的最终产品究竟是什么，但它确实感觉它创造了不必要的CSS代码。

出了什么问题

clicked

我不确定为什么需要通过将其包装在方法中来添加一层复杂性？

Answer 2

我能够为我开发一个功能。我还扩展了这个想法，包括背景颜色渐变可访问性。

//
// Fade
@function fades($percentage) {
  @return lighten(255, (1-$percentage)*5%);
}

@mixin fade($type, $percentage) {
  @if $type==cl {
    color: rgba(#fff, $percentage);
  }
  @if $type==bg {
    background-color: rgba(#fff, $percentage);
  }
}
//
// Title
.title {
  @include fade(cl, .5);
}

我仍然不确定为IE扩展这个，以及动态创建渐变类型类。但是，我认为这些可能是其他问题的主题。

以下是工作CodePen的链接。 Fade SCSS Function and Mixin

再次感谢petehotchkiss对此主题的反馈。

有没有办法在这个SCSS淡入淡出方案中动态分配变量？

2 个答案: