{"id":19218,"date":"2013-10-24T15:05:47","date_gmt":"2013-10-24T15:05:47","guid":{"rendered":"https:\/\/blog.jetbrains.com\/phpstorm\/?p=6750"},"modified":"2024-01-09T15:00:22","modified_gmt":"2024-01-09T14:00:22","slug":"phpstorm-7-web-toolkit-series-stylus-and-compass-support","status":"publish","type":"phpstorm","link":"https:\/\/blog.jetbrains.com\/phpstorm\/2013\/10\/phpstorm-7-web-toolkit-series-stylus-and-compass-support\/","title":{"rendered":"PhpStorm 7 Web Toolkit Series – Stylus and Compass Support"},"content":{"rendered":"

\"PhpStorm<\/a>In web development, there are quite some options available to make writing CSS more concise and developer-friendly. There is Less<\/a>, Sass<\/a>, SCSS<\/a> and more recently Stylus<\/a>, all languages that sprinkle CSS with variables, mixins, operations and functions. And then there\u2019s Compass<\/a> which builds on Sass and enriches it with a number of reusable patterns.<\/p>\n

We\u2019ve had support for Less, Sass and SCSS already. Now PhpStorm 7 adds support for Stylus<\/a> and Compass<\/a>!<\/p>\n

This functionality is available in <\/em>IntelliJ IDEA<\/em><\/a>, <\/em>PyCharm<\/em><\/a>, <\/em>WebStorm<\/em><\/a>, <\/em>PhpStorm<\/em><\/a>, <\/em>RubyMine<\/em><\/a> and <\/em>AppCode<\/em><\/a>.<\/em><\/p>\n

<\/em><\/p>\n

\"This<\/a> <\/em><\/p>\n

Syntax highlighting, code completion and structure view for Less, Sass and SCSS are available in PhpStorm by default. For Stylus, we should install the Stylus support plugin<\/a> through our IDE Settings | Plugins<\/em><\/strong>, Install JetBrains plugin\u2026<\/em><\/strong><\/p>\n

PhpStorm 7 supports these languages and their various compilers through File Watchers: the first time a .less<\/em>, .sass<\/em>, .scss<\/em> or .styl<\/em> file is added to a project, PhpStorm will transpile the file to CSS whenever it is saved. Note that a compiler for the language has to be installed. PhpStorm has a built-in Node.js Package Manager (Project Settings | JavaScript | Node.js<\/em><\/strong>) which can be used to install one.<\/p>\n

\"Using<\/a><\/p>\n

Compass<\/a> integration is also available. Through the Project Settings | Compass<\/strong><\/em>, we can specify the path to the Compass executable and a configuration file after which we can use it within PhpStorm.<\/p>\n

\"Compass<\/a><\/p>\n

Are you working with these features? We\u2019re anxious to hear your feedback in the issue tracker<\/a>, through the comments below or in our forums<\/a>!<\/p>\n

Develop with pleasure!
\n<\/em>\u2013 JetBrains PhpStorm Team<\/em><\/p>\n","protected":false},"author":118,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[808,907],"tags":[714,199,602,198,743,41,2205,2172],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/phpstorm\/19218"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/phpstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/types\/phpstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/users\/118"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/comments?post=19218"}],"version-history":[{"count":1,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/phpstorm\/19218\/revisions"}],"predecessor-version":[{"id":432160,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/phpstorm\/19218\/revisions\/432160"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/media?parent=19218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/categories?post=19218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/tags?post=19218"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/cross-post-tag?post=19218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}