Question

我现在正在尝试学习SASS，而且我在设法想象我将如何安排我的代码时遇到了困难。例如，我如何将以下代码安排到SASS中以避免重复？

a: link {color: #000; text-decoration: none;} a: visited {color: #000; text-decoration: none;} a: acive {color: #000; text-decoration: none;}

目前我能想到的唯一方法是使用以下适当的属性添加两个不同的变量，但这对我来说仍然是重复的。我也考虑过mixins，但我不确定如何将它们合并到这个例子中。

提前感谢您的帮助。另外，据我所知，SASS并不是为了提高网络性能，只是提升工作流程。它是否正确？我之所以这么说是因为，在处理时，代码最终在CSS上看起来一样。

Answer 1

重复的部分是a和样式color: #000; text-decoration: none。

因此，使用SASS，您可以嵌套样式，因此您只需要编写a一次。 :link等语法为&:link。

因此，你可以写：

a {
  &:link,
  &:visited,
  &:active {
    color: #000;
    text-decoration: none;
  }
}

或者如果你有变量，例如$black: #000;您可以将它们换成。color: $black。

不仅仅是工作流程。使用SASS（或LESS）的一个主要优点是您可以单独组织SASS文件，例如_buttons.scss，_layout.scss等，然后将它们全部导入（使用@import）到'theme.scss'中，然后让SASS编译'theme.scss'。

如何完成此编辑取决于您的设置，但Compass（像我这样的UI爱好者的Compass.app）是一个非常受欢迎的选项。你最终得到的是浏览器只为样式请求1个文件，而不是很多。

Answer 2

@mixin links($color:#000,$tdec:none){
     a{
          &:link,&:visited,&:active{
               color:#{$color};
               text-decoration: #{$tdec};
          }
     }
}

然后使用mixin;

@include links();

或

@include links(#fee,underline);

可能这就是你要找的东西。

呀。 SASS并不意味着提高网络性能。但是我确定如果你以错误的方式使用它（不必要的嵌套等），SASS会弄乱你的CSS。当你习惯它时，它会节省你的编码时间。

在SASS重新订购我的代码？

2 个答案: