Guides
Tutorials
Pop Tags

Sass & Compass

Author smarter stylesheets with Sass.

Webpop can compile Sass files, both the .scss and .sass syntax are supported.

Simply save a Sass file, like style.scss, and it will automatically be compiled into a file called style.css in the same folder.

Be careful! Don't save a Sass file with the same name & in the same folder as an existing CSS file. It will override it!

Sass is a really powerful way to author CSS, it gives you variables, nesting, mixins and lots of other goodies to author smarter stylesheets. Learn more about it at sass-lang.com.

Sass Partials

Sass files with an "_" at the beginning of their filename are considered partials and are not compiled into .css files directly. They must be imported by a regular Sass file and get compiled whenever the file which imports it gets saved.

Partials are useful for organizing you css into logical components. Check out foundation.scss for an example of how partials can be used to structure a complex css architecture.

Compass

Webpop also supports Compass, the Sass based CSS authoring framework. It provides many useful utilities and mixins for CSS3, typography and other common web patterns.

To use Compass, simply import it at the top of a .scss files like so:

@import "compass";