Sublime Forum

Specify Collapsible CSS Groups

#1

I’d love to be able to define a specific group of classes, for instance, everything affiliated with navigation, and put them in a collapsible group. Sub-groups inside a group would be awesome too. This would make a large css sheet so much more manageable. I’ve tried LESS and other techniques but I feel like it’s a problem that could be solved with proper structure and collapse within sublimetext. Example below. If this exists, please, for the love of god, someone tell me how. Thanks!

[code]
.first_class {
}
.second_class {
}

.second_class p {
}
.second_class h1 {
}
[/code]
0 Likes

#2

Almost all in CSS syntax including folding options is defined in Packages/CSS/CSS.tmLanguage file. It’s a XML file which you can edit to add you own features. I’m not sure but probably it’s a good idea to copy it to User package to prevent loosing on upgrades. I haven’t loosed anything, but probably just because the file wasn’t changed in newer versions of editor.

0 Likes

#3

Folding arrows are based on indentation, so it’s as easy as follows:

[code]/* Group starts here that would be collapsible */
.first_class {
width: 12px;
padding: 2em;
}
.second_class {

}
/* This would be a sub collapsible group under second_class */
    .second_class p {
        background: #000;
    }
    .second_class h1 {
        font-size: 110%;
    }

/* Another group starts here that would also be collapsible */

.third_class {
    background: #000;
}
.the999th_class h1 {
    font-size: 110%;
}

[/code]

If you want that kind of automatically, based on your first selector (the “.second_class”) you can either write yourself a plugin which can parse that or try Sass (Scss).

1 Like