using css to pass arguments

Question

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
}

html css reactjs sass

Answer 1

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

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 3

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).

Answer 4

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).

using css to pass arguments

Answer №1

Answer №2

Similar questions

Is there a way to align these side by side?

Using Selenium's findElement method along with By.cssSelector to locate elements with multiple classes

Limiting Ant Design Date range Picker to display just a single month

Using HowlerJS with React

Avoid displaying "undefined" on HTML page when Firebase database value is empty

The getInitialProps function is never triggered

"I can't figure out why my footer keeps showing up at the top of the page unexpectedly

Customizing the footer on various pages using Footer.php

Adding and adjusting the size of different DIV elements within a shared area

Tips for quietly printing a PDF document in reactjs?

"Enjoy a unique browsing experience with a two-panel layout featuring a fixed right panel that appears after scrolling

Embed my React component within a personalized hook

Issue with the left margin of the background image

Using Typescript with React functional components: the proper way to invoke a child method from a parent function

What steps should I take to resolve the NextRouter "not mounted" error when deploying my Next JS 13 app on Vercel

tool for showcasing data on a webpage with a specific layout

Utilizing Shopify API to seamlessly add items to cart without any redirection for a smoother shopping experience

Is there a way to verify the presence of multiple array indices in React with TypeScript?

detect mouse click coordinates within an iframe that spans multiple domains

Node timers exhibiting unexpected behavior contrary to documented specifications