如何在sass中使用rails模型屬性？

我想使用通過表單提交的字符串值（十六進制）作爲div類的背景顏色。如何在sass中使用rails模型屬性？

形式爲： <%= f.text_field :backgroundcolor %>

的HTML是： <div class="bottle"></bottle>

而CSS是：

.bottle { 
background-color: <%= color.backgroundcolor %> 
}

但我只是得到一個無效的CSS錯誤。如何在sass中使用這些屬性？我可以使用它們作爲內聯CSS，但不願意。

來源

2016-02-15 sabaeus

你打算如何在CSS中調用'<％= color'？ –

就是這樣。我有'<％@ colors.each do | color | ％>'在我看來。這是有效的，因爲它是一個erb文件。我只是不知道如何做出這樣的工作。在末尾添加「.erb」（如其他地方提到的那樣）導致我無處可去，所以我認爲我錯過了一些東西。 – sabaeus

你得到你想要的結果的唯一方法是如果你的數據（存儲在數據庫中）persisted。

CSS

如果color VAR是可以從數據庫或其他來源，你可以把它叫成CSS：

#app/assets/stylesheets/application.sass 
.bottle 
    background-color: <%= Option.find_by(title: "color").value %>

這將讓您訪問存儲在我們的虛構模型中的值...但是，它會而不是即時更新（IE表單提交）。

無論何時您將代碼推送到「生產」，Rails都會期望"precompile"的資產。

預編譯是所有資產連接成單個文件（通常爲application.css）的地方。此過程使您的資產靜態。事實上，SASS/SCSS只是preprocessors這個過程（他們在縮小之前運行）。

雖然你可以使你的資產動態生產（因爲他們在開發中），它大大減緩你的網絡應用程序（它必須編譯資產的每個呼叫）。

解決您的問題，你最好把你的自定義樣式要麼到頁面，或內嵌的<head>上的元素之一：

#app/views/layouts/application.html.erb 
<head> 
    <style> 
    .bottle { background-color: "<%= Color.find_by(name: 'bottle').value %>" } 
    </style> 
</head>

.. 。或...

<%= content_tag :div, style: "background-color: #{color.background-color}" %>

不，我不喜歡它，但如果你想要動態值，那就是必須要做的。有一些選擇，但你必須從後端一起破解它們。

來源

2016-02-15 22:59:30

我忘了提及我有一個帶有驗證屬性和模式表的顏色模型。所以我的數據仍然存在。我從來沒有想過sass文件是靜態的，但這是一個很好的觀點。謝謝你的幫助！ – sabaeus

如何在sass中使用rails模型屬性？

回答

相關問題