Pytanie Czy w Sassie i CoffeeScript można włączyć skróty Ruby, dzięki czemu można udostępniać dane?


Zastanawiam się, czy mieszanie ruby ​​może być dzielone między Sass i CoffeeScript przy minimalnym zamieszaniu.

Szukałem odpowiedzi na to pytanie, ale nie znalazłem nic rozstrzygającego. Źródła, takie jak dokumentacja dla Sass, porozmawiaj o tym, jak łączyć pliki tego samego typu i jak manipulować strukturami danych w języku, ale nie dotykaj tego, czy dane mogą być importowane z innego miejsca, czy też w jakiś sposób można interpretować kod ruby ​​- jedyną można myśleć o kompasie przy użyciu pliku .rb dla jego konfiguracji.

Mój instynkt podpowiada, że ​​jest (lub powinien) być możliwy, oba języki są podobne do Rubiego i potrafią interpretować skróty.

Ponieważ jest to problem praktyczny, z którym miałem do czynienia kilka razy (wyodrębnianie wstępnie przetworzonego kodu front-end, ale także zapewnienie takich samych wartości dla przetwarzania zaplecza, na przykład generowanie SVG w szablonie HTML), ale nigdy nie rozwiązany w rzeczywistości w czysty sposób zaakceptowałbym rozwiązanie, które wymagałoby użycia Railsów.

Proszę zauważyć, że jestem dość konkretny odnośnie tego, co dotyczy etap wstępnej kompilacji przedsprzedażnej produkcji aktywów, mianowicie Sass i CoffeeScript. Odpowiedzi, które wymagają CSS, JavaScript lub wymagają przeglądarki, nie są tym, czego szukam.

Dodatkowe bity

Postanowiłem dodać przykład, oto trzy definicje tych samych danych, co pary wartości klucza:

Rubin

