IT:AD:CSS/Compass:HowTo:Configure a new Project
Process
As Ruby is in the PATH (see Install, open a command prompt, and get to know the compass command:
compass /h
Create a project
compass create <prj>\Client
This creates a set of dirs and files:
\<projname>
\sass-cache\
note: will fill up with a whole bunch of guid folders containing compass.
\sass\
ie.scss
print.scss
screen.scss
\stylesheets\
ie.css
print.css
screen.css
config.rb
Configure it:
The config.rb file is what the configure watch command will be looking at later.
Open the config.rb and edit it if you want to change default settings:
# Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment: # relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: # line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing --syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
Add Compass outputs to your app.
When you used the create function from the command line, you saw it recommend you add the following to your page head:
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css"/> <!--[if IE]> <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" /> <![endif]-->
Do so.
And at the same time, add
<link href="Compass/stylesheets/app.css" rel="stylesheet" type="text/css" />
that points back to an app.scss that you create in the SCSS folder, containing references to Compass. The following will be enough to prove Compass is working.
$bgColor:red;
@import "compass";
.box-shadow-example div {
width: 40px;
height: 40px;
background: #eeeeee;
margin: 20px;
float: left; }
#box-shadow-default {@include single-box-shadow; }
#box-shadow-custom {@include box-shadow(red 2px 2px 10px); }
#box-shadow-custom-multiple
{
@include box-shadow(rgba(blue, 0.4) 0 0 25px, rgba(pink, 1) 0 0 3px 1px inset);
}
.test {
.nested {
background-color:$bgColor;
}
}
Refer back to it from html:
<!DOCTYPE HTML>
<html>
<head>
<link href="Client/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="Client/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="Client/stylesheets/app.css" rel="stylesheet" type="text/css"/>
<head>
<body>
Hi...
<callout icon="true" type="class='box-shadow-example'>
<div id='box-shadow-default'"></callout>
<callout icon="true" type="id='box-shadow-custom'"></callout>
<callout icon="true" type="id='box-shadow-custom-multiple'"></callout>
</div>
</body>
</html>
Watching
Whereas SASS watches a file, Compass watches a project folder, and its contents:
compass watch c:\testproj\