Power up CSS3 in Eclipse with CodeMix

CSS3 in Eclipse with CodeMix


CodeMix is a plugin that brings VS Code smarts to Eclipse, and gives you access to Code OSS extensions directly from Eclipse. With CodeMix, you get everything needed for a superior programming experience when working with CSS3 in Eclipse.

  • Content Assist (including variables)
  • Element Preview
  • Variable Navigation
  • Sass & LESS support
  • Validation
Pair this with awesome HTML5 support in CodeMix for a truly impressive web-coding experience.

CSS3 in Eclipse without CodeMix


Eclipse without CodeMix doesn’t include the tools you need for productive coding. Even if you download the various Eclipse plugins required to get these features, the result will not come close to the rich user experience that CodeMix delivers.

CodeMix includes a Web extension pack that automatically downloads and manages everything you need for the optimal HTML5 and CSS3 coding experience.

Learn more about CSS in CodeMix

I have tried and worked with all IDEs / Editors on the market and no one speeds up my work like Webclipse + CodeMix.

Davide Perini

Information Systems Architect, Hewlett Packard Enterprise

Get CodeMix now — it’s free to try!

Become an Insider to receive updates and provide feedback!

The Proof is in the Details

Content Assist

Suggestions appear as you type—you don’t need to specially invoke content assist. This is true for most CodeMix editors and once you get used to this, you won’t want to go back to the “Eclipse way”. The CodeMix CSS editor stays on top of the CSS 3 specification, providing suggestions with detailed documentation, including both properties and their possible values. Properties unknown to the Eclipse CSS editor are supported in the CodeMix CSS editor; for example, animation, border-image and transition


Variables in pure CSS are still at the draft stage, but those defined in the current file show up in content assist suggestions. You can also use Ctrl/Cmd+Click to navigate to the variable declaration.

Sass / LESS

Sass and LESS are well supported, with navigation and validation capabilities, IntelliSense that includes variable analysis, and Emmet support too.

Note: If you need support for the older, indented, Sass style, please install this Sass extension.

Element Preview

Hover over a CSS selector to view a popup displaying sample HTML that illustrates which elements will be targeted by that particular style declaration. This is especially handy when dealing with complex selectors.


The CSS editor in CodeMix provides validation for a number of cases, from something as straightforward as missing brackets and bad syntax, to more advanced cases like the use of invalid properties, or even missing properties. For advanced CSS linting capabilities, you may want to add the stylelint extension. 

See for Yourself

Play this quick video to learn more about HTML5 and CSS3 coding with CodeMix.

<iframe width="1280" height="720" src="https://www.youtube.com/embed/vcfCNQa0jwc?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

Give it a Try

CodeMix is free to try for 45 days—download it now!