Create Sublime Text or Text Mate color schemes in CSS, SCSS or stylus
- Total 6K
- Win 4K
- OS X 890
- Linux 645
|Sep 25||Sep 24||Sep 23||Sep 22||Sep 21||Sep 20||Sep 19||Sep 18||Sep 17||Sep 16||Sep 15||Sep 14||Sep 13||Sep 12||Sep 11||Sep 10||Sep 9||Sep 8||Sep 7||Sep 6||Sep 5||Sep 4||Sep 3||Sep 2||Sep 1||Aug 31||Aug 30||Aug 29||Aug 28||Aug 27||Aug 26||Aug 25||Aug 24||Aug 23||Aug 22||Aug 21||Aug 20||Aug 19||Aug 18||Aug 17||Aug 16||Aug 15||Aug 14||Aug 13||Aug 12||Aug 11|
CSScheme - Sublime Text Plugin
Ever thought handwriting
.tmTheme files sucks? But the other options for
editing color schemes are not programmatical enough? Then this is for you!
CSScheme is a custom CSS-like syntax that converts into the
.tmTheme files we
all love, but it does not end there. CSScheme (the package) can also take care
of compiling SCSS, SASS or stylus into CSScheme (the syntax) and then into
a color scheme using all features of these pre-compilers, such as variables,
conditionals or functions.
Check the example files for what's possible!
Usage (Please Read!)
You can either create a new file with the CSScheme: Create new *Scheme file
commands, open a file with the
.styluscheme extension or convert an existing
tmTheme file using the
CSScheme: Convert to CSScheme command or build system. Conversion to other
syntaxes is not supported at the moment and likely won't in the future. Please
convert manually and to your own preferences.
Building (ctrl+b or ⌘b) will convert the file to CSScheme,
if necessary, and then into a
.tmTheme file. Errors during conversion are
captured in an output panel. For automation purposes, the command is named
Things you must consider when using CSScheme:
@at-rules will be added as string values to the “outer dictionary”. You may specify a global
@namerule to specify the scheme's name.
@namerules in a ruleset will show as the name for various color scheme editing tools after compilation. Sublime Text itself does not use it.
- In order to create a
.hidden-tmThemefile, you need to specify a global
@hidden true;rule. The converter will consume this rule and change the output file's extension accordingly.
- If you want a property to have no font styles you have to specify
fontStyle: none;. This will be translated to
- The general settings (like main background color) are read from a general-
purpose block with a
*selector. This is required.
- Specifying a uuid (via
@uuid) is optional because Sublime Text ignores it.
Things you must consider additionally when using CSScheme with SCSS or SASS:
- Make sure that
sassis available on your PATH or adjust the path to the executable in the settings.
- The SASS parser will not accept raw
#RRGGBBAAhashes. You must enclose them in a string, e.g.
'#12345678', or just use the
- The SASS parser will also not work with several scope selector operators (
|). You must escape these with a backslash. The same applies to scope-segments starting with a number.
CSScheme will take care of removing backslashes before emitting the final conversion result. Examples can be found in the example files).
Note: Because the SASS parser does not know about the semantics of these operators, they will generally behave poorly when used in conjunction with scope nesting.
Things you must consider additionally when using CSScheme with stylus:
- Make sure that
stylusis available on your PATH or adjust the path to the executable in the settings.
- At-rules, like the required global
@namemust be encapsulated with
unquote('@name "Example StyluScheme";')
- At-rules in non-global scope do not work! You'd only need these for
@commentanyway, but stylus does some weird stuff that does not translate into sane CSScheme.
CSScheme (the package) provides native support for CSScheme-to-
conversion. Thus, all languages that compile to CSS will also work in one way or
another. SCSS/SASS and stylus are automatically built from within Sublime Text,
and SCSScheme even has its own syntax definition because the one from the SCSS
package highlights unknown properties as invalid. Furthermore they provide
snippets and completions.
- Syntax highlighting for CSScheme and SCSScheme is bundled. Snippets and completions are provided for both.
- For SASScheme syntax highlighting you additionally need the Sass package.
- For StyluScheme syntax highlighting you additionally need the Stylus package.
If you want to use something a different pre-processor, you can do so by converting to CSScheme externally and then do conversion from CSScheme to tmTheme from within Sublime Text. Feel free to file an issue (if there isn't one already) if you'd like built-in support for an additional pre-processor.
Utility for Scheme Creation
(only CSScheme and SCSScheme)
Just press ctrl+r (⌘r).
In StyluScheme this is somewhat supported but since scope names are not regular html tags they don't get recognized (since I didn't bother to write a new syntax definition for stylus as well).
r(general purpose ruleset)
for(from … to),
fort(from … through)
All known properties are completed as well as the basic scopes from the Text Mate scope naming conventions when specifying a selector.
Here is a bunch of links that might help you when working on your color scheme.
- TextMate Manual - Scope Selectors
I prepared two example files that are merely a proof of concept and show a few of the features that are supported. The colors itself don't make much sense and are not good on the eyes because I picked them pretty much randomly, but it gives some great insight on what is possible.
Other Efforts for Easing Color Scheme Creation
Please note that all these work directly on
- https://github.com/facelessuser/ColorSchemeEditor/ - Cross platform Python application for editing color schemes in a GUI
- https://github.com/nilium/schemer - OS X App, similar to the above
- http://tmtheme-editor.herokuapp.com/ - Webapp, similar to the above but with a bunch of example color schemes to preview/edit and a nice preview
- https://github.com/bobef/ColorSchemeEditor-ST2 - Sublime Text plugin that syncronizes