Sublime Forum

Goto-CSS-Declaration (ST2 and ST3) - UPDATE: v0.3

#1

v0.3

https://sublime.wbond.net/packages/Goto-CSS-Declaration
https://github.com/rmaksim/Sublime-Text-2-Goto-CSS-Declaration

[size=120]Goto CSS declaration in an open *.css (.less, .sass, .other) file from other file (*.html, *.js, *.other_extantion)[/size]

goto_css_declaration.gif837×311 101 KB

Example
.html

<div id="box" class="box"></div> ^ |-cursor .js

    $(".box").click(...);
         ^
         |-cursor

Pressing the key **super+right** or **super+left** go to the first CSS declaration of box (.class or #id => .box or #box), in this example the id #box

    #box .box-shadow {
        background: url(../img/box.jpg);
        }
    #box-shadow .box-shadow-1 {
        box-shadow: 0 0 5px #ff0;
        }
        .box__inner {
            box-shadow: 0 0 5px #f00;
            }

and if then press (in CSS file) **super+right** goes to the next CSS declaration of box,
in this example the class .box-shadow,

  • and next => #box-shadow,
  • and next => .box-shadow-1,
  • and next => .box__inner

also you can press (in CSS file) **super+left** and goes to the previous CSS declaration of box.

Default (Linux).sublime-keymap

super + right super + left
Default (Windows).sublime-keymap

super + . super + ,
support for .SASS and .LESS (and .other from goto_css_declaration.sublime-settings)

    {
        "css_files": ".css", ".sass", ".less"]
    }
0 Likes
Make CSS file to be aware of HTML ids/classes
#2

Love it! I might extend it to work with SCSS files in Rails… Time may tell me otherwise.

0 Likes
#3

Very very very useful - many thanks!

0 Likes
#4

Excellent! But requires a bit of polishing, not just a simple search in css file. for example for class=“box” it founds “box”-shadow, that’s strange.
anyway - thanks!

0 Likes
#5

Wow, thanks. This is awesome!

I binded this into mousemap:

{ "button": "button1", "count": 2, "modifiers": "ctrl", "alt"], "command": "goto_css_declaration"},
{ "button": "button1", "count": 1,  "modifiers": "ctrl", "alt"], "press_command": "drag_select" }

And works wonderful.

But yeah, i agree with rooc. It needs some polish because is jumping randomly sometimes.

0 Likes
#6

@nobleach mhmmm yeah scss support, i would love that :wink:

0 Likes
#7

[quote=“rooc”]Excellent! But requires a bit of polishing, not just a simple search in css file. for example for class=“box” it founds “box”-shadow, that’s strange.
anyway - thanks![/quote]

I try to solve the problem with search.

0 Likes
#8

UPDATE: v0.1.0

description & screencast see above viewtopic.php?f=5&t=4397#p19874

  • Added: go to the next/previous declaration in the CSS file
  • Removed: F3 support

fixed

0 Likes
#9

Cannot for the life of me get this to work.

Super+any direction was resizing and relocating my window, so I changed the keys to ctrl+alt+left/right. (I checked and this is currently not in use by anything else)

Tried, still nothing. So I tried testing the code to see if it would run, and if it was just the keymapping.

view.run_command("goto_css_declaration")

Tried the above and this is what I get back.

>>> view.run_command("goto_css_declaration") Traceback (most recent call last): File ".\sublime_plugin.py", line 351, in run_ return self.run(edit) TypeError: run() takes exactly 3 arguments (2 given)

*EDIT

It’s working now. Of course I figure it out after I ask the question. It was a simple matter of extra “{” before and after the keymap. Restarted and it’s all good now.

I likes it.

I do not understand what is going on. Yes, I copied and pasted everything exactly as was posted, and only changed the key mappings. I still just cannot find any way to make this work.

0 Likes
#10

I’m not sure if it is your case but corresponding css file should be opened in other tab

yep, I also found this key mappings confusing because in windows they predefined for changing window behaviour

0 Likes
#11

yep, unfortunately you’re right (
in Windows 7
Win + Left - Dock the current Window to the left half of the screen
Win + Right – Dock the current Window to the right half of the screen

try to use [size=120]super+.[/size] and [size=120]super+,[/size] or other suitable combination of keys.

UPDATE: Default (Windows).sublime-keymap to this combination.

0 Likes
#12

It’d alse like very much support for SASS and LESS - I suppose it’s nothing fancy, just adding .less and .scss files to the searching procedure. Or am I wrong?

0 Likes
#13

Support for SASS and LESS (and other from user settings) will be added soon.

Thanks for your feedback.

0 Likes
#14

UPDATE: v0.2.0

+ Added: support for .SASS and .LESS (and .other from goto_css_declaration.sublime-settings)

    {
        "css_files": ".css", ".sass", ".less"]
    }
0 Likes
#15

UPDATE: v0.2.1

+ Fixed: TypeError in is_css() if empty view.file_name() as in “Find Results” window

0 Likes
#16

Hi guys,

I really really love this package when working with css.

Now my question is:

**Do you think you can extend it to make it work with PHP functions?
**
I have 2 files opened in tabs. And I would like to jump to the function setCssAndJsFiles().

Here are my code examples:
File 1 (contains function calls)

// DO IT: Call a function EmsTools::setCssAndJsFiles(); EmsTools.setCssAndJsFiles();

// Function definition public static function setCssAndJsFiles() { }

0 Likes
#17

Has anyone got this working with Rails? E.g. with html.erb and css.scss.erb files? I’ve been unsuccessful… :neutral_face:

0 Likes
#18

Preferences -> Package Settings -> Goto-CSS-Declaration -> Settings-Default

try adding the extension “.scss” (or “.erb” ?) to the list
{
“css_files”: “.css”, “.sass”, “.less”, “.scss”]
}

with “.less” it works fine

0 Likes
#19

[quote=“StevenRas”]Hi guys,
I really really love this package when working with css.
Now my question is:
Do you think you can extend it to make it work with PHP functions?
[/quote]

try using the “Goto Symbol” package

0 Likes
#20

[quote=“rmaksim”]
Preferences -> Package Settings -> Goto-CSS-Declaration -> Settings-Default

try adding the extension “.scss” (or “.erb” ?) to the list
{
“css_files”: “.css”, “.sass”, “.less”, “.scss”]
}

with “.less” it works fine[/quote]

Unfortunately this doesn’t work, I believe it’s because the plugin only considers html files as ending with “.html”, an option for “html_files” would solve this problem. In a Rails context most files end with .erb and only some of those files are css and only some are html, it would make most sense to be able to write the following:

{
“css_files”: “.css”, “.sass”, “.less”, “.css.erb”, “.css.scss.erb”],
“html_files”: “.html”, “.html.erb”]
}

You can also try CTags: github.com/SublimeText/CTags

0 Likes