PhpStorm CSSEditorinPhpStorm

7/25/2019 PhpStorm CSSEditorinPhpStorm

1/5

CSS Editor in PhpStorm

Editing CSS using PhpStormUsing CSS in HTMLLESS, SASS, SCSS, Stylus, Compass and CSS minification using File Watchers

Editing CSS using PhpStorm

Just like when editing PHP code, PhpStorm comes with a rich editor for CSS. It comes with code completion, formatting, intentions, navigationand so on.

We can start typing CSS properties, or use , which provides a shorthand for many of the properties we use every day. For example, weEmmet

can type and hit to expand into . Vendor prefixes are also supported by Emmet. For example will expand into all vendors'ff TAB font face -brds boproperties:rder-radius

PhpStorm comes with several intentions for CSS as well. There are a lot of them, for example to change colors, expanding CSS, extractingimages, replacing quotes, or to optimize properties:

Tweet

PhpStorm provides us with code completion, formatting, intentions, navigation and many more thing for working with CSS. Next to that, itsupports writing LESS, SASS, SCSS, Stylus, Compass, Emmet and more! Let's have a look at some of the CSS editor features.

Make sure to also check the tutorial.HTML Editor in PhpStorm
http://docs.emmet.io/css-abbreviations/https://twitter.com/sharehttps://confluence.jetbrains.com/display/PhpStorm/HTML+Editor+in+PhpStormhttps://confluence.jetbrains.com/display/PhpStorm/HTML+Editor+in+PhpStormhttps://twitter.com/sharehttp://docs.emmet.io/css-abbreviations/


2/5

From the tool window, which can be opened by pressing ( on Mac OS X), we can see the structure of the CSS file we areStructure Alt+7 CMD+7working with. It lets us navigate through the file with ease, using the arrow keys on our keyboard. We can also search for a given style. All we

need to do is start typing inside the tool window.

Using CSS in HTML

When working with the , we can make use of the styles that are defined in referenced CSS files. PhpStorm will provideHTML Editor in PhpStormcompletion for known classes and identifiers.

Check the tutorial to learn more about common editor features likeWorking with the PhpStorm Editor Actions and Navigationnavigation, bookmarks, code inspections and more.
https://confluence.jetbrains.com/display/PhpStorm/HTML+Editor+in+PhpStormhttps://confluence.jetbrains.com/display/PhpStorm/Working+with+the+PhpStorm+Editor+Actions+and+Navigationhttps://confluence.jetbrains.com/display/PhpStorm/Working+with+the+PhpStorm+Editor+Actions+and+Navigationhttps://confluence.jetbrains.com/display/PhpStorm/HTML+Editor+in+PhpStorm


3/5

Using the context menu on any HTML tag, we can see which styles are effectively applied to a DOM element andShow Applied Styles for Tagwhere the various CSS properties originate from.

LESS, SASS, SCSS, Stylus, Compass and CSS minification using File Watchers

Many developers are using LESS, SASS, SCSS, Stylus or Compass to generate their CSS files. PhpStorm supports these languages as well,providing support for variables and mix-ins.


4/5

Next to language support, PhpStorm features a concept called "File Watchers". They "watch" a file, for example a or file, and run a.less .csscommand whenever they change. For files that could be the LESS transpiler, transforming it into CSS. For files, this may be a tool that.less .css minifies the CSS file and strips out all whitespace and comments. Here's an example of a LESS file being transpiled into CSS whenever we makea change to it. Note PhpStorm adds the file underneath the LESS file in the project explorer so we can clearly see where it originates from.


5/5

To learn more about how to set up , check .File Watchers in PhpStorm this tutorial

Tweet
https://confluence.jetbrains.com/display/PhpStorm/File+Watchers+in+PhpStormhttps://twitter.com/sharehttps://twitter.com/sharehttps://confluence.jetbrains.com/display/PhpStorm/File+Watchers+in+PhpStormhttps://confluence.jetbrains.com/display/PhpStorm/File+Watchers+in+PhpStorm

PhpStorm CSSEditorinPhpStorm

Documents

Transcript of PhpStorm CSSEditorinPhpStorm