susy аргумент от sass custom function

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 

версии программного обеспечения: дерзость (3.4.21), компас (1.0.3), SUSY (2.2.12) ,

Большое спасибо.

Answer 1

Оказалось, что проблема не должна заключаться в использовании пользовательской функции в качестве аргумента Susy mixin, если она передает правильное значение. Я пропустил строку вместо номера Сасса.

---

Только в случае, если кто наткнуться подобной проблемой, ниже приведен пример рабочего раствора извлечения значений из точек останова Json в Sass (Предполагая, что у вас есть JSon камень установлен).

Обратите внимание, что это решение не является идеальным с точки зрения производительности, поскольку оно воссоздает карту $ BREAKPOINT каждый раз, когда частично импортируется часть _base.scss. (Это также опускает свои собственные точки останова подмешать не Уместно и который использует точки останова функции, а)

Моих определения точки останова, сохраняется в виде чисел «безразмерных» в формате JSON

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

Рубин код (в Компас 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); 
} 

Пример использования (включая Сюзи)

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