如何将类似的代码转换为指南针 sass 函数中的函数? [英] how to translate similar codes to a function in compass sass function?

问题描述

我想在我的 scss 文件中添加一些常见的变量，例如 margin-bottom:10px 的 mgb10；pdl20 为 padding-left:20px;
我的方法很愚蠢.如何使用 sass 函数改进我的代码.

I want to add some common vars in my scss file, such as mgb10 for margin-bottom:10px; pdl20 for padding-left:20px;
my method is very stupid. how to improve my code using a sass function.

推荐答案

bookcasey 很好地回答了 OP 的问题，但我不相信有人问了正确的问题.这是您使用示例代码绘制的场景中 @extend 的问题，以及为什么它可能不是正确的选择.

bookcasey gave a great answer to the OP's question, but I'm not convinced the right question was asked. Here's the problem with @extend in the scenario you've drawn out with your example code and why it probably isn't the right choice.

让我们从这里的这些小家伙开始，它们看起来像我们可能经常使用的那些:

Let's start with these little guys here, they look like ones we are likely to use pretty often:

%mgt10 { margin-top: 10px }
%mgb10 { margin-bottom: 10px }
%mgl10 { margin-left: 10px }
%mgr10 { margin-right: 10px }

我们开始编码并最终大量使用它们:

We start coding along and end up using them a lot:

.body { @extend %mgt10; @extend %mgb10; @extend %mgr10; @extend %mgl10; font: 12px/1.4 sans-serif }

.error { @extend %mgt10; color: red; padding: 10px; }

.cool-button { @extend %mgt10; border: 1px solid }

hr.awesome { @extend %mgt10; color: blue }

这是我们的短 Sass 文件将生成的内容(316 字节):

This is what our short Sass file will generate (316 bytes):

.body, .error, .cool-button, hr.awesome {
  margin-top: 10px; }

.body {
  margin-bottom: 10px; }

.body {
  margin-left: 10px; }

.body {
  margin-right: 10px; }

.body {
  font: 12px/1.4 sans-serif; }

.error {
  color: red;
  padding: 10px; }

.cool-button {
  border: 1px solid; }

hr.awesome {
  color: blue; }

您实际上不会那样编写 CSS，对吗?@extend 在这种情况下对您不利，因为它生成的选择器比您实际需要的要多得多(并且，您扩展任何给定类的选择器越多，其中的行数越少，情况只会变得更糟所说的类被扩展——想象有 30 个选择器扩展 %mgt10，50 个怎么样?).你把 DRY 发挥到了极致，结果，你放弃了 Sass 方面的可读性和 CSS 方面的简洁性.

You wouldn't actually write your CSS that way, would you? @extend is working against you in this case because it is generating far more selectors than you actually need (and it only gets worse the more selectors you have extending any given class and the fewer the number of lines in said class being extended -- imagine 30 selectors extending %mgt10, how about 50?). You've taken DRY to the extreme and as a result, you've given up readability on the Sass side and conciseness on the CSS side.

让我们尝试另一条路线:

Let's try another route:

$default-gutter-size: 5px;

@function gutter($width, $size: $default-gutter-size) {
    @return $width * $size;
}

.body { margin: gutter(2); font: 12px/1.4 sans-serif }

.error { margin-top: gutter(2); color: red; padding: gutter(2); }

.cool-button { margin-top: gutter(2); border: 1px solid }

hr.awesome { margin-top: gutter(2); color: blue }

我们得到了基本相同的 CSS，但没有所有额外的选择器，我们仍然可以使用速记(作为额外的好处，如果我们真的想要，我们可以在不是边距的东西上使用我们的函数)(228 字节):

We get essentially the same CSS, but without all of the extra selectors and we still have the ability to use shorthand (as an added bonus, we can use our function on things that aren't margins if we really want) (228 bytes):

.body {
  margin: 10px;
  font: 12px/1.4 sans-serif; }

.error {
  margin-top: 10px;
  color: red;
  padding: 10px; }

.cool-button {
  margin-top: 10px;
  border: 1px solid; }

hr.awesome {
  margin-top: 10px;
  color: blue; }

不要误会我的意思，@extend 很棒，但它最适合用于扩展具有相当数量属性的类，而不仅仅是 1 或 2.使用 CSS 预处理器的一部分是知道何时使用哪个功能才能获得最佳效果.

Don't get me wrong, @extend is great, but it is best used for extending classes with a fair number of attributes, not just 1 or 2. Part of using a CSS Preprocessor is knowing when to use which feature to get the best result.

这篇关于如何将类似的代码转换为指南针 sass 函数中的函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！