Javascript 你能帮我翻译一下吗在Sass代码中？_Javascript_Css_Dom_Sass

Javascript 你能帮我翻译一下吗在Sass代码中？

javascript css dom sass

Javascript 你能帮我翻译一下吗在Sass代码中？,javascript,css,dom,sass,Javascript,Css,Dom,Sass,这是应用Sass的DOM <i className={`contract-icon ic-${this.props.value}`} /> 根据我的研究如果当前元素应用了相应的类，&将与此选择器合并/联接（我猜）所以我想我们可以这样构建DOM：在这一行中，您实际上将两个类应用于i，它们是contract icon和ic-{something}（在示例中是ic-rise\u-fall）正如您所说，&用于组合类名。指：- &.ic-rise_fall {

这是应用Sass的DOM

<i className={`contract-icon ic-${this.props.value}`} />

根据我的研究

如果当前元素应用了相应的类，

将与此选择器合并/联接

（我猜）所以我想我们可以这样构建DOM：


在这一行中，您实际上将两个类应用于i
，它们是contract icon
和ic-{something}
（在示例中是ic-rise\u-fall
）
正如您所说，&
用于组合类名。指：-
&.ic-rise_fall {
    &--invert:before { # What's this?
        content: url('../images/trading_app/contracts/invert/rise_fall.svg');
    }
}

这将转换为
&.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}

.contract-icon.ic-rise_fall:before {
    content: url('../images/trading_app/contracts/rise_fall.svg');
}
.contract-icon.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}
.contract-icon .other-class {
    padding-right: 8px;
}

在css中
所以基本上，代码
.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: url('../images/trading_app/contracts/invert/rise_fall.svg');
        }
    }
    .other-class {
        padding-right: 8px;
    }
}

将转换为
&.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}

.contract-icon.ic-rise_fall:before {
    content: url('../images/trading_app/contracts/rise_fall.svg');
}
.contract-icon.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}
.contract-icon .other-class {
    padding-right: 8px;
}

像这样
这个ic-{something}
作为props
从父级传递，因此，它可以是ic-rise\u fall
或ic-rise\u fall--inverse
。因此，我们正在处理使用SASS的可能性
<span class='contract-icon ic-rise_fall'>
   <i class='other-class'></i>
</span>



将此视为应用其他类
和ic-rise\u-fall
在这一行中，您实际上将两个类应用于i
，它们是contract icon
和ic-{something}
（在示例中是ic-rise\u-fall
）
正如您所说，&
用于组合类名。指：-
&.ic-rise_fall {
    &--invert:before { # What's this?
        content: url('../images/trading_app/contracts/invert/rise_fall.svg');
    }
}

这将转换为
&.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}

.contract-icon.ic-rise_fall:before {
    content: url('../images/trading_app/contracts/rise_fall.svg');
}
.contract-icon.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}
.contract-icon .other-class {
    padding-right: 8px;
}

在css中
所以基本上，代码
.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: url('../images/trading_app/contracts/invert/rise_fall.svg');
        }
    }
    .other-class {
        padding-right: 8px;
    }
}

将转换为
&.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}

.contract-icon.ic-rise_fall:before {
    content: url('../images/trading_app/contracts/rise_fall.svg');
}
.contract-icon.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}
.contract-icon .other-class {
    padding-right: 8px;
}

像这样
这个ic-{something}
作为props
从父级传递，因此，它可以是ic-rise\u fall
或ic-rise\u fall--inverse
。因此，我们正在处理使用SASS的可能性
<span class='contract-icon ic-rise_fall'>
   <i class='other-class'></i>
</span>



将此视为应用了其他类
和ic-rise\u-fall
的情况
很容易理解它的作用。您可以说它像是附加父选择器。或者，这样想
假设您想对.container
应用多种样式，其标准css是：
.container.success
.container.success.但很愚蠢
.container.successful
.container>div.error
.container~div.dumby
.container-----\u happy-sass
在SASS中，你可以这样做
.container { /* this is 1 */
    &.success { 
        &.but-stupid { /* this is 2 */ }
        &ful { /* this is 3 */  }
    }

    & > div.error { /* this is 4 */ }

    & ~ div.stupid { /* this is 5 */ }

    &-----_happy-sass { /* this is 6 */ }
}

或者，在你上面的例子中
.contract-icon {
    &.ic-rise_fall {  /* EQUALS TO .contract-icon.ic-rise_fall */
        &:before { /* EQUALS TO .contract-icon.ic-rise_fall:before; */
            /*declarations*/
        }
        &--invert:before { /* EQUALS TO .contract-icon.ic-rise_fall--invert */
            /*declarations*/
        }
    }

    .other-class { /* EQUALS TO .contract-icon .other-class */
        /*declarations*/
    }
}


很容易理解它的作用。您可以说它像是附加父选择器。或者，这样想
假设您想对.container
应用多种样式，其标准css是：
.container.success
.container.success.但很愚蠢
.container.successful
.container>div.error
.container~div.dumby
.container-----\u happy-sass
在SASS中，你可以这样做
.container { /* this is 1 */
    &.success { 
        &.but-stupid { /* this is 2 */ }
        &ful { /* this is 3 */  }
    }

    & > div.error { /* this is 4 */ }

    & ~ div.stupid { /* this is 5 */ }

    &-----_happy-sass { /* this is 6 */ }
}

或者，在你上面的例子中
.contract-icon {
    &.ic-rise_fall {  /* EQUALS TO .contract-icon.ic-rise_fall */
        &:before { /* EQUALS TO .contract-icon.ic-rise_fall:before; */
            /*declarations*/
        }
        &--invert:before { /* EQUALS TO .contract-icon.ic-rise_fall--invert */
            /*declarations*/
        }
    }

    .other-class { /* EQUALS TO .contract-icon .other-class */
        /*declarations*/
    }
}

您可以说“&”是上父级。比如说,
这是带有和的SASS
.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: ''
    }
  }
}

   .contract-icon {
      .ic-rise_fall {
            &:before {
                content: url('../images/trading_app/contracts/rise_fall.svg');
            }
      }
    }

这是和的编译CSS。它将选择相同级别的选择器
.contract-icon.ic-rise_fall:before {
  content: url("../images/trading_app/contracts/rise_fall.svg");
}
.contract-icon.ic-rise_fall--invert:before {
  content: "";
}

这是没有和的SASS
.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: ''
    }
  }
}

   .contract-icon {
      .ic-rise_fall {
            &:before {
                content: url('../images/trading_app/contracts/rise_fall.svg');
            }
      }
    }

没有和的编译CSS。它将选择子元素
 .contract-icon .ic-rise_fall:before {
  content: url("../images/trading_app/contracts/rise_fall.svg");
}

它有助于直接连接父选择器
您可以说“&”是上父选择器。比如说,
这是带有和的SASS
.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: ''
    }
  }
}

   .contract-icon {
      .ic-rise_fall {
            &:before {
                content: url('../images/trading_app/contracts/rise_fall.svg');
            }
      }
    }

这是和的编译CSS。它将选择相同级别的选择器
.contract-icon.ic-rise_fall:before {
  content: url("../images/trading_app/contracts/rise_fall.svg");
}
.contract-icon.ic-rise_fall--invert:before {
  content: "";
}

这是没有和的SASS
.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: ''
    }
  }
}

   .contract-icon {
      .ic-rise_fall {
            &:before {
                content: url('../images/trading_app/contracts/rise_fall.svg');
            }
      }
    }

没有和的编译CSS。它将选择子元素
 .contract-icon .ic-rise_fall:before {
  content: url("../images/trading_app/contracts/rise_fall.svg");
}

它有助于直接附加父选择器
&表示两个类都应用于同一个div（元素）&表示两个类都应用于同一个div（元素）您能回答我的奖金问题吗？。合同图标
？没有。我刚刚将。合同图标
子项更改为。其他类
也刚刚编辑了我的答案。找到你的答案，自由地澄清你的疑问。那么为什么它要把和放在ic上升-下降之前呢？它的工作原理与其他课程相同。你能回答我的奖金问题吗。合同图标
？不。我刚把。合同图标
孩子改成。其他课程也编辑了我的答案。找到你的答案，自由地澄清你的疑问。那么为什么它要把和放在ic上升-下降之前呢？它的工作原理与其他类相同，但在联系人图标中的.other class
如何？@JohnBaek它等于.contract icon.other class
。请检查更新的答案。不，它等于。合同图标。其他类
感谢您的贡献@choz。很抱歉，我只能选择一个答案。你的解释很清楚，我相信这会对Stackoverflow社区有所帮助。我对你的答案投了赞成票。@JohnBaek当然，我只是希望这能有所帮助。联系人图标中的.other class
怎么样？@JohnBaek它等于.contract icon.other class
。请检查更新的答案。不，它等于。合同图标。其他类
感谢您的贡献@choz。很抱歉，我只能选择一个答案。你的解释很清楚，我相信这会对Stackoverflow社区有所帮助。我对你的答案投了赞成票。@JohnBaek当然，我只是希望这有帮助。