I'm trying to use Twitter Bootstrap for SASS, but at the moment it's not integrated into a Rails project, and I don't I need the stuff I'd get from Compass. I (think I) want a Ruby script that will generate my CSS, JS and Font files and put them in the right places, but having spent a couple of hours going round in circles with the docs, I can't figure this out.
I have a directory like:
site/
css/
bootstrap_variables.scss
application.scss
site.scss
fonts/
index.html
js/
css/bootstrap_variables.scss contains my custom variations on Bootstrap's default variables.
css/site.scss contains the site-specific, non-Bootstrap, CSS.
css/application.scss looks something like this:
#import "bootstrap_variables.scss";
// Import Bootstrap modules I need, but not others.
#import "bootstrap/variables";
#import "bootstrap/mixins";
// ... etc
#import "site.scss"
I've installed the bootstrap-sass gem. And now I want a script that does:
Process css/application.scss with SASS and outputs css/application.css.
Put the Bootstrap JavaScript I need into a single file in js/. (How do I specify which JS modules I need?)
If I'm using Bootstrap's icons, put the glyphicons fonts in fonts/.
If this sounds like madness, and I'm going about this entirely wrong, feel free to tell me that too!
And now I want a script that does:
I'm not sure why you need this script at all. Cause if you can run the script you also can install sass and run sass css/application.scss css/application.css. You can install all bootstrap's file in your site folder by running bower install bootstrap-sass and then run the sass command with --load-path option which should point to your bower_components folder. You can also copy / or link the required javascripts and font from the bower_components folder.
Or consider to use Gulp or Grunt to set up your build chain.
But you can use Sass programmatically indeed.
Process css/application.scss with SASS and outputs css/application.css.
Your script.rb should look something like that shown below:
/usr/bin/env ruby
require 'sass'
require 'bootstrap-sass'
sass_engine = Sass::Engine.for_file('css/application.scss',{
:style => :compact,
:syntax => :scss
})
output = sass_engine.render
File.open("css/application.css", 'w+') {|f| f.write(output) }
Notice that you also should have to integrate the autoprefixer.
Put the Bootstrap JavaScript I need into a single file in js/
After installing the bootstrap-sass gem you can read the javascript files from the gem (see: How to find the path a Ruby Gem is installed at (i.e. Gem.lib_path c.f. Gem.bin_path)).
So the get the content of the affix plugin you can use:
file = File.new(Gem::Specification.find_by_name("bootstrap-sass").gem_dir + "/assets/javascripts/bootstrap/affix.js", "r")
You you can read the required script, concatenate their content, minify and copy
If I'm using Bootstrap's icons, put the glyphicons fonts in fonts/.
As above, copy them from Gem::Specification.find_by_name("bootstrap-sass").gem_dir + "/assets/fonts
Related
this is my dir structure
css/
sprites/_sprite.scss
scss/important.scss
scss/file1.scss
...
scss/file5.scss
scss/file6.scss
scss/file7.scss
scss/file8.scss
scss/file9.scss
scss/file10.scss
I want to be able to use
compass watch
to monitor changes to scss/important.scss file ONLY.
I know about
compass watch scss/important.scss
But I want to achieve the same just using a config file conf.rb so I can use compass like that
compass watch
Why I want to do this? Because I want to run compass via Guard. I know that in Guard I can watch certain files but it doesn't help me as compass always rebuilds all the scss files regardless of what Guard watches.
The reason I want to build only one scss file is because I use compass to generate PNG sprite and it takes 5 seconds for each scss where that sprite is imported. Way too long to use Guard with LiveReload (11 x 5s !!!).
prefixing the other SCSS files with "_" is not an option.
I just want compass to watch one file without having to specify this file as a command line argument
OK, I have two ideas maybe can help you.
move your sass files to another directory except for main.scss, name that directory whatever you want, for example: includes. Then put additional_import_paths = 'path/to/includes', leave sass_dir as it used to be. Finally in your main.scss import other files. Now, compass knows the dependencies for main.scss but won't compile those files because they stay in an independent directory.
But there's a littler issue left: how to compile them in production environment? Well, compass allows us to specify environment variable like environment = :production (and its default value is :development). With this help, you can write your sass_dir as sass_dir = (environment == :production) ? 'path/includes/main' : ['path/includes/main', 'path/includes/others'], and execute command: compass compile -e production at the final stage.
Write a bash alias like: alias mycompass="compass watch scss/main.scss", and you know it. use mycompass for your own work, leave compass as it should be.
What I eventually did was:
I run
compass watch scss/important.scss
in one console and
guard -i
in another console. I set up Guard to watch on CSS file cachanges and do LiveReload. I removed compass from my guard configuration. Now it all works as I expected except I have to keep two terminals open.
Iam trying SassyStudio für Visual Studio to compile the SASS in our project - but there area some issues.
The project is structured like this:
Solution
- Project 1
-- Areas
--- Area 1
---- Styles
----- style.scss
------ style.css
--- Area 2
---- Styles
----- style.scss
------ style.css
-- Styles
--- globalstyle.scss
---- glogalstyle.css
As you can see the scss files are scattered all around the project. The css Files should be compiled beside the scss files. Since there are compass references within the scss files there are dependencies to compass.
Mindscape Web Workbench is not designed to work like this.
I installed Ruby + gem sass + gem compass and
sass --watch C:/compasstest:C:/compasstest --compass
works well. But I dont like to start a batch everytime I start developing.
So I found SassyStudio an it pretty looks like what I need. But there are some issues with the compass references. In the options I entered "C:\Program Files (x86)\Ruby193\bin" to Ruby Install Path and "C:\compass" to the Include Paths property. The Compass Folder contains for example the "compass/css3" structure from github.
12:00:52.447 : Failed to compile css.
[SassCompileException]c:\compass/compass/css3/shared:1: error: file to import not found or unreadable: "compass/support"
at NSass.SassCompiler.CompileFile(String inputPath, OutputStyle outputStyle, Boolean sourceComments, IEnumerable`1 additionalIncludePaths)
at SassyStudio.Integration.LibSass.NSassDocumentCompiler.Compile(FileInfo source, FileInfo output)
at SassyStudio.Editor.GenerateCssOnSave.GenerateCss(DateTime time, String path)
12:00:52.447 : Compile complete.
What exactly is Ruby Install Path for?
Do I need the config.rb even if I dont want so specifiy specifiy sass and css folder?
How can I tell SassyStudio to find the file compass/support (It already found compass/shared as we can see)?
OK, so the sass --compass is new to me, so I don't know if I can comment on that.
Here is what you want to do.
First, change your ruby path to this C:\Program Files (x86)\Ruby193 as you don't need the bin directory in there (and not sure if it would cause issue or not).
Next, for me to detect that you are using compass (vs sass gem), I look for the config.rb file, and I believe that compass requires this to work as well, but not exactly sure on that. For me though, I definitely need it.
Now, what happens when you save a file is that I go looking for that config.rb from the current directory upward, so I believe that you can achieve what you are wanting to do through the use of multiple compass.rb files. So, that means if you put one in Area 1, one in Area 2, and one in Styles, I think it will work (but I've never tried).
I'm a bit unfamiliar with the syntax of compass.rb but I'm sure you will be able to figure out something that works there. That file may need to go into the Styles folder instead of root folders, I don't remember for sure (I think styles is perhaps configured in config.rb).
Let me know if you need anymore help.
Is it possible to use singularitygs in sass format rather than SCSS format?
Both singularitygs and breakpoint seems to come with only SCSS format files. If I manually convert the provided files to sass format, will that work?
I tried setting default format to sass in the config.rb file but that just seems to cause errors when starting to watch.
In Compass projects, you can interchange .sass and .scss files in the same project. Import them normally and you'll be OK.
That being said, as of this writing, both require custom Ruby functionality so in order to actually use either Breakpoint or Singularity, you need to be using them as Compass extensions as prescribed in their respective README files.
I used a switch --syntax sass to format a project in sass rather than SCSS:
compass create {project name} -r singularitygs --using singularitygs --syntax sass
SCSS and sass format can be mixed in different files but the watch function will not automatically compile the other format. For instance, if you set the default format to sass then any save to SCSS files will not be automatically processed.
The main reason I was getting the errors were from trying to install extension for compass.app. I am not sure what I am doing wrong but just copying singularitygs and breakpoint to the compass.app extension folder creates error on compass.app as well as the compass command line execution.
A while ago I was using compass to generate stylesheets from sass for a project.
Recently I returned to that project. I went to my sass directory and did "compass watch --debug .:."
This generated the error "You must compile individual stylesheets from the project directory".
I discovered that there was no config.rb in the directory. So I recreated one. It looks like this:
http_path = "/"
css_dir = "/css"
sass_dir = "/css"
images_dir = "/img"
javascripts_dir = "/js"
preferred_syntax = :sass
However, all of my attempts to use compass result in the same error, no matter what values I put in the config.
How do I get compass to actually process my sass?
just came across this problem too, and it has already been answered in the comment by Arnaud Valle.
But just for clarity, and people later searching.
Just creating a config.rb will not work, as compass does not recognise it.
The answer is just switch to your project directory(root) and then run
compass init
This will then create you a "working" config.rb, and two directories called sass, and stylesheets, in the sass directory will be a couple of start scss files.
If you do not want them, or want to use different directories, you can of course now edit your freshly created and working config.rb, and change your directories (and then delete the old automatically created ones)
Oh and i suspect your js will not be in a folder javascripts, so edit that to in the config.rb
Anyway having done that(or not) you should then be able to run
compass watch
and all should be good , i.e. your scss files get compiled to css files
As an alternative that I have not tried, but theoretically
compass compile [path/to/scss]
should work too, if you don't want to init compass
More information to be found in the compass documentation here
and to go completely over the top, if this is something you find yourself doing often, and hate the defaults then edit/add the following to your ~/.bash_profile
alias compass_init="compass init --syntax=sass --css-dir=css --javascripts-dir=js"
I usually have my config.rb in my project directory (or root) rather than the sass directory.
Folder structure would be like this:
config.rb
--- css
--- sass
Also your css_dir and sass_dir have the same value, which could lead to your issue as well.
Remove the "/" in front of your directory names.
This error occurs when your source path is incorrect. In your case, your directories have an extra "/". Removing them should fix your problem.
As others have said, creating a config.rb with compass init will fix it too.
Note that Config.rb is not necessary when using Grunt or similar runners that run compass. That might be how your project was running before without the config.rb file. The runner starts compass with all the paths and options in Gruntfile.js. Having paths/options in both Gruntfile and config.rb might cause problems.
Had this problem on windows 7 using Symfony with Gulp, i solved it using absolute paths like this:
gulp.task('compass', function() {
gulp.src('c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass/*.scss')
.pipe(compass({
config_file: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/config.rb',
css: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/stylesheets',
sass: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass'
}))
.pipe(gulp.dest('c:/wamp/www/mnv/web/css'));
});
For anyone looking to compile SCSS without making a whole project (e.g., for a one-off page), you can just create a config.rb, but it needs at least two parameters: css_dir and sass_dir. (touch-ing it is not enough).
A minimal config.rb:
css_dir='.';sass_dir='.'
This effectively creates a compass project for the purpose of compiling simple files. You'll have to include the rest of the params if you want to use sprites, etc. Assuming compass can write to the directory, it'll create the .sass-cache directory once you run compass compile or compass watch for the first time.
It's also important to note that compass commands must be run from the directory with config.rb, or you'll get this error.
Finally, if you just want to take advantage of simple SASS features (and not Compass framework components), straight SASS is often simpler:
sass --watch foo.scss:foo.css
I experienced the same problem using gulp-compass-compile. Fixed that by changing srcDir option (that converts to --sass-dir option in compass compile call) for compass function from ./src/scss to src/scss. Hope that helps someone.
I created a project using yo webapp (with the generator-webapp installed obviously).
Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.
I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously #import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass #imports specified inside Gruntfile.js) there's no compass directory.
What should I do now in order to import Compass stylesheets?
You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.
#import "compass/css3";
.mybox {
#include box-shadow(red 2px 2px 10px);
}
main.scss
You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.
It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.
The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.