Honestly, I’m going to say upfront, I’m not even sure how to succinctly describe this issue; I can’t pinpoint the behaviour either. Let’s start with some code.

If I’ve got…

/ICONS STYLES/
@media(max-width: 768px){
.icon-main-text {
margin-left: 10px;
}

.icon-Title {
	margin-left: 10px;
}

}
/END ICONS STYLES/

…and I highlight from the opening period of the first class to the closing bracket of the second class and I use the CMD + / shortcut to comment out those classes, instead of commenting out the highlighted code, it removes the opening comment “bracket” from “ICONS STYLES” and the closing comment “bracket” from “END ICON STYLES” to become the following…

ICONS STYLES*/
@media(max-width: 768px){
.icon-main-text {
margin-left: 10px;
}

.icon-Title {
	margin-left: 10px;
}

}
/*END ICONS STYLES

If I use the shortcut immediately again without changing what is highlighted, it comments correctly what I have highlighted, but the already removed comment “brackets” cause my code to break (assume I’m doing this in a MUCH larger file, which I am, and the opening and closing comments have many, MANY more comments and classes in between).

Strangely, if you, for example, change margin-left to just margin, resulting in the following code:

/ICONS STYLES/
@media(max-width: 768px){
.icon-main-text {
margin: 10px;
}

.icon-Title {
	margin-left: 10px;
}

}
/END ICONS STYLES/

…and you highlight the same classes and use the shortcut, it comments as expected. However, if you change it to margin-top or padding-top or some other attribute with a dash in the name, it comments improperly.

Furthermore, going back to the original code, if you highlight from, say, just after the first class’ period to the second class’ closing bracket, it comments as expected. Also, if you highlight one class or the other alone, it works. If you add a third class in the middle of the other two, it comments as expected.

Even after playing with the code, the following code:

/ICONS STYLES/
@media(max-width: 768px){
.iconmaintext {
padding: 10px;
}

.iconTitle {
	margin: 10px;
}

}
/END ICONS STYLES/

…if you highlight the same portion, results in the incorrect shortcut functionality.

The following, if highlighted the same, results in expected behavior:

/ICONS STYLES/
@media(max-width: 768px){
.iconmaintext {
padding: 10px;
}

.iconTitle {
	margin-left: 10px;
}

}
/END ICONS STYLES/

But the following does not:

/ICONS STYLES/
@media(max-width: 768px){
.iconmaintext {
padding-left: 10px;
}

.icon-Title {
	margin-left: 10px;
}

}
/END ICONS STYLES/

The reason for all the examples is because, as stated, I cannot pinpoint the behaviour pattern. I’m trying to provide a bit of my testing examples. In general, point is, it seems to break MAYBE due to dashes (the number, positioning, etc. or some combination).

This might seem like a small issue, but because it occurred and I didn’t know it had removed the first opening comment “bracket” and last closing comment “bracket” (because there’s too much code to view those with everything else), I spent a good 30 minutes trying to find the issue. I’m trying to point out this seeming bug so future versions of Sublime can be fixed.