using css to pass arguments

I need help with a code that I have, here's the structure:

<div className="site-col-1">
   content 1
</div>
<div className="site-col-2">
  content 2
</div>

Here is how the corresponding CSS file looks...

.site-col-1 {
    grid-column: span 1;
}

.site-col-2 {
    grid-column: span 2;
}

.site-col-3 {
   grid-column: span 3;
}

Is there a way I can simplify this by passing the number as an argument from the div rather than creating individual CSS classes for each? Something like this:

.site-col-ARG {
  grid-column: span ARG
}

Answer №1

To accomplish the same result, you can utilize styled components in combination with React JS.

const StyledDiv = styled.div`
  /* Adjust the grid-column value based on the provided props */
  grid-column: ${props => props.value};
`;

// Within your .jsx file
render(
  <div>
    <StyledDiv value="1">
      content 1
    </StyledDiv>
    <StyledDiv value="2">
      content 2
    </StyledDiv>
  </div>
);

Answer №2

It is partially true that in an HTML file where code is written, you can make use of JS_Template libraries like Handlebars, Mustache, etc. to achieve this.

In React as well, it is possible but only in the file where templates are added with the help of JavaScript (or JSX in case of React).

CSS:

If you are attempting to do the same in a plain CSS file, the answer is a definite NO. It is not achievable in CSS.

SASS:

However, if you are using a CSS preprocessor like SASS, you could utilize loops. You can write something similar to the following example:

@for $i from 1 through 5 {
.site-col-#{$i} {
  grid-column: span #{$i}
}
}

For conversion, refer to: (select to convert SCSS and NOT SASS).

https://i.sstatic.net/UBBEA.png

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

What is the best way to set the background opacity to 0.7 without impacting the content within it?

Currently, I'm facing an issue with two divs - the outer one is identified as "BD" and the inner one as "content". Whenever I attempt to reduce the opacity of BD's background-color, the content inside also becomes less opaque including both image ...

React code displaying misalignment between label and input

Can you help me align my URL and https:// on the same margin? https://i.sstatic.net/hxkkC.png <div className="card"> <div className="card-body"> <div className="form-group col-12"> <label cla ...

XSLT: Tips for preventing the use of self-closing tags within HTML attributes

I am new to XSLT and I'm currently troubleshooting an issue with some XSLT code (version 2.0) that was written a few years ago. Here is a snippet of the XSLT code: <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" ...

The versatility of Node.js' hbs module as an engine

Recently diving into the world of node js, I stumbled upon the hbs module. In this code snippet below: app.set('view engine', 'html'); app.engine('html', require('hbs').__express); I'm curious to know more abo ...

Code snippet in webpage body

Hey there, I could really use some assistance: I currently have the following: A) Login.html B) Documentation.html C) Base.html Within the login page, there is a form with fields for User and Password. In Documentation, there are links to various folder ...

Media publications do not conform to the current trends

I'm currently utilizing the HTML-to-paper plugin to print my content on a printer. However, I've encountered an issue where it doesn't seem to apply any of the styles I've defined within @media print. The challenges I'm encounteri ...

PHP is having trouble updating the database when multiple radio buttons are selected. It appears that only the most recent radio button selected will be updated in the database

In my form, there are 2 numbers and 4 radio buttons for each. Only one option can be selected per number. When the form is submitted, only the database for question 2 will be updated. However, if question 2 is left blank, then question 1's database w ...

The right column in a relatively positioned layout descends as an element in the left column is revealed

Currently in the process of constructing a registration form for our website, everything is going smoothly with one minor hiccup. The form consists of two columns where users enter their information. Initially, when designing elements for the first (left) ...

Issue: Exceeding rendering limit. React has a restriction on the number of renders to avoid endless loops

I'm in the process of creating a basic to do list using React, and I've encountered an issue with the handleSubmit() function that I can't seem to resolve. import React, { useState } from "react"; function TaskList() { const [ta ...

Enhancing the appearance of a Textfield with PHP and HTML styling

How can I adjust the width and center text in a textfield within a container? <input type=text style=width:90%text-align:center value=" . $rows[mysql_field_name($sql_result, 3)] . "> Setting the width in the style attribute works when isolated like ...

Issues with Image Placement in Internet Explorer

My cat image on my website appears significantly lower than all the other images when viewed on Internet Explorer (v11). While it looks perfect in Chrome, I cannot figure out why this discrepancy exists. For the development of this website, I utilized pred ...

Disappearance of logo div causes video to vanish

Hey there fellow coders! I'm facing a little issue. I'm attempting to replicate my webpage on another page, but every time I try to remove the logo, the video disappears as well. It's quite puzzling. I have the code in place, but it seems l ...

The Font Awesome icon is not displaying on top of the Materialize CSS progress/determinate bar

I am struggling to display a Font Awesome icon on top of a Materialize CSS progress/determinate div. Unfortunately, the icon is not fully visible and part of it gets clipped or hidden. Despite trying various solutions, I have not been successful. .progres ...

Tips for shrinking the circumference of a circle

Currently, I have a circular div that has been styled using CSS animations. My goal is to keep the size of the circle consistent when it moves to the bottom, but reduce its size when it bounces back to the top. I am uncertain if this can be achieved solely ...

What is the best way to receive a user's input date in Dynamics 365 using HTML/JavaScript?

My HTML webform is set up to capture user input like address, card number, city, and state in text format. However, within Microsoft Dynamics 365, I have a custom entity with fields for this information. When a user completes the webform and submits it, a ...

Text field auto-saving within an iFrame using localStorage is not functioning as expected

My goal is to create a rich text editor with an autosave feature using an iframe. Although each code part works individually, I am struggling to combine them effectively. View LIVEDEMO This graphic illustrates what I aim to accomplish: The editable iFram ...

Distance between cursor and the conclusion of the text (autofocus)

I discovered a method to automatically position the cursor at the end of a string using autofocus: <input name="adtitle" type="text" id="adtitle" value="Some value" autofocus="" onfocus="this.setSelectionRange(this.value.length,this.value.length);"> ...

Retrieving information from a JSON file and dynamically displaying it on an HTML page using JavaScript

I've been working on pulling data from a JSON file to display on my website. Following this helpful guide at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but unfortunately, I'm facing an issue where nothing is showing ...

Adjusting ThreeJS Canvas to Utilize Entire Space

Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...

Access information from Cloudant using React

I'm a beginner in the world of node.js and I have a project where I need to visualize data stored in cloudant. After successfully fetching the data from cloudant using node.js, I am struggling to figure out how to send this data to react for visualiza ...