Phpstorm installing SASS, SCSS + Compass

A long time did not update the blog, the two days to study the next SASS and less, the final election of SASS, because relatively mature, and tried a lot of pits, finally succeeded, the following steps:

1. Installing the Phpstorm SASS plugin

It seems to have brought the plug-in, if not, open setting---Plugins yourself to install a bar, not much to say

2. Install Ruby

Windows version:

http://rubyinstaller.org/downloads/

Linux or MAC Address:

http://ruby.taobao.org/mirrors/ruby/

I'm using the latest version of Windows version 2.2.1

Configure the system environment, add Ruby's Bin directory absolute path to the PATH environment variable, the Windows version can be checked automatically add

Refer to this blog post:

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

3. Installing SASS and Compass

Because of the day 艹 LAN relationship, you may need to reset the source address under update:

Under command line execution:

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

You can refer to this article:

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

The following installation is performed:

Gem Install Sassgem Install Compass

4. New Compass + SASS Project

Create a project root directory, and after the CD enters, execute:

Compass Create Your_project_name

Generates three folders and one config.rb file

In the Sass directory to store our own style code, compiled will be automatically generated to the StyleSheets directory, of course, you can also customize the generated address

5. Configuring the Compass compilation Environment

Open Setting-Language & Framework There's a Compass underneath.

Tick Enable to set your own Ruby Comopass.bat path and the config.rb file path for the current project

6. Configuring the SASS Environment

Open setting Tools-filewatchers

Click on the green plus sign on the right side to add a Compass SCSS project, configured as follows

You should use the default configuration.

Working directory is the project directory where you just used compass create (I'm just the folder name is less don't misunderstand)

7. Start writing the Code

@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, after each change, will be automatically compiled, but will not automatically generate CSS files, you can build under the command line

The command is as follows:

Compass Compile

or force compilation of updates

Compass Compile--force

And then you look at stylesheets. A CSS file with a corresponding name

This code will be a lot of heap I am not on the code, including the reset style and your own style and comments are retained, because this is the development environment,

If it is a formal environment, it needs to be compressed

Next, change the configuration to go into the formal environment and compress the generated code into one line

Open the Config.rb file under the project root directory

Add two lines of code:

Environment =:d Evelopmentoutput_style = (Environment = =:p roduction)? : Compressed:: Expanded

The CSS file generated when environment is:P roduction will be compressed into one line.

All done, now start developing your own CSS quickly.

If you only need to use SCSS, in the 6th step you can create a new SCSS configuration, the following is the configuration

Here are some other references to the article address:

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/

Phpstorm installing SASS, SCSS + Compass