SASS Compiler for Bourbon - css

Is there another compiler besides using the Command Prompt to compile Bourbon files?
Basically, I am using Koala as my SASS Compiler and I would like to try out using Bourbon with it and when I tried to import the bourbon into my SASS file and compile that file, it threw this error:Error: File to import not found or unreadable: bourbon..
Is there any other way I could solve this by using another compiler? It can be quite frustrating to compile the file every time using command prompt when I resume my work everyday.

Bourbon imports just like any other sass files. Double check your import code, and make sure you're linking directly to it (use the extension if you have to). Make sure you're actually putting the bourbon files into your sass directory. Then drill down and set your import path to the exact location of bourbon.scss.
I've used Codekit in the past, and it worked perfectly. You don't even have to install the bourbon files in your project.

Related

sass/bulma error : Error: File to import not found or unreadable: utilities/mixins.sass

]I am trying to compile a css file from sass. I am using bulma (bulma.io) as the css framework. Here is the directory structure I have
I am trying to change the grid.sass to output.css
and I am running this command from the "bulma" dir
sass grid.sass output.css
but I get the following error
Error: File to import not found or unreadable: utilities/mixins.sass.
on line 1 of grid.sass
Use --trace for backtrace.
I don't know why this error is appearing. I am running this according the documentation. I am on CentOs machine, and have gem installed.
[root#foo bulma]# sass -v
Sass 3.4.23 (Selective Steve)
I'm not too familiar with the sass gem, however according to their docs, you would not use quotes and add semicolons. So I assume something like:
#import utilities/mixins;
Import - Sass Docs
You might also need to rename your grid file to have an underscore, as mentioned in their docs as well.
I was getting similar error in when I was using bulma-extensions. To fix it, I had to update the import statement from
#import 'bulma/sass/utilities/_all.sass'
to this.
#import '../../bulma/sass/utilities/_all.sass'
Note: I installed sass-loader and node-sass in vue-cli generated project.

"compass watch" compiles one file and not another

I have a set of SASS files and I use Compass as my pre-processor. I run compass watch in the MacOSX Terminal.
My files are structured so that all of my code gets compiled twice... once with media queries in mq.css and once without in no-mq.css. The non-media query code is meant for IE8 and browsers that won't recognize media queries.
When I make a change to any of my files, my mq.css gets compiled but very seldom does the no-mq.css. If I compass clean and then manually compass compile they both will. If I run only compass compile without a clean first, only the mq.css compiles. I can run watch all day and my mq.css will continue to get compiled.
I've upgraded, downgraded, and generally played with combinations of SASS and Compass. I am not using Susy or another SASS-related library. I do have SASS maps turned on.
My SCSS starter package can be reviewed here: https://github.com/jhogue/scss-scaffold in case I am missing something in config.rb or /sass/framework/_config.scss.
My gems are as follows:
compass (1.0.3)
compass-core (1.0.3)
compass-import-once (1.0.5, 1.0.4)
css_parser (1.3.5)
fssm (0.2.10)
libxml-ruby (2.6.0)
listen (1.1.6, 0.7.3)
sass (3.4.7)
Its not as critical as it is annoying, and I'd like to know if anyone else has encountered this or a similar issue.
I've had the same problem several times in the past, and have found it often occurs when I have partials inside of subdirectories. Calling add_import_path in the config.rb file for each subdirectory has usually fixed it:
// config.rb
add_import_path "sass/framework"
Of course a compass clean before watching/compiling is in order as well.

Compiler for SASS

I just started using SASS in my project and I want a script to compile them and convert them to CSS files. Im planning to run this script only when I build.
I installed SASS in my system and SASS --watch doesn't seem to be the right approach here; as I told, I want a script that runs only when I build. I used to have one such script for LESS compiling, but couldn't find any for SASS.
Does anyone know of any such scripts?
Looking at the documentation, just run sass from the command line as part of your build script. An example for a one time use on a single file:
sass input.scss output.css
link:
From the command line, you can just do sass --update for a one-time compile from Sass to CSS. This will use whatever settings already exist in config.rb.

Sass not compiling in textmate

I'm trying to use SASS for the first time with textmate. I seem to have installed it correctly by following the instructions on the git page - https://github.com/MarioRicalde/SCSS.tmbundle
but I can't find any information on how I can now use it.
When I make a .sass file the new Sass syntax is highlighted but when I save it is not compiled. Am I missing something?
Make sure to open up Terminal and in the command line, navigate to your project folder and run this command:
sass --watch style.scss:style.css
Name your working file style.scss, and it will compile and generate and update the style.css file that you reference in your document head.
Also make sure you have installed the Sass gem within your project directory :)
gem install sass
UPDATE
The bundle is only for installing syntax highlighting in Textmate. Sass is a precompiler for CSS, so it generates CSS from what you write in Sass. This is done through the sass --watch command above in the command line.
Read more on how to use and install Sass.

Foundation 4 sass --watch issue

Brand spanking new to foundation 4,
I've installed all dependancies, compass, sass, and zurb-foundation.
ran compass create testproject -r zurb-foundation --using foundation --syntax sass
... worked fine.
ran sass --watch sass:css in the testproject directory and I keep getting errors like so...
error /Users/figmints/Sites/testssss/sass/app.sass (Line 5: File to import not found or unreadable: normalize.
Load paths:
/Users/system/Sites/testproject
/Users/system/Sites/testproject/sass)
In the config.rb, the first line is require 'zurb-foundation'
Isn't this supposed to make the file normalize.scss visible to the project so that I do not have to copy each file located in my gems folder?
Could anyone direct me towards my mistake, please?
Thanks,
Seth
As far as I know, there's no sass watch. What you need to do is:
Navigate to your project's root folder (which is where your Compass project's config.rb should be) through your terminal
Type compass watch and hit Enter
See the magic happen (if you have nicely configured your config.rb, that is)
A Compass project should be watched by Compass. The watch function is why—IMO—Compass is so nice: it does something Sass naturally doesn't do.
Have you tried compiling using compass watch in your testproject root directory, instead of compiling with Sass? Because you created your project with Compass, so you should use Compass to compile.

Resources