What are some strategies to prevent redundancy in CSS when only altering a single element?

Is there a way to avoid repeating the elements in my code and only change the "rotate" value that interests me?

I heard about using "Counter-increment" online but I'm not sure how to implement it in my code.

I am using vuejs to prevent repeating 30 divs.

        <div class="wrapper">
            <div class="circle-container">
                <div class="circle" v-for="i in 30"></div>
            </div>
        </div>




.wrapper {
        display: flex;
        width: 100%;
        height: 500px;
        margin: 30px auto;
    }

    .circle-container {
        margin: 60px;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        opacity: 0.7;
    }

    .circle:nth-child(1) {
        -webkit-transform: rotate(0deg) translateX(500%);
        -moz-transform: rotate(0deg) translateX(500%);
        -ms-transform: rotate(0deg) translateX(500%);
        -o-transform: rotate(0deg) translateX(500%);
        transform: rotate(0deg) translateX(500%);
        background: #42A5F5;
    }

    .circle:nth-child(2) {
        -webkit-transform: rotate(12deg) translateX(500%);
        -moz-transform: rotate(12deg) translateX(500%);
        -ms-transform: rotate(12deg) translateX(500%);
        -o-transform: rotate(12deg) translateX(500%);
        transform: rotate(12deg) translateX(500%);
        background: #ffe63d;
    }

    .circle:nth-child(3) {
        -webkit-transform: rotate(24deg) translateX(500%);
        -moz-transform: rotate(24deg) translateX(500%);
        -ms-transform: rotate(24deg) translateX(500%);
        -o-transform: rotate(24deg) translateX(500%);
        transform: rotate(24deg) translateX(500%);
        background: #ffe63d;    
    }

Repeat this pattern 30 times, increasing by 12 degrees each time.

cssvue.jscss-selectors

Answer №1

Utilizing scss and the @for loop:

Check out the live code example here

View the compiled scss to css transformation


.wrapper {
    display: flex;
    width: 100%;
    height: 200px;
    margin: 30px auto;

    .circle-container {
        margin: 60px;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        opacity: 0.7;
        background: #ffe63d;
    }
}

@for $i from 1 through 30 {
    .circle:nth-child(#{$i}) {
      transform: rotate($i *12deg) translateX(500%);
    }
}

Answer №2

If you're looking to add a unique touch to your elements, creating a custom mixin might be the way to go:

@mixin customize-transform($degrees, $percentage) {
  -webkit-transform: rotate($degrees) translateX($percentage);
  -moz-transform: rotate($degrees) translateX($percentage);
  -ms-transform: rotate($degrees) translateX($percentage);
  -o-transform: rotate($degrees) translateX($percentage);
  transform: rotate($degrees) translateX($percentage);
}

Once defined, you can easily apply this mixin to any element:

.shape:nth-child(1) {
  @include customize-transform(0deg, 500%);
}

.shape:nth-child(2) {
  @include customize-transform(12deg, 500%);
}

.shape:nth-child(3) {
  @include customize-transform(24deg, 500%);
}

Answer №3

When utilizing Vue.js to dynamically insert the div, it's beneficial to keep the CSS generic and rely on inline styles that are generated within the div itself. One approach is to use a variable that increments by 12deg for each div.

.wrapper {
  display: flex;
  width: 100%;
  height: 200px;
  margin: 30px auto;
}

.circle-container {
  margin: 60px;
  position: relative;
  width: 100%;
  height: 100%;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  opacity: 0.7;
  transform: rotate(var(--d,0deg)) translateX(500%);
  background: #ffe63d;
}
<div class="wrapper">
  <div class="circle-container">
    <div class="circle" ></div>
    <div class="circle" style="--d:12deg"></div>
    <div class="circle" style="--d:24deg"></div>
    <div class="circle" style="--d:36deg"></div>
    <div class="circle" style="--d:48deg"></div>
  </div>
</div>

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

Steps to position the dropdown scrollbar to the top every time it is opened

I am working with a unique drag-and-drop multi-select dropdown that only has a unique control ID. The issue I am facing is that when the dropdown is initially opened, the scroll bar is at the top. However, after scrolling down and closing the dropdown, the ...

javascripthtmljquerycssangularjs

html tables cannot be aligned row by row

I am attempting to display messages row by row and then show a text box for input to send a message. The issue I am facing is that I can display the messages row by row, but the text box appears next to the displayed messages horizontally rather than at th ...

htmlcss

Sending the complete parameter to a Vue component from the blade file is causing an increase of 30 extra database queries

In my project, I encountered an issue with a Vue component that receives data from my blade file. This is how I pass the data: <my-widget :data-aircraft="{{ $aircraft }}"></my-widget> Strangely, when I pass the entire $aircraft object to the ...

phplaravelvue.jslazy-loadingeager-loading

Trouble with card alignment in Bootstrap

