Emacs: Xah CSS Mode 📦
xah-css-mode.el
is a emacs major mode for working with CSS code.
Get it by Donation
Goto paypal.com, send $32 to Xah@XahLee.org (be sure to include your correct email address. I need that to send it to you.)
Write in message area: xah-css-mode.el
Features
- Correct Syntax coloring of ALL CSS words. If it's not colored, you have a typo.
- Semantic Coloring. CSS words are colored by their type. e.g. HTML tag names, CSS property names, CSS value keywords, CSS unit names, pseudo selector names, media keywords. ID selector string and class name in bold.
- Keyword completion with ido-mode interface. Press Tab after a word to complete. All CSS words are supported: {html5 tags, property names, property value keywords, units, colors, pseudo selectors, “at keywords”, etc}.
- Single Key Prettify Code Format. Press Tab before word to reformat current block of code. That is, all lines enclosed by curly brackets {}.
- Syntax coloring of hexadecimal color format
#rrggbband#rgband HSL Color formathsl(0,68%,42%). - Abbreviations: over 100 abbrevs for the most used CSS properties. Just type the initial letters followed by a space.
- Command to convert #rrggbb color format under cursor to HSL Color format.
- Command to insert a random color.
- Command to minify CSS code.
- Command to unminify (expand) CSS code to multi-lines format.
Commands to Format Code
Abbreviations Feature
Type
fs
followed by space, and it becomes
font-size
press space again and it becomes
font-size: 2rem;
Just type the initial letters.
Here's example of the top 16 most used CSS properties and the expansion:
font-size: 2rem; width: 200px; color: red; margin-top: 1rem; margin-top: 1rem; margin-bottom: 1rem; margin-right: 1rem; height: 200px; padding-top: 1rem; padding-left: 1rem; padding-bottom: 1rem; padding-right: 1rem; display: inline-block; background-color: black; text-align: left right center justify; position: static absolute fixed relative initial inherit;