Django-Bower + Foundation 5 + SASS, How to Configure

Django-Bower + Foundation 5 + SASS, How to configure?

SOLUTION WITHOUT PYCHARM WATCHER

Not using pycharm watcher.
django-compressor to compile scss files including compass.
django-bower

This is an example of "how to compile scss files" with django-compressor:

appName/static/scss/app.scss:

@import "../../../components/bower_components/foundation/scss/foundation";
@import "compass";

/* other stuff*/

settings.py:

STATICFILES_FINDERS = (
    .....
    'compressor.finders.CompressorFinder',

)

COMPRESS_PRECOMPILERS = (
    ('text/x-sass', 'sass --compass "{infile}" "{outfile}"'),
    ('text/x-scss', 'sass --scss --compass "{infile}" "{outfile}"'),
)

COMPRESS_URL = '/static/'

template.html:

{% load static %}
{% load compress %}

<head>
    {% compress css %}
        <link href="{% static 'scss/app.scss' %}" media="screen, projection" rel="stylesheet" type="text/x-scss" />
    {% endcompress %}

</head>

Hope this help you.

EDIT

Maybe this is a better config to use @import without relatives paths.
-I arg:

PROJECT_PATH = os.path.abspath(os.path.dirname(__file__))
BOWER_COMPONENTS_ROOT = os.path.join(PROJECT_PATH, "../components/")
COMPRESS_PRECOMPILERS = (
        ('text/x-sass', 'sass --compass "{infile}" "{outfile}"'),
        ('text/x-scss', 'sass --scss --compass -I "%s/bower_components/foundation/scss" "{infile}" "{outfile}"' % BOWER_COMPONENTS_ROOT),
    )

Now app.scss:

@import "foundation";
@import "compass";

USING PYCHARM WATCHER

Lately I'm appreciating pycharm watcher

Install django-bower
Add a SCSS Watcher from pycharm preferences
In the edit of watcher, into 'Arguments' field I set:
--compass -I "/$ProjectFileDir$/components/bower_components/foundation/scss" --no-cache --update $FileName$:$FileNameWithoutExtension$.css

So, in the scss file:

@import "foundation";
@import "compass";

How to integrate Foundation 5 in django

My solution is use django-bower... that's all!

How do I use SASS/SCSS with Django Zurb Foundation?

I'm no expert, but this is what I did.

i installed compass and zurb-foundation.
a.) gem install compass,
b.) gem install zurb-foundation
then make sure you're inside your file before you type:
a.) compass create [folder] -r zurb-foundation --using foundation

(this will download all the foundation file to the folder.)
then cd to your folder where you intend to put your sass.
lastly: sass --watch sass:css (this just means sass watch the folder "sass" and any changes inside of "sass" make the changes in css)

Hopefully that helps. I didn't encounter any error with template. It was quite automatic with Django.

including foundation with sass in a django project

I have heard of a few people using django-bower with foundation, personally I have not played with it but its worth looking into if you have not already.

How to ensure the foundation-apps _settings.scss file isn't overwritten when I run 'bower update foundation-apps'

You're supposed to copy the _settings.scss file out of the bower_components directory and into your project's scss folder so that it does not get overwritten when you update. It's the only file you need to do that with.

From the Foundation for Apps Sass Documentation

The Settings File

All Foundatiion projects include a settings file, named _settings.scss. If you're using the CLI to create a Foundation for Apps project, you can find the settings file under client/assets/scss/. If you're installing the framework standalone using Bower or npm, there's a settings file included in those packages, which you can move into your own Sass files to work with.

Correct Way to customize zurb foundation 6 with bower

You definitely want to copy the settings file out of the bower_components directory. Then you should add bower_components/foundation-sites/scss to your import paths where you compile the SCSS and that will take care of the utils issue. The import path needs to be in the options object inside of the gulp-sass pipe like so:

gulp.task('sass', () => {

    gulp.src('./app/sass/app.scss')
    .pipe(sass({
        includePaths: ['bower_components/foundation-sites/scss']
    }).on('error', sass.logError))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./app'))
})

When you use the includePaths option, imports will check for files relative to the current directory, followed by files relative to the directories in the includePaths array. @import util/util works after adding bower_components/foundation-sites/scss to the includePaths because the full path is bower_components/foundation-sites/scss/util/_util.scss.

RuntimeError when building CSS from SCSS files of Foundation-sites with Django-pipeline

I managed to solve the problem above which was caused by me forgetting to consider the hierarchy of folders in app.scss (when importing foundation). By putting this file in /static with the downloaded foundation-sites and setting its content like below, I managed to make it work:

@import 'foundation-sites/scss/settings/_settings.scss';
@import 'foundation-sites/scss/foundation.scss';

@include foundation-everything;

Making a Zurb Foundation theme for Mezzanine (django-compressor + SASS integration)

Found it! I had to use --include-path for the node-sass module.

COMPRESS_PRECOMPILERS = (
    ('text/x-scss', 'node-sass --scss  --include-path ./node_modules/foundation-sites/scss/ --include-path ./node_modules/motion-ui {infile} {outfile}'),
)

Django-Bower + Foundation 5 + SASS, How to Configure