'How to assigning multiple properties at a time in SASS, then individual ones?

In SASS for CSS, I'm trying find a way to save redundancy in the code.

.language
        #russian                      
                width: 97px
                height: 97px
                background-color: darkred
                position: absolute
                left: 200px
                top: 400px
        #portuguese
                width: 97px
                height: 97px
                background-color: darkred
                position: absolute
                left: 200px
                top: 500px
        #piglatin
                width: 97px
                height: 97px
                background-color: darkred
                position: absolute
                left: 200px
                top: 600px

The above is what I have right now. The below is something like what I would like to have:

.language

        width: 97px
        height: 97px
        background-color: darkred
        position: absolute
        left: 200px

        #russian                               
                top: 400px
        #portuguese
                top: 500px
        #piglatin
                top: 600px

I'm trying to assign all the common properties at once, then individually assign unique ones. However the code right above doesn't seem to work. The elements don't retain the common properties. Is there a good way to do this? My HTML looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>hellomars</title>
    <link rel="stylesheet" href="style.css">
</head>


<body>

    <div class="language">
        <div id="russian"></div>
        <div id="portuguese"></div>
        <div id="piglatin"></div>
    </div>    

</body> 
</html>

Thanks.

csssass


Solution 1:[1]

Your CSS is right. Just add the .language class to individual div instead of parent div like this:

<div class="any-other-class">
  <div class="language" id="russian"></div>
  <div class="language" id="portuguese"></div>
  <div class="language" id="piglatin"></div>
</div>

The SASS/CSS would be:

.language
  width: 97px
  height: 97px
  background-color: darkred
  position: absolute
  left: 200px

  #russian                               
    top: 400px
  #portuguese
    top: 500px
  #piglatin
    top: 600px

Solution 2:[2]

As an other alternative, I believe you can also have the same css result you currently have, but use @mixin to reduce repetition. This would avoid repeating the language class within html.

https://sass-lang.com/documentation/at-rules/mixin

Following snipped in SCSS which has of course a sass equivalent

@mixin default {
  width: 97px;
  height: 97px;
  background-color: darkred;
  position: absolute;
  left: 200px;
}

.language {
  #russian {
    @include default;
    top: 400px
  }
  #portuguese {
    @include default;
    top: 500px
  }
  #piglatin {
    @include default;
    top: 600px
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Harshal Patil
Solution 2 Kadgiko

Related Questions