bourbon

When I run sass --watch app.sass:app.css terminal shows that changes have been detected to sass but won't compile to css. I am using Bourbon so all my .scss and .sass files are imported via mixins. ex. >>> Sass is watching for changes. Press Ctrl-C to stop. >>> Change detected to: css/2-modules/top-nav.scss iamlukem Make sure the file you are saving with an _filename.scss has been properly imported into the mainfile.scss . if you have not imported the _filename.scss it will detect a change but not compile. I had the same issue! In my case, it was caused by having several @imports listed like

bourbon uses font-url here . Rails has the method font_url which I'm fairly certain is what is being invoked. However, I can't find where the connection between these two things is made. I have explored the codebases of bourbon, sass, sass-rais, and rails. Where is font-url defined, and/or the connection between it and rails's font_url made? update Clarification: my ultimate goal is to define my own helpers in rubyland which are siblings to font_url. font-url is a part of rails asset pipeline just like image-url . If you look at rail guides it clearly says When using the asset pipeline, paths

I was looking for the best solution on how to re-order/shift the position of columns at different breakpoints using Thoughtbot's Neat grid framework? I would like to shift elements in my header from this ( in desktop resolution): to this ( in mobile resolution): My HTML looks like this: <header> <section id='header_elements'> <p id="chocolat_logo"><strong><a href="#"><img alt="Chocolat Restaurant Logo" itemprop="logo" src="/assets/main_logo.png" /></a></strong></p> <nav> <ul> <li id='home_link'> Home </li> <li id='menus_link'> <a href="/menus/evening" itemprop="menu">Menus</a> </li> <li id=

I've been using bourbon neat to do a desktop first layout that worked fine. However, I would like to do a mobile first versions, starting with mobile and working my way up. The default grid is 12 columns and for mobile I usually use a grid of 4. I tried changine my grid to 4 and scaling up to 12 but this didn't work. Is there a better way to do mobile first other than creating the standard desktop layout, then putting a mobile media query into each CSS selector and starting with the mobile version and building up the way? You should create new breakpoints with the new-breakpoint mixin from

ERROR in ./node_modules/css-loader? {"sourceMap":false,"importLoaders":1}!./node_modules/postcss- loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass- loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths": []}!./src/styles.scss Module build failed: var path = require('path'); ^ Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require(" in /home/dada/AngularProjects/playground2/node_modules/bourbon/index.js (line 1, column 1) Hello... I'm trying to use bourbon in my Angular 2 project but when I install the package and try to import bourbon

I want to serve different fonts to different browsers (see this question ). Is there a slick way to do this with Sass/Bourbon? Here's what I have so far: <!--[if IE]> --> @include font-face("myicons", "myicons", $weight: normal, $style: normal, $asset-pipeline: false); <![endif]--> <!--[if !IE]> --> @include font-face("myicons", "myicons", $weight: normal, $style: normal, $asset-pipeline: true); <![endif]--> This problem it's outside the sass scope, because is just a pre processor, and doesn't have a clue about the browser. Also is outside css scope deciding conditions for different browsers.

I am attempting to start using Bourbon and Neat Sass libraries in my project. I want to compile Sass with Gulp. This is a simple styles task setup that I've found in one of the tutorials: var gulp = require('gulp'), sass = require('gulp-sass'), neat = require('node-neat').includePaths; var paths = { scss: './assets/styles/*.scss' }; gulp.task('styles', function () { return gulp.src(paths.scss) .pipe(sass({ includePaths: ['styles'].concat(neat) })) .pipe(gulp.dest('./dist/styles')); }); gulp.task('default', function () { gulp.start('styles'); }); Then in the main .scss file I place the imports: