css - 使用 Less 中的 protected 命名空间将 Mixin 转换为 Sass

标签 css sass less mixins less-mixins

如何将以下用 LESS 编写的 mixin 转换为 SASS?

.box_gradient (@from, @to) when (iscolor(@from)) and (iscolor(@to)) {
  background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, @from, @to); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, @from, @to); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, @from, @to); /* IE10 */
  background-image:      -o-linear-gradient(top, @from, @to); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom, @from, @to);
}

最佳答案

这是在 SASS 中使用条件完成的:

.box_gradient (@from, @to) {
  @if (iscolor(@from) and iscolor(@to)) {
    background-image: -webkit-gradient(linear, left top, left bottom, from(@from),   to(@to)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, @from, @to); /* Chrome 10+,   Saf5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, @from, @to); /* FF3.6 */
    background-image:     -ms-linear-gradient(top, @from, @to); /* IE10 */
    background-image:      -o-linear-gradient(top, @from, @to); /* Opera 11.10+ */
    background-image:         linear-gradient(to bottom, @from, @to);
  }
}

关于css - 使用 Less 中的 protected 命名空间将 Mixin 转换为 Sass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33327743/

相关文章:

html - 网站中的高度问题

html - 如何更改所选选项中的字体颜色?

angular - 当子组件在不同的父组件中时,它的样式不同

css - 如何在没有 npm 的情况下生成 LESS source maps

node.js - Node 全局模块和 require() 中的包含有区别吗?

html - 如何在 HTML 或 CSS 中的背景 jpg 上创建透明链接?

css - 悬停时向多个元素添加样式 - scss

twitter-bootstrap - 您如何在 Bootstrap 4.5 中使用 $spacer 变量?

CSS兄弟悬停状态相互影响

html - 两列响应式网站问题