Cascading two CSS codes with css-sprite - html

Question

I have an HTML code :
<li class="bath-icon">bath</li>
Where class="bath-icon" is defined in CSS as :
.bath-icon a {
background: url('images/room_bath.png');
background-size: auto 40%;
background-repeat: no-repeat;
background-position: 50% 20px;
background-color: #7E7C14;
opacity: 0.8;
}
Now I want to replace background image room_bath.png with an image from a sprite image with values as:
.room_bath {
width: 107px;
height: 64px;
background: url('images/sprite.png') -0 -952px;
}
Can anyone help me how both CSS can be cascaded and background image from sprite is inserted in .bath-icon class?

Answer 1

You can create variable in css and refer the variable in your css declaration.
:root {
--room-bath-bg: url('images/sprite.png') -0 -952px;
}
.bath-icon a {
background: var(--room-bath-bg);
background-size: auto 40%;
background-repeat: no-repeat;
background-position: 50% 20px;
background-color: #7E7C14;
opacity: 0.8;
}
Like above you can create your variable and refer in any places. The variable declaration should start with -- to identify the system.
NOTE: This mehtod is supported by only modern browsers.
Refer this W3 Schools CSS3 Variables to learn more details about this.