sass - Can my css parent class change the child? -

i have rails page loads collection of items. each item has button. , got svg image inside it:

<button class="the-button">   <svg class="the-pic">     <g class = "cls-2">       <path class="cls-5" d="m117.58,133.33l-24.7,25.38s85,165.63,88,173.08a11.24, ... "></path>     </g>   </svg> </button> 

some of items have button class "the-button" , others have items button "the-button-blue".

i want make cls-5 class have css: stroke:$dark-gray; when parent button class the-button, , have css: stroke:$white when class the-button-blue.

is possible?

note:

my css files .scss files , have jquery running

i want make cls-5 class have css: stroke:$dark-gray; when parent button class the-button, , have css: stroke:$white; when class the-button-blue.

yes:

.the-button .cls-5 { stroke: $dark-gray; }  .the-button-blue .cls-5 { stroke: $white; } 

explanation: when write chain of selectors in css space separating each selector, space indicates each subsequent selector descendant of previous one.

n.b. the selector after each space may not child of previous selector - may grandchild or great-grandchild etc. space indicates selector descendant of previous selector.