colours = { brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' }
colours[:brandBackground]

Sass Map

$colours: ( brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' )
map-get($colours, brandBackground)

CoffeeScript

colours = { brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' }
colours.brandBackground

Definicje skrótów Coffeescript i Ruby są identyczne, Sass jest bardzo blisko ... jeśli to może działać, to kolory (lub dowolne inne zmienne) mogą być zdefiniowane w jednym miejscu, a następnie użyte w całym przednim i tylnym końcu dowolnym kodem.


11
2018-06-16 11:52


pochodzenie


Nie wiem, czego dokładnie chcesz, ale pliki kończące się na .erb są szablonami erb. - Dave Newton
dodałem kilka źródeł, które obejmują rzeczy, o których wiem, że są możliwe, ale nie o to, czy można włączyć ruby ​​- wyobrażam sobie, że wtyczka może to zrobić, ale nie znalazłem tego - Toni Leigh
@DaveNewton - Chcę udostępnić wstępną kompilację ruby ​​między kawowym skryptem i sass, dwa języki z podobną do ruby ​​składnią - Toni Leigh
Ani magicznie nie zrozumiem Ruby. Jeśli chcesz Ruby, zmień szablony. - Dave Newton
@DaveNewton - brzmi obiecująco, jak można to zrobić - tak, rozumiem, że nie będą interpretować w sposób magiczny, stąd moja akceptacja, że ​​może istnieć jakiś etap pośredni, jednak w tym - Toni Leigh


Odpowiedzi:


Możesz przekształcić swój CoffeeScript i SASS w szablony ERB, które zostaną wstępnie przetworzone (i dzięki temu można w nich wykorzystać wszystkie niesamowite możliwości Ruby). Istnieje mały post opisujący to: https://robots.thoughtbot.com/dont-repeat-your-ruby-constants-in-javascript.

Aktualizacja

Dodaj ten kod do lib/shared_assets_data.rb:

module SharedAssetsData
  def self.colors_hash
    { brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' }
  end

  def self.sassify(hash)
    hash.map do |key, value|
      "#{key}: '#{value}'"
    end.join(', ').prepend('( ').concat(' )')
  end

  def self.coffefy(hash)
    hash.map do |key, value|
      "#{key}: '#{value}'"
    end.join(', ').prepend('{ ').concat(' }')
  end
end

Następnie włącz automatyczne ładowanie lib katalog dodaj ten wiersz do config/application.rb:

config.autoload_paths += %W(#{Rails.root}/lib)

Następnie możesz wykonać następujące czynności:

# screen.sass.erb
$colours: <%= SharedAssetsData.sassify(SharedAssetsData.colors_hash) %>
body
  background: map-get($colours, brandBackground)

# screen.coffee.erb
colours = <%= SharedAssetsData.coffefy(SharedAssetsData.colors_hash) %>
console.log colours.brandBackground

10
2018-06-21 20:52



Byłoby miło zobaczyć przykład w odpowiedzi, zwłaszcza jeśli chodzi o nagrodę, a ponieważ link-rot - Toni Leigh
Jasne, zaktualizowana odpowiedź, mam nadzieję, że pomoże. - hedgesky
Wierzę, że scenariusz kawowy mógłby używać oryginalnego skrótu, są one identyczne, bez potrzeby parzenia kawy? - Toni Leigh
Próbowałem tego, ale Ruby drukuje hashe w notacji w stylu Ruby 1.8.7: {: a => 1} - hedgesky
tak, mieszanie Ruby w moim przykładzie jest nowszą składnią - Toni Leigh


Myślę, że najlepiej jest użyć gon. Gon to klejnot, który pozwala przekazywać zmienne ruby ​​do javascript / coffeescript. Stamtąd można wstawić styl, który korzysta z mieszania ruby.

Sass / CSS to tak naprawdę tylko style i chociaż Sass może mieć zmienne i matematykę, nie powinieneś używać go jako magazynu dla bardziej złożonych struktur danych, co bardzo utrudni utrzymanie kodu. Przechowywanie danych i transport nie są zadaniem Sass.

Tak, jak w przypadku gon. Spróbuj czegoś takiego w kontrolerze:

gon.ruby_hash = {key: value}

teraz w ciebie coffeescript:

gon.ruby_hash

Będziesz mógł uzyskać dostęp do skrótu, dzwoniąc do gon.ruby_variable_name.


-1
2018-06-16 13:26



Nie zamierzam przechowywać danych w sassie, ale używać danych przechowywanych w innym miejscu, aby zachować te dane w miejscu, w którym jest on ponownie wykorzystywany przez inne wstępnie skompilowane zasoby - Toni Leigh
W takim przypadku musisz zdefiniować zmienną w Sassie i uzyskać do niej dostęp z twojego coffeescriptu. W celu wyjaśnienia: Gdzie są przechowywane dane? Po co to jest? Czy to się kiedykolwiek zmienia? - Chase Gilliam
dane byłyby przechowywane z wstępnie skompilowanymi plikami (choć przypuszczam, że może to być gdziekolwiek); przechowuje wartości, które mogą być współdzielone między skompilowanymi zasobami front-end, takimi jak punkty przerwania; tak, może się zmienić, częścią tego jest to, że łatwiej jest zmieniać wspólne wartości w solidny sposób; - Toni Leigh
także, oczekiwałbym, że to będzie niezależne od jakiejkolwiek struktury Ruby MVC, więc nie byłoby kontrolerów przechowujących cokolwiek - Toni Leigh
W takim przypadku napisz skrypt uruchamiany przed kompilacją, który wygeneruje plik variables.scss. Wymagaj tego pliku w pliku application.scss. Możesz użyć map sass sass-lang.com/documentation/file.SASS_REFERENCE.html#maps, ale muszę podkreślić, że to nie jest to, do czego służy sass. Powinieneś rozważyć inne opcje, takie jak YAML, lub jakąś inną metodę zwykłego ruby ​​przesyłu danych do twojej kawy / sassy / front-endu. - Chase Gilliam