Package for Showing All Possible CSS Values in Sublime Text 2

Package for showing all possible CSS values in Sublime Text 2?

No additional packages or specific settings were needed to solve this issue. The Ctrl/Cmd+Space keyboard shortcut natively displays all possible completions.

Sublime Text 2 css colors

Not sure about the color attribute and value yet, but for the css spacing I may have an answer. Go to C:\Users\<username>\AppData\Roaming\Sublime Text 2\Packages\CSS\css_completions.py Line 190. Change l.append((p, p + ": ")) to l.append((p, p + ":"))

how to find related css for certain tag in sublimetext2?

Take a look at this plugin : https://github.com/rmaksim/Sublime-Text-2-Goto-CSS-Declaration

To install it, you can firstly install package-control : http://wbond.net/sublime_packages/package_control/installation

Then, using the command shortcut (ctrl+shift+P in my case), you can go to "Package-Control: Install Package" and search for "Goto Css Declaration"

CSS code formatting and styling with Sublime

After trying almost all available packages for Sublime that do CSS formatting, and the one that worked out of the box was CSS Format https://sublime.wbond.net/packages/CSS%20Format . Works excellent, no external dependencies.

Expanding multiple-value abbreviations in Sublime Text 3 using Emmet

It works for me in ST3 3083 with Emmet v.2015.10.29. There must be something wrong with your setup.

Make sure your syntax is set to css.

If it's still not working, reinstall Emmet.

Sublime Text 3 - CSS Autocomplete WITHOUT typing property value

You can get ST to show the autocompletion popup again straight after a completion has been inserted using a small plugin and some preferences:

With a CSS file open in ST, open the Preferences menu and select Preferences - Syntax Specific. Add the following to the settings on the right hand side:

"auto_complete_triggers":
[
    {
        "characters": ": ",
        "selector": "source.css meta.property-list.css meta.property-value.css"
    },
],

and save it. This will tell ST to show the autocomplete popup automatically in CSS files when typing a : or a space when the syntax expects a property value.

Now, unfortunately, ST doesn't consider an autocompletion to have "typed" anything, so this trigger isn't fired automatically when selecting a property value like text-align from the autocomplete popup, which inserts text-align:. So, to get round that, this is where we need a small plugin. From the Tools menu, choose Developer -> New Plugin...

Select all text and replace with the following and save it, in the folder ST recommends (Packages/User/) as something like show_autocomplete_after_completion.py:

import sublime
import sublime_plugin

class AutoCompleteListener(sublime_plugin.EventListener):
    def on_post_text_command(self, view, command_name, args):
        if command_name in ('commit_completion', 'insert_best_completion'):
            act = view.settings().get('auto_complete_triggers', [])
            scope = view.scope_name(view.sel()[0].begin())
            char = view.substr(view.sel()[0].begin() - 1)
            for trigger in act:
                if sublime.score_selector(scope, trigger['selector']) > 0:
                    if char in trigger['characters']:
                        view.run_command('auto_complete', { 'insert_best_completion': False })
                        break

This plugin basically detects when a completion has been inserted (although due to a limitation of the ST API, it can't detect when you click on an entry with the mouse - see https://github.com/SublimeTextIssues/Core/issues/1166), and if the text/character immediately before the caret matches one of the autocompletion triggers defined in the settings, then it will show the autocomplete popup again.

Set location of CSS closing braces in Sublime Text 2

You can create a snippet. Tools/New Snippet...:

<snippet>
    <content><![CDATA[
{
    ${1}
    }

${2}
]]>
    </content>
</snippet>

Save it as Packages/User/CurlyBrackets.sublime-snippet.

Then, add a shortcut in your Key Bindings - User:

{ "keys": ["{"], "command": "insert_snippet", "args": {"name": "Packages/User/CurlyBrackets.sublime-snippet"}, 
    "context":
    [
        { "key": "selector", "operator": "equal", "operand": "source.css" }
    ]
}

This way, when you'll press {, in css files, you'll have what you asked for.

---

Related Topics