I've been experimenting with creating a grid layout using cards and utilizing ng-repeat for generating the cards. Unfortunately, I'm running into an issue where there is no spacing between each card, as depicted in the image. https://i.stack.img ...

htmlcssangularjstwitter-bootstrap

a new webpage beginning from a different location

Starting from scratch here, I must apologize for not providing any code upfront. The issue at hand is this - I've got a page full of information sorted by ID (retrieved from the database). These IDs are linked from another page where users can click ...

htmlcss

Incorporate a section of text to flow around a floated image within a paragraph

https://i.sstatic.net/s5aFq.png How can I achieve the text wrapping above an image similar to the layout in the sunflower picture? I have tried using relative positioning and adjusting the top property, but it doesn't allow the text to wrap around th ...

htmlcss

Experience the latest PWA built using Vuejs in action!

Currently, I am utilizing Vue.js with Vuetify to create a Progressive Web Application (PWA). Within the /public folder, I have a service-worker.js file. Here is a snippet from my vue.config.js: pwa: { // configure the workbox plugin ...

vue.jsservice-workerprogressive-web-appsvuetify.jsworkbox

Responsive menu not collapsing properly and appearing funky in Drupal

I've managed to create a responsive navigation bar, but I'm encountering two issues. Firstly, when I resize the screen on my test pages, not all of the links hide as expected. Secondly, after inserting the code into Drupal, the nested links appea ...

javascripthtmlcssdrupal

Tips for animating the box-shadow effect using jQuery

Can anyone provide insight on how to animate the box-shadow of multiple elements? I have reviewed previous threads such as this one, but found outdated and non-working solutions. Additionally, I came across the jquery box-animation plugin, which is limit ...

jqueryjquery-animatecss

Using Flexbox to ensure two elements do not appear next to each other

When viewing on large screens, I want all elements to be on one row. On smaller screens, I want them to be on three rows. Specifically, I don't want to see the button next to the H1 element on the same row. How can flexbox help solve this problem? Tha ...

javascripthtmlcsslayoutflexbox

inline checkbox is positioned on top of the text rather than next to it

I am attempting to enhance my form by adding checkboxes, but I have encountered an issue with the bootstrap class "checkbox-inline" not working as expected. Below is the code snippet: <strong>Styles:</strong> <%= f.collection_check_boxes : ...

cssruby-on-railsrubycheckboxbootstrap-4

The header on my website is set to 768px for my menu size, but the menu display is appearing

I'm feeling frustrated with an issue that I can't seem to figure out. The #topo section is supposed to have a width of 768px. Similarly, the menu div should also have a width of 768px. In my page, however, the logo (yellow div) and the menu (g ...

htmlcss

Element was removed upon clicking only once

Can anyone help me figure out why the behavior of .remove() with $postNav.remove(); is different here? When you click on "I'm a tag" for the first time, both the <li> and <ol> are deleted as expected. However, on the second click, only the ...

javascriptjquerycsshtml

Maintaining aspect ratio of canvas while ensuring responsiveness

Currently, I am working on a drawing app and have come across an issue that has been challenging for me to resolve. The dilemma lies in resizing the canvas of sketches from the original resolution of 1280 x 720 to the maximum size possible upon opening the ...

javascriptcssangularcanvasresponsive-design

Is there a way to create a footer that will only appear once the entire content has been read?

While utilizing Ionic, my code includes the following structure: <ion-header></ion-header> <ion-content> <div *ngFor="let publisher of publishers" class="contentspacing"> <div class="border-div"> <d ...

css

Header appearing at the same level as post title due to overlapping

After rearranging the date header below my post title on Blogger, I encountered an issue where on the latest post, the date was overlapping with the header. Adjusting the margin or padding affected other date headers, leaving me unsure of what to do next. ...

htmlcssdatetemplatesblogger

Tips for aligning objects within a bootstrap column so that they all have the same starting point on the X axis

To recreate the issue I am facing, I created a basic HTML structure with 2 bootstrap columns. My aim is to have multiple <p> elements in the second column, stacked one below the other. However, the problem arises when these <p> tags contain tex ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

CSS a:hover not behaving as expected

So, I'm diving into creating my very first website and I'm running into a little hiccup with the "a:hover" feature in CSS. No matter what I try, the links on my page stay the same color whether hovered over or not. Here's a snippet of code ...

htmlcsshyperlinkhovermouseover

Presenting titles and buttons within a Bootstrap modal window

I have implemented a modal using vue-bootstrap. The code for the modal is as follows: <template id="child"> <b-modal v-model="showModal" size="lg"> <template v-slot:modal-header> <h4 class="modal-title"> ...

cssbootstrap-4vuejs2bootstrap-modalbootstrap-vue

Ways to access the $auth value in a component that is not registered in the Vue-router component

In my layout theme/default, I have implemented vue-router as shown below: <template> <div id="app"> <component :is = "layout"> <router-view></router-view> </component> </div> </template> <s ...

vue.jsvue-componentvue-router