I want to add Compass to my existing project.
I want to maintain my current project structure, which looks like this (simplified):
app/
build/
|-compass/
assets/
|-css/
|-scss
|-js/
|-img/
So I want all my SASS files under \assets\css\scss and I want to output the compiled CSS files to \assets\css.
Running:
compass create --bare --sass-dir "assets\css\scss" --css-dir "assets\css"
creates the Compass config.rb file directly under my root.
However, I want the file to be under \build\compass.
How can I control where Compass creates the config.rb file?
Compass documentation says that declarations in config.rb (e.g. css_dir, sass_dir, etc.) are all relative to the project_path. Where do I define the project_path?
Compass creates the config.rb in the same directory as where you ran the command from. The project path is where the config.rb resides. You're free to place config.rb wherever you like, as long as you adjust the paths for your assets.
This is an example of config.rb:
# Require any additional compass plugins here.
require 'compass/import-once/activate'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "../../assets/css"
sass_dir = "../../assets/css/scss"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
# Enable source map
sourcemap = true
And with this config.rb settings, your project folder should be like (as you wrote):
MyFolder
├ app
├ build
│ └ compass
│ └ config.rb
└ assets
├ css/
│ └ scss/
├ js
└ img
If you don't have a config.rb, simply create a new file "config.rb" and copy/paste inside the configuration i wrote.
Open your terminal, enter in MyFolder/build/compass and then start your compass command, like: compass watch
Remember
You have to execute your compass command in the same folder where is the config.rb file. So in this case in MyFolder/build/compass. Otherwise compass doesn't work.
I don't see why you'd structure a project like this...I mean why not put the scss in build and then everything in assets can be deployed for production?
So:
1.
Running (from "app" directory)
compass create build --http-pat="../" --sass-dir="compass/scss" --css-dir="../assets/css" --javascripts-dir="../assets/js" --images-dir="../assets/img"
will create the project folders and files as such:
app
|-- build
| |--config.rb
| |-- compass
| |-- scss
|-- assets
| |-- css
| |-- img
| |-- js
Again, from within app directory, running:
compass config "build/config.rb" --http-pat="../" --sass-dir="compass/scss" --css-dir="../assets/css" --javascripts-dir="../assets/js" --images-dir="../assets/img"
will simply create the build directory and place a configuration file with these values in it.
Related
I'm following a Kevin Powell bootstrap tutorial and he copies a custom.scss file into a separate folder, however I can't find that file to copy, not sure if it's because I'm using an updated version of bootstrap.
the bootstrap documentation says after install of bootstrap via npm i should have a folder structure like this:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
However, upon installing bootstrap into folder it's like this:
your-project/
└── node_modules/
└── bootstrap
├── js
└── scss
No scss folder apart from in bootstrap folder.
Do I need to create a "custom.scss" file ...?
No you don't need to do that, as you could compile your css directly from the bootstrap source files. However, I would only consider this method if you plan use bootstrap out-of-the-box with no customizations, now or in the future. If you choose not to create this file, then you should probably just use a CDN instead.
Should you create a "custom.scss" file?
Yes, this is where you modify bootstrap variables, or extend its components, etc.. You can also choose to import all of bootstrap, or just the parts you need in this file.
The documentation goes over what should be in that file. But you can get started with just the following:
// Custom.scss
// Option A: Include all of Bootstrap
#import "node_modules/bootstrap/scss/bootstrap";
I'm trying to create a website using Jekyll, and everything worked fine. Until I wanted to custom the design.
I've updated my css/main.scss in order to include my custom theme in _sass/theme.scss:
// Import partials from `sass_dir` (defaults to `_sass`)
#import
"base",
"layout",
"syntax-highlighting",
"theme"
;
I've also updated _config.yml, because jekyll serve -H 0.0.0.0 didn't compile my new sass file. I've added the following:
sass:
sass_dir: _sass
The problem is jekyll serve doesn't compile my sass files, I always see the default css. I've also tried to copy the content of _sass/theme.scss directly at the end of css/main.scss, but nothing happened.
Until I modified one of those files while jekyll serve was running. The thing is jekyll-watch understands my updates and compile the scss files. May I have done something wrong for jekyll build don't compile sass files at the first try?
In case you need it, here my project tree:
.
├── _config.yml
├── css
│ ├── main.css
│ └── main.scss
├── _images
├── img
├── index.html
└── _sass
├── _base.scss
├── _layout.scss
├── _syntax-highlighting.scss
└── _theme.scss
Does someone know how to fix this?
Thank you,
Ok, I get it !
You have a css/main.css files that is copied as a static file in _site/css/main.css.
The problem is that it has the same name as the css/main.scss target which is also _site/css/main.css.
So at first build :
css/main.scss is processed to main.css
then, when static files are copied, it is overridden by css/main.css.
Solution : delete css/main.css
Have you added the front matter to the top of your main.scss file?
First add to your config.yml
sass:
sass_dir: _sass
Then add to top in your main.scss file, two dashed lines https://jekyllrb.com/docs/assets/
---
---
#charset "utf-8";
After that write in your cmd console
jekyll serve
and check your compilation.
I've run into similar issues when trying to use Jekyll to pass YAML content into partials. It looks like this workflow is not possible.
The work around was to place all variables on the main SCSS file and get Jekyll to populate the values from YAML, then using partials for the actual styles.
Here's a simple repo with some of my solutions: https://github.com/guschiavon/jekyllfy-sass
I have this:
Project
├───public_html/
│ ├───css/
│ | └───style.css
│ |
│ ├───img/
│ |
│ ├───js/
│ |
│ └───index.html
|
├───scss/
│ ├───ie.scss
│ ├───print.scss
| └───style.scss
|
└───config.rb
config.rb
http_path = "/"
css_dir = "public_html/css"
sass_dir = "scss"
output_style = :compressed
and I'm doing:
compass watch "scss/style.css"
Its creating (overriding) the style.css as expected. (so far so good).
But when I edit the style.scss and save it its compiling inside the scss folder with this:
...
├───scss/
| ├───.sass-cache/
| ├───ie.css
| ├───ie.scss
| ├───print.css
| ├───print.scss
│ ├───screen.css
│ ├───screen.scss
│ └───config.rb
...
like ignoring the first config.rb and moving the root inside the scss folder.
In addition I just want screen.scss compiled, the rest will be included.
Any ideas? Thanks
As a solution I've ended up compiling the files directly from the scss forlder and I now have there the main config.rb
I still would like to have control about where the config.rb is and the subfolders that are getting filled in the compilation process.
If anyone has a way to better control this, please let me know.
The other thing: "to compile just a few of the scss files"
The way to do this is to rename the files you don't want to be compiled starting with underscore
_print.scss (instead of print.scss). The good thing is that you can still import the files as you normally would, without the underscore (even if the actual file has the starting underscore)
#import "print.scss"
So my source tree looks like this:
assets/
├── css/
│ ├── master.css.scss
│ └── admin/
│ └── admin_master.css.scss
└── img/
└── background.jpg
I have the Compass option relative_assets turned on and the css_dir and images_dir options set up correctly.
My problem is, that when calling image-url("background.jpg") from either master.css.scss or admin_master.css.scss, it always returns "../img/background.jpg", which of course is right for the former, but not for the latter (where it would actually mean "/assets/css/img/background.jpg").
Is there any way to override the relative paths on a file-per-file basis, in order to make this work?
This looks like a config / setup issue to me - I have this running fine on multiple projects and compass handles the various depths of stylesheets ok (it adds an extra ../ for the files that are 1 level deeper in the tree).
Try reviewing your compass config.rb file and check the css_dir (the folder you compile your css to, not the one where you .scss files live) and your project_path are correct.
Hope it helps,
Have you had success compiling SASS in multiple directories? Can you set up compass to recursively watch a directory?
I have read the documentation on add_import_path, but I would really appreciate some sample code, as I have (I am fairly certain) never written a line of ruby code.
The reason I ask is that I have several projects that share some standard scss. I would like changes to the shared scss to cascade to all projects.
thanks.
Let's say you have the following directroy structure:
project
|-- config.rb
+-- apps
|-- main.scss
|-- app1
+-- appst1.scss
|-- app2
+-- appst2.scss
+-- app3
+-- appst3.scss
Then adjust your config.rb:
sass_dir = "apps"
add_import_path "apps"
...
and in your main.scss include the other scss files:
#import "app1/appst1";
#import "app2/appst2";
#import "app3/appst3";
Here is my solution that supports batch compass compile/watch of multiple independent SASS projects, based on two Ruby scripts.
Folder structure with the Ruby files:
Root
--compile.rb
--watch.rb
--Module1
----config.rb
----css
----sass
--Module2
----config.rb
----css
----sass
--Module3
----config.rb
----css
----sass
Run compile.rb and watch.rb with several arguments representing the paths to your module folders containing the config.rb files.
I.e. : ruby compile.rb Module1/ Module2/ Module3/
compile.rb
require 'rubygems'
require 'compass'
require 'compass/exec'
ARGV.each do |arg|
Compass::Exec::SubCommandUI.new(["compile", arg, "--force"]).run!
end
I.e. : ruby watch.rb Module1/ Module2/ Module3/
watch.rb
require 'rubygems'
require 'compass'
require 'compass/exec'
threads = []
ARGV.each do |arg|
threads << Thread.new {
Compass::Exec::SubCommandUI.new(["watch", arg, "--force"]).run!
}
sleep(1)
end
threads.each { |thr| thr.join }
Notice that we need to create a separate thread for each compass watch (since they are blocking processes). sleep(1) is necessary because Compass::Exec::SubCommandUI is not actually thread-safe and might run several watches on the same module, instead of one on each. In case that happens, try increasing the sleep value.
Create a similar config.rb file in all modules. You might have to use compass init to get the a first config.rb that compass recognizes.
config.rb
http_path = "/"
css_dir = "css"
sass_dir = "sass"