Question

如何将自定义 Sass 函数的返回值传递给 Susy 函数？或者有更好的方法吗？

这很好用：

.foo{ 
    max-width: get_breakpoint('large');
}

但那不是：

.foo{
    @include layout(get_breakpoint('large') 12);
}

Susy只是回到默认容器宽度而不是使用我的get_breakpoint（）函数中的那个。

内置使用指南针，我的config.rb中有以下功能：

module Sass::Script::Functions
    #
    # get breakpoint values from prefs file (json)
    #
    def get_breakpoint(bp)
        if PROJ_PREFS['breakpoint'].include?(bp.value)
            retVal = PROJ_PREFS['breakpoint'][bp.value][0].to_s+'px'
        else
            retVal = bp.to_s
        end
        Sass::Script::String.new(retVal)
    end
end

软件版本：sass（3.4.21），指南针（1.0.3），susy（2.2.12）。

非常感谢。

Answer 1

事实证明，只要传递正确的值，将自定义函数用作Susy mixin参数就不成问题。我正在传递一个字符串而不是Sass号。

万一有人遇到类似的问题，下面有一个工作解决方案的例子，从Json检索断点值到Sass（假设你已经安装了json gem）。

请注意，从性能的角度来看，此解决方案并不完美，因为每次导入_base.scss partial时都会重新创建$ BREAKPOINT映射。（它也省略了我的自定义断点mixin，因为这里不相关，并且也使用断点函数）

我的断点定义存储为＆＃39; unitless＆＃39; json中的数字

{
    "breakpoint" : {
        "mini"          : [  481    ,   "phablet portrait phone landscape"],
        "xsmall"        : [  736    ,   "phablet landscape (iPhone6plus) tablet portrait"],
...

Ruby 代码（在Compass config.rb中）

require 'json'

file = File.read(File.dirname(__FILE__)+'/preferences.json')
PROJ_PREFS = JSON.parse(file)

module Sass::Script::Functions
  def get_breakpoints()
    retMap = Hash.new
    PROJ_PREFS['breakpoint'].each do |bp_name, bp_value|
       retMap[Sass::Script::Value::String.new(bp_name.to_s)] = Sass::Script::Value::Number.new(bp_value[0],'px')
    end
    Sass::Script::Value::Map.new(retMap)
  end
end

Sass 代码（例如_base.scss）

// create Sass map with custom function

$BREAKPOINT:get_breakpoints();


// allow Sass numbers (such as 12em, 355px) or breakpoint names (such as small, large) to be passed through
// it was just easier for me to code it in Sass (since I don't know Ruby at all) 

@function breakpoint($key) {
    @if not map-has-key($BREAKPOINT, $key) { @return $key; }
    @return map-get($BREAKPOINT, $key);
}

用法示例（涉及Susy）

.foo{
    @include container(breakpoint(large));
}

来自sass自定义函数

1 个答案: