I want to include breakpoint into my web project. I have SASS, Compass and breakpoint installed and I followed the installation guide for it, but it still dosen't seem to work correctly. Can anyone walk me through here what the errors might be.
The following code is in my config.rb file (located in project directory, main folder)
require 'breakpoint'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
The following code is located in style.scss (project/sass folder)
#import "breakpoint";
etc scss code...
Here is the error I get from LiveReload:
File to import not found or unreadable: compass.
Syntax error: File to import not found or unreadable: compass.
Load path: /private/var/folders/ln/lp7d050s191cgjw1ck1gnq_h0000gn/T
on line 4 of project/sass/style.scss
Use --trace for backtrace.
Compass extensions tend not to work (or work well) when compiling with a GUI app (such as LiveReload or CodeKit). Instead of using LiveReload for compiling and reloading, just use it for reloading and run your compilation through the command line. You should also put your project under Bundler version control to ensure that the gems you want to use are absolutely available. If you are having load issues, it's because your compiler can't find the gem. Compiling through the command line under Bundler control will ensure the gem is available.
Related
I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)
I've inherited a project that uses Sass. I'm a 'NET developer so compiling CSS isn't really something ive had much exposure to. The previous developer told me (as I run on Windows and he runs on a MAC) to install prepros.
The steps I have run through are:
Installed Ruby 2.3.0 for Windows
Installed sass "gem istall sass"
Installed compass "gem install compass"
Installed sass-globbing "gem install sass-globbing"
Installed compass-install-once "gem install compass-install-once"
I then opened Prepros and dragged in my "static folder", which has a structure like so:
Static
css
js
sass
components (multiple files in this directory)
components.sass
screen.sass
screen.css looks like:
#import compass/reset
#import lubalin.css
#import variables
#import typography
#import main
#import components
#import elements
#import shop
#import blog
#import sponsor
#import theme
And the content of the screen.sass files looks like so:
#import "components/*"
In PrePros I changed the compiler to use Ruby Sass instead of Node Sass (on the advice of the previous developer).
Now, when I click on screen.sass in PrePros and click "Process file" I get the error message "Error: It's not clear wghich file to import for '#import "components/*"'.
I found some threads online that suggested that this was due to Windows, and that the wildcard should be changed to #import "components/.", however when I run with this command the error i get is "Error: File to import not found or unreadable: components/."
Strangely, the file that prepros creates i.e. seems to understand perfectly which files to import for components.sass because I can see in the file the following section:
{
"path": "sass/components.sass",
"imports": [
"sass/components/_address.sass",
"sass/components/_buttons.sass",
"sass/components/_checkboxes.sass",
"sass/components/_cookies.sass",
"sass/components/_emailSignup.sass",
"sass/components/_forms.sass",
"sass/components/_moreContent.sass",
"sass/components/_postCode.sass",
"sass/components/_rte.sass",
"sass/components/_search.sass",
"sass/components/_separator.sass",
"sass/components/_tooltip.sass",
"sass/components/accordion.sass",
"sass/components/equalHeight.sass",
"sass/components/grid.sass",
"sass/components/modal.sass",
"sass/components/svgImages.sass",
"sass/components/table.sass",
"sass/components/_checkboxes.sass"
]
},
So it seems strange that PrePros can tell which files to import, yet when I try to compile it doesn't understand!
Lastly, the contents of the compass (config.rb) is:
require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
Can anyone help a Sass newbie that;s out of their depth get PrePros up and running!? What am I doing wrong?
Thanks for your time in advance
dotdev
In my opinion, if you are a NET Developer you don't need PrePros, because you have Visual Studio good plugin-compilers. Try WebEssentials, it will do all the work for you. WebEssentials compiles SASS/SCSS files automatically when you save it.
I've installed Sass and set up a folder with an index.html file and style.scss in my local server (In Ubuntu 13.04).
I type this command into the terminal:
sass --watch style.scss:style.css
And get this output:
Sass is watching for changes. Press Ctrl-C to stop.
LoadError: cannot load such file -- rb-inotify
Use --trace for backtrace.
Sass will update the css the first time I save my .scss file but after that nothing. Anyone know why?
You need to install rb-inotify gem:
gem install rb-inotify
Its more of code editor issue. I faced this issue with brackets and once I switched to Atom (just to test) sass started writing on css file real time.
Tried with both sass --watch sass:css (Directory based watch) and sass --watch sass/app.sass:css/app.css (file based), and both worked fine.
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.
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.