PHPStorm install SASS, SCSS + Compass, and phpstormscss

PHPStorm install SASS, SCSS + Compass, and phpstormscss

I haven't updated my blog for a long time. I have studied SASS and LESS over the past two days. I finally chose SASS because it is relatively mature. After trying many pitfalls, I finally succeeded, the preceding steps are as follows:

1. Install the PHPStorm SASS plug-in

It seems that this plug-in is provided. If there is no plug-in, open setting-> plug-ins and install one by yourself.

2. Install Ruby

Windows version:

Http://rubyinstaller.org/downloads/

Linux or Mac address:

Http://ruby.taobao.org/mirrors/ruby/

I use the latest windows version 2.2.1.

Configure the system environment and add the absolute path of the ruby bin directory to the path environment variable. During windows installation, you can select "add automatically ".

Refer to this blog post:

Http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html

3. Install SASS and Compass

Due to the relationship between the daily Lan, you may need to reset the update source address:

Run the following command line:

gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/

Refer to the following article:

Http://devework.com/sass-compass.html

Run the following command:

gem install sassgem install compass

4. Create a Compass + SASS Project

Create a project root directory, and run the following command after the cd entry:

Compass create your_project_name

Three folders and a config. rb file are generated.

Store our own style code in the sass directory. After compilation, it will be automatically generated to the stylesheets directory. Of course, you can also customize the generated address.

5. Configure the Compass compiling environment

Open setting-> Language & Framework with a Compass

Select Enable and set the path of your ruby comopass. bat installation and the path of the config. rb file of the current project.

6. Configure the SASS Environment

Open setting-> Tools-> FileWatchers

Click the green plus sign on the right to add a compass scss project. The configuration is as follows:

Use the default configuration.

Working directory is the project directory that you just used compass create (here I am only using the folder name less. Do not misunderstand it)

7. code writing started.

@import "compass/reset";@import "compass";$fc: #FFF;$fs: 16px;body { background-color: #555; }#panel {  color: $fc;  font-size: $fs;  .title {    padding: 1em;    background-color: #888;    color: $fc;  }  .item {    float: left;    width: 49%;    min-height: 3em;    padding: 1em;    margin: 1.5%;    border: solid 1px $fc;    box-sizing: border-box;    background-color: #999;    @include box-shadow(1px 2px 3px #000);  }}

A simple test code is automatically compiled after each change, but css files are not automatically generated. You can generate the code under the command line.

The command is as follows:

compass compile

Or force update Compilation

compass compile --force

Then you can see that there is an extra css file with the corresponding name under stylesheets.

There will be a lot of code in this code, so I will not be able to get the code, including the reset style, your own style, and comments, because this is the development environment,

Compression is required for the official environment

Next, modify the configuration, enter the official environment, and compress the generated code into a line.

Open the config. rb file in the root directory of the project.

Add two lines of code:

environment = :developmentoutput_style = (environment == :production) ? :compressed : :expanded

When environment is: production, the generated css file will be compressed into a row.

Now, let's start developing your own css quickly.

If you only need to use SCSS, you can create a new SCSS configuration in step 1. The following is the configuration

The following are some reference documents:

Http://www.jetbrains.com/phpstorm/help/working-with-sass-and-scss-in-compass-projects.html#d233223e455

Http://www.ruanyifeng.com/blog/2012/11/compass.html

Http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Http://compass-style.org/install/