Is there a way to include an instance variable as a CSS rule in Rails?

Assume I have the following ActiveRecord class:

.........
  store :skin_properties, accessors: [
    :background_color,
    :font_size,
    :font_family,
    :color
  ]
.........

This class saves values in the format shown below:

{"background_color"=>"#f2f2f2", "font_size"=>"20px", "font_family"=>"Verdana", "color"=>"#000000"}

How can I insert these values into an edit.haml file as inline CSS?

I attempted the following approach, however it did not work properly...

:sass
  body
    <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="be93fecbcddbcc90cdd5d7d0">[email protected]</a>_properties.each_with_index do |(k,v)|
      "#{k.gsub("_","-")}:#{v};"
cssruby-on-railsruby

Answer №1

One potential solution is to transform the hash into a style attribute for a specific tag.

For instance, modify 

{"background_color"=>"#f2f2f2"}

to 

style: {'background-color: #f2f2f2'}

Answer №2

When working with Ruby code, consider running it silently (using - instead of =).

For a more efficient approach, you can utilize the dasherize method in scenarios like this:

:sass
    body
       = @user.skin_properties.map{|k,v| "#{k.dasherize}: #{v};" }.join

Answer №3

In my opinion, the best approach would be to handle it in this manner. Since I am not familiar with haml, you may have to undertake the conversion yourself:

:less
  body
    <% @user.skin_properties.each_with_index do |(key,value)| %>
      <%= "#{key.gsub("_","-")}:#{value};" %>
    <% end %>

Answer №4

:scss
    html
       <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1234567890abcdef">[email protected]</a>_values.each{|key,value| "#{key.gsub("_","-")}:#{value};" }.join

Answer №5

I want to express my gratitude to all of you for your input, here is the solution I devised:

- css = @user.skin_properties.map {|key,value| "#{key.dasherize}: #{value};" }.join("\n")
%style== body { #{css} }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is your animation glitching due to axis restrictions?

I decided to create my own version of the Google Maps icon using Photoshop, and now I want to replace the current image with my duplicate when the link that wraps around both is hovered over. To achieve this, I used the position: absolute property to layer ...

jqueryhtmlcssjquery-animate

JavaScript - Placing Image Caption and Details within a Box

<div id="CollectionALL"> <div id="collection1" class="col"> <img id="Img1" class="imageCS"/> <H1 id="Title1"></H1> ...

javascripthtmlcss

What could be causing the background rainbow animation to malfunction?

.colorful { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); animation: change 10s ease-in-out infinite; } @keyframes change-color { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 10 ...

css

Box size adjusts to fit its content, including any form fields

Looking to create a box that adjusts its size based on content and center it without resorting to using tables for layout or setting fixed sizes. How can this be achieved while keeping the markup clean? I've almost got it, but the form fields are not ...

csscss-grid

Opera browser encountering issue with styled image overlay in select list

We have implemented images in CSS to customize our select fields and they appear correctly in most browsers, except for Opera where the images are not displaying. To better illustrate the issue, I have set up a JSfiddle. Please try it out in Opera to expe ...

htmlcssimageformsselect

What could be the reason for the fluctuating HTML output?

Exploring the world of CSS and HTML, I noticed a curious change in the output when text is added inside a div tag. First: div.bar { display: inline-block; width: 20px; height: 75px; /* We'll override height later */ background-co ...

htmlcss

Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Looking to create a clickable link for the .wrapper div that directs users to the location of a.icon. Want the .wrapper div to activate the a.icon:hover state when hovered over, not just when hovering over the icon itself. Any assistance would be highly a ...

javascriptjquerycss

What is the best way to vertically align text that is positioned absolutely in the center?

I'm looking to implement a hover hide effect. Check out my inspiration on CodePen * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #123456; } #object { background-color: cornsilk; border: #333 3px solid; ...

htmlcss

A margin is set on a div element that occupies 100% width and 100% height, nestled within another div element also occupying 100% width and

As I work on constructing a website with a video background, my goal is to ensure that all divs are centered and responsive by setting the width and height to 100%. Additionally, I have implemented an overlaying div that fades in and out upon clicking usin ...

htmlcssmargincentering

Although sanitize and raw display HTML tags, Slim remains unaffected

I have a dataset with HTML content that I want to display without any tags. Currently, I am working with Ruby on Rails (RoR) and Slim templates. I've experimented with sanitize, raw, and html_safe, but none of them fully removed all the HTML tags. ...

htmlruby-on-railsslim-lang

Is there a way to implement hover behavior for a Material-UI Button within a ButtonGroup component?

When using MUI v5, I am encountering an issue where the first button in the code provided is only half working. The button is initially colored red (both the border and text), however, upon hovering over it, the color of the border changes to blue. This is ...

cssreactjstypescriptmaterial-uiemotion

Quick way to include id="" and class="" attributes to HTML elements using Sublime Text 2

Is there a way to configure Sublime Text 2 where inputting a . (dot) automatically generates class=" " and adding a # (hash) creates id=" " while typing an HTML opening tag? ...

htmlcsssublimetext2shortcut

Struggling to align the push menu properly within the Bootstrap framework

I am currently utilizing Bootstrap as my UI framework and attempting to create a push menu on the left side of the page. While I have made progress towards achieving this goal, there are some bugs in the system that I am encountering. Specifically, I am ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using Webflow code in ReactJS/NextJS: Best practices and implementation tips

After exporting my Webflow code to my NextJS app, I noticed that many of the HTML tags are being flagged as errors because they appear to be missing closing tags. Can anyone shed some light on why this is happening and suggest potential solutions? It&apos ...

htmlcssreactjsnext.jswebflow

"Customize Your CSS Dropdown Menu with Dynamic Background Color for div Elements

I recently put together a website dedicated to watches. Feel free to check it out at horology dot info. (Please refrain from sharing the direct URL of my site in your reply.) I'm curious as to why the dropdown menu, sourced from , is showing up unde ...

htmlcss

How can one element be made to rely on the presence of another element?

I'm currently working on my portfolio website and encountering an issue. Whenever I hover over an image of a project, the image expands in size, becomes less transparent, and a description of the project pops up. However, I would like to include a lin ...

javascripthtmlcss

Tips on utilizing multiple dynamically generated toggle switches efficiently

As a Frontend beginner, I am working on implementing toggle switches using HTML, CSS, and Vanilla JavaScript. Approach: I am generating an HTML table with multiple rows based on the data from my Django database. Each row contains details like name, id, a ...

javascripthtmlcssdjangotoggleswitch

Concealing Vimeo's controls and substituting them with a play/pause toggle button

I'm currently working on implementing the techniques demonstrated in this tutorial (), but unfortunately the code in the fiddle I put together doesn't appear to be functioning correctly. I'm at a loss as to what might be causing this issue. ...

javascriptjquerycss

Positioning of CSS elements: Distributing and arranging 4 divs evenly within a single parent div

Is there a more efficient method? div { border: 2px solid black; } #main { width: 107px; height: 107px; padding: 0; text-align: center; font-size: 10px; } #tl, #tr, #bl, #br { position: relative; width: 45px; height: 45px; } #tl { t ...

htmlcssuser-interfacepositioning

Create CSS styles that are responsive to different screen sizes and

What is the best approach to ensure that these styles are responsive on any mobile device? nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #0066cc; background: linear-gradient(top, #0066cc 0%, #bbbbbb 10 ...

htmlcssmobileresponsive-design