I'd like to use Sass with Compass on my static HTML project, but following the instructions does not work. This is what I did:
$ gem install compass
$ cd <myproject>
$ compass install compass .
which was following by awaiting:
directory ./sass/
directory ./stylesheets/
create ./sass/screen.scss
create ./sass/print.scss
create ./sass/ie.scss
create ./stylesheets/screen.css
create ./stylesheets/ie.css
create ./stylesheets/print.css
But when I start watching scss sass --watch sass:stylesheets, I get an error:
error sass/screen.scss (Line 6: File to import not found or unreadable: compass/reset.
This msg coherent with #import "compass/reset";
What do I have to do on my Ubuntu to see that compass imports?
Use compass watch instead of sass --watch sass:stylesheets. If you're using compass, you don't need to bother with sass command. Just use the compass command.
if you really wanted to use sass command i use this code. Considering that you are in your sass directory running the following command.
sass --watch style.scss:../stylesheets/
That simply means that I have created a new file called style.scss and imported the following files within my style.scss. So sass would only watch a single file. In the above command we wishes to have the generated style.css to be in the stylesheet directory.
again its sass --watch style.scss:/path-to-output-directory/
#import "ie";
#import "print";
#import "screen";
so in this process sass is only watching single file style.scss for any changes within sass directory files.
I hope this explains well.
Related
I have been struggling with gulp to compile scss files into css.
I havn't used gulp and sass very much and the docs of this particular framework are not helpful on this matter.
My gulpfile looks like this
var gulp = require('gulp');
var sass = require('gulp-sass');
var scssFile='assets/scss/bootstrap-material-design.scss';
gulp.task('sass', function () {
return gulp.src(scssFile)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('_site/assets/css'));
});
I did npm install gulp gulp-sass --save-dev to install libraries.
And I copied the content of this folder https://github.com/FezVrasta/bootstrap-material-design/tree/master/scss into a folder named "scss"
Now running gulp sass gives me this error:
[13:54:37] Using gulpfile ~/workspace/imb4/gulpfile.js
[13:54:37] Starting 'sass'...
Error in plugin "sass"
Message:
assets/scss/_variables.scss
Error: File to import not found or unreadable: ~bootstrap/scss/functions.
on line 56 of assets/scss/_variables.scss
from line 2 of assets/scss/_core.scss
from line 3 of assets/scss/bootstrap-material-design.scss
>> #import "~bootstrap/scss/functions"; // from bootstrap node_module
^
[13:54:37] Finished 'sass' after 50 ms
Is this because I copied the wrong scss folder ?
Do I need to npm install bootstrap-material-design#4.1.1?
(I did try that, but I can't require() it because it needs jQuery or something.)
Do I need to reference the scss files that are in the node_modules?
The error says it needs a bootstrap folder, do I need to download bootstrap scss files manually and copy them in the folder? Do I have to do npm install bootstrap?
It's probably a stupid question, but I'm already stuck on this for hours now.
Clone the folder in the link as is to your assets/scss
Your gulpfile should call your main entry sass file style.scss - in your case "bootstrap-material-design.scss"
this sass file contains only one import - #import "core";
_core imports _variables.scss, _mixins.scss etc...
your _variables.scss file has
#import "~bootstrap/scss/functions"; // from bootstrap node_module
#import "~bootstrap/scss/variables"; // from bootstrap node_module
So its looking for a node_modules/bootstrap folder,
npm install bootstrap
will add it.
when you run your gulp task and the sass starts compiling it needs the full bootstrap files located in node_modules/bootstrap/scss/ folder to compile correctly.
your "bootstrap-material-design.scss" will first import _core, _core will then import _variables, _variables imports a few custom files from another variables folder within the scss directory before looking at your node_modules folder (on line 56) with #import "~bootstrap/scss/functions";
your gulp task will pick up your sass files references (anything with an underscore is compiled at build time) - That spits out a plain css file where ever you set the destination to be eg "assets/css/style.css" which is the file you should reference in your html after build.
if this is still not happening for you you may just have a simple path issue to resolve. bootstrap versions can differ on sass fodler structure so double check your path in node_modules/bootstrap/scss/ actually has a functions folder.
If it does try #import "./node_modules/bootstrap/functions";
If it does not then you may need to check your version of bootstrap.
Eg - with bootstrap 4.1.1 they are imports not folders
#import '~bootstrap/scss/_functions';
#import '~bootstrap/scss/_variables';
I simply want to compile the whole directory with .scss files like it is in docs but I get an error, what am I doing wrong?
The command is: sass scss:public/main.css but I get this error:
Errno: EISDIR: Is a directory # rb_sysopen scss Use --trace for backtrace
The Sass documentation shows no such usage for compiling with the sass command. You cannot compile a directory to a single file.
You can also tell Sass to watch the file and update the CSS every time
the Sass file changes:
sass --watch input.scss:output.css
If you have a directory with many Sass files, you can also tell Sass
to watch the entire directory:
sass --watch app/sass:public/stylesheets
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass
I tried:
sass-convert --from scss --to css --recursive app/assets/stylesheets temp
But this only converts css to SASS, and I want the other way around.
Then I looked at the sass command, but it doesn't look like I can pass it a directory.
To do a one-time Sass compile instead of a watch, you can do this from the command line:
sass --update scss:css
To have Sass import one file (usually a partial, with a _ starting the filename), you can do this inside a Sass file:
#import "_base.scss";
This way, Sass knows where you want the include to occur.
By default, Sass can't import an entire directory. The Sass Globbing gem, however, can. You can install it from the command line:
gem install sass-globbing
And then watch with it:
sass -r sass-globbing --watch sass_dir:css_dir
Note that globbing will import files alphabetically, so be sure your CSS will cascade appropriately if this occurs.
Use the sass command followed by the input file name and path, a colon (:) and the desired output file name and path. If the output file does not already exist Sass will generate it. For example,
sass sass/main.scss:css/main.css
However, this is a one-off command that would require being run every time you want to generate a new CSS file. A simpler and handier method is to use Sass's built-in --watch flag. This watches for changes to your Sass file and automatically runs the compile command each time you save changes.
sass --watch sass/main.scss:css/main.css
If you have multiple Sass files within a directory you can watch for changes to any file within that directory:
sass --watch sass:css
Sass also has four CSS output styles available: nested, expanded, compact and compressed. These can be used thus:
sass --watch sass:css --style compressed
Refer to the Sass documentation for more.
to that, simply go your project directory and do this :
sass --update sass-dir:assets/css
with sass-dir the directory containing your actual sass files and assets/css the desired output directory.
Hope this could help.
You can use compass to convert Sass files into CSS.
To initialize the config.rb, try:
compass init --syntax=sass --css-dir=css --javascripts-dir=js
Once you've the configuration file, try:
compass compile
or by specifying the file explicitly: compass compile sass/foo.scss.
To install it, try:
sudo gem update
sudo gem install sass compass
https://sass-lang.com/guide
you can use
sass --watch [input folder path]:[output folder path]
i tried running it in a new terminal and after that sass watches the folder and compiles upon any changes.
you can use this code
sass --watch file.sass:file.css
or
sass --watch folderSass:foldercss
if you want to create css.main you can use this code
sass --watch sass:css --style compressed
I have a burbon running on code kit. It is not problem, I cant get neat running?
when i put
#import "neat";
I get this error
Syntax error: File to import not found or unreadable: neat.
Load paths:
/
/Applications/CodeKit.app/Contents/Resources/engines/bourbon/bourbon/app/assets/stylesheets
on line 13 of /Applications/MAMP/htdocs/dev.wordpress/wp-content/themes/blankslate/style.scss
Use --trace for backtrace.
Since CodeKit version 1.8, Neat is built in. You don't need to install anything, just write this in your SASS/SCSS file:
#import "bourbon", "neat";
Make sure your 'Neat' folder is inside your stylesheets folder and use #import "neat/neat";
directory example:
[sitename] > [assets] > [css] > styles.css, [sass] > _main.sass, styles.sass, [neat]
Neat is a framework on top of Bourbon, so it does not automaticaly come with Bourbon.
Install Neat as following.
In Terminal:
gem install neat
Then cd to your Sass directory and run:
neat install
In your Sass file:
#import "neat/neat";
You also need to do:
#import "bourbon/bourbon";
before:
#import "neat/neat";
so your final scss file should start with(in the same order):
#import "bourbon/bourbon";
#import "neat/neat";
Is there a way to force Compass to use the Sass syntax instead of SCSS?
For new projects, run:
compass create path/to/project --syntax sass
to generate .sass files using Sass syntax inside the sass folder. The --syntax option and others are listed when you run compass --help.
For existing projects, add the following to your Compass config.rb:
preferred_syntax = :sass
That's covered in the Compass configuration reference. And you'll want to run your existing SCSS files through sass-convert to generate new ones which use Sass syntax.