Home Download Buy Blog Forum Support

Specify Collapsible CSS Groups

Specify Collapsible CSS Groups

Postby chasemb on Tue Jun 26, 2012 6:08 am

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: Select all
<!-- Group starts here that would be collapsible -->
.first_class {
}
.second_class {
}
   <!-- This would be a sub collapsible group under second_class -->
    .second_class p {
    }
    .second_class h1 {
    }
<!-- Another group starts here that would also be collapsible -->
chasemb
 
Posts: 1
Joined: Tue Jun 26, 2012 5:59 am

Re: Specify Collapsible CSS Groups

Postby GreLI on Tue Jun 26, 2012 2:12 pm

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.
GreLI
 
Posts: 7
Joined: Mon Jan 23, 2012 6:00 pm

Re: Specify Collapsible CSS Groups

Postby FichteFoll on Fri Jun 29, 2012 2:29 pm

Folding arrows are based on indentation, so it's as easy as follows:
Code: Select all
/* 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%;
    }


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).
FichteFoll
 
Posts: 377
Joined: Fri Mar 16, 2012 11:49 pm
Location: Germany


Return to Ideas and Feature Requests

Who is online

Users browsing this forum: No registered users and 8 guests