Compile compressed & uncompressed CSS

1,149 views
Skip to first unread message

Seth

unread,
Mar 7, 2013, 7:52:48 AM3/7/13
to sass...@googlegroups.com
Is there a way to compile two versions of CSS? I would like to keep my comments in order to track down styles in our dev and test environments and compressed for production. Right now we edit the config file and change the output settings over and over.

rober...@gmail.com

unread,
Mar 7, 2013, 8:19:23 AM3/7/13
to sass...@googlegroups.com
-t, --style NAME                 Output style. Can be nested (default), compact, compressed, or expanded.
Type "sass watch --help" or "sass create --help" for more options.

Seth

unread,
Mar 7, 2013, 10:59:29 AM3/7/13
to sass...@googlegroups.com
I understand there are different formats. What I am wondering is if you can have sass compile both a uncompressed and compressed version of css at the same time. This way I can deploy development and production in parallel.

Chris Eppstein

unread,
Mar 7, 2013, 2:56:38 PM3/7/13
to sass...@googlegroups.com
You will need to run the compilation twice and do a move/rename to avoid the files being overwritten ont the second run. Or you can set the --css-dir option to output to different directories for each compilation run.

chris


--
You received this message because you are subscribed to the Google Groups "Sass" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sass-lang+...@googlegroups.com.
To post to this group, send email to sass...@googlegroups.com.
Visit this group at http://groups.google.com/group/sass-lang?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

rober...@gmail.com

unread,
Mar 7, 2013, 3:01:45 PM3/7/13
to sass...@googlegroups.com
"-t, --style NAME" is a parameter you can specify on "sass create" and "sass watch". Why can't you have 2 command windows open with the same [INPUT] parameter, and different [OUTPUT] and --style parameters specified on "sass watch"?
They both watch the same set of *scss files, but compile to a different location.

rober...@gmail.com

unread,
Mar 7, 2013, 3:54:55 PM3/7/13
to sass...@googlegroups.com
I do this when I start a new project :

I create a new project with "sass create" or "compass create" with a project folder name ending in -dev.
This is for development.
I setup everything in this development folder, that's also necessary in production (images, etc).
Then I copy the development folder under a different project folder name ending in -prod, for production.
I delete the sass folder and .sass-cache folder from the production project folder.
I add anything else to the development folder that's unique to development.
The same for the production folder.

Then I open 2 cmd-windows with admin privileges.

And enter the following 2 commands in the window for development (or a *.bat script with parameters) :
cd c:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-DEV

sass --watch -E UTF-8 C:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-DEV\sass\app.scss:C:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-DEV\stylesheets\app.max.css --unix-newlines --style expanded --compass --line-comments --trace



And these commands in the other window for production :
cd c:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-PROD

sass --watch -E UTF-8 C:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-DEV\sass\app.scss:C:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-PROD\stylesheets\app.min.css --unix-newlines --style compressed --compass --trace

The parameters to the left of the [INPUT][OUTPUT] paths are for the input SCSS files. The ones on the right for the output CSS file.
(But you can specify them where you want.)

Works each time.


Sometimes I also have a -TEST project folder between the -DEV and -PROD folders. Then the 2 commands for -TEST become :
cd c:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-TEST

sass --watch -E UTF-8 C:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-DEV\sass\app.scss:C:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-TEST\stylesheets\app.min.css --unix-newlines --style compressed --compass --trace

And after a test cycle, the -PROD folder is once updated manually with these 2 commands :
cd c:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-PROD

sass --force --update -E UTF-8 C:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-TEST\sass\app.scss:C:\HOME\Projects-Foundation\Foundation-v3.2.5-Starter-PROD\stylesheets\app.min.css --unix-newlines --style compressed --compass --trace

rober...@gmail.com

unread,
Mar 7, 2013, 4:00:05 PM3/7/13
to sass...@googlegroups.com
I forgot to mention that with a -TEST project folder you also need to copy the sass folder from -DEV to -TEST.

Good luck with it.


On Thursday, March 7, 2013 1:52:48 PM UTC+1, Seth wrote:

Seth

unread,
Mar 7, 2013, 9:44:44 PM3/7/13
to sass...@googlegroups.com
Thanks everyone for your help. I will give this a try. I am using a gui for sass and am not a command line guru but this seems manageable. 
Reply all
Reply to author
Forward
0 new messages