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"
Related
I am migrating from libsass to dartscss, so moving from #import to #use. I have around 20 sites and the way I have my sites is to have one scss folder with all of my scss files and then have a site config per site that uses variables to override the default colours.
My site structure
scss/
├─ import.scss
├─ base/
│ ├─ _reset.scss
site1/
├─ scss/
│ ├─ settigns/
│ │ ├─ _config.scss
│ import.scss
In site1/scss/settings/_config.scss I have the following code:
$bgc: red;
And in my site1/scss/import.scss I have:
#use "settings/config" as *;
#use "../../scss/import.scss";
And finally in ../../scss/import.scss I have a simple test call to see if it works.
body {
background-color: $bgc;
}
When I view my site I get undefined variable and $bgc doesn't render. I would like to keep the structure I had before since I have many sites that share the same scss folder and all worked fine before when I used #import.
I want to create my own theme--mytheme for python-sphinx.
tree project
project
├── build
├── make.bat
├── Makefile
├── mytheme
│ ├── static
│ │ └── style.css
│ └── theme.conf
└── source
└── conf.py
Content in theme.conf:
cat project/mytheme/theme.conf
[theme]
inherit = default
stylesheet = style.css
Conent in project/source/conf.py
cat project/source/conf.py
def setup(app):
app.add_stylesheet('static/style.css')
app.add_html_theme('mytheme', os.path.abspath(os.path.dirname(__file__)))
html_theme = 'mytheme'
html_theme_path = ['.']
Now let's make all my *.rst file in source.
cd project
make html
Running Sphinx v2.4.4
loading pickled environment... done
Theme error:
theme 'mytheme' doesn't have "theme" setting
Makefile:19: recipe for target 'html' failed
make: *** [html] Error 2
How to fix it ?
You use two mutually exclusive approaches - using local theme from filesystem, and at the same time register theme as it is done in themes distributed as Python PyPI package.
If you want a theme to be a part of the Sphinx project, good place for such project-specific themes is _themes/ in the directory with conf.py, and set html_theme = "mytheme" and html_theme_path = ["_themes"] in your conf.py.
_themes/
mytheme/
static/
css/
main.css
theme.conf
layout.html
conf.py
index.rst
second.rst
third.rst
...
(borrowed from https://blog.documatt.com/sphinx-theming/themes.html#project-specific-themes)
Completely delete block
def setup(app):
app.add_stylesheet('static/style.css')
app.add_html_theme('mytheme', os.path.abspath(os.path.dirname(__file__)))
add_html_theme() it is for themes distributed as a package. add_stylesheet() is to add additional (not replace existing) stylesheet. Themes main stylesheet is in their theme.conf stylesheet option.
The last issue I see in your example is your theme inherit from default theme. It works, it looks it's an old name for classic theme (https://www.sphinx-doc.org/en/master/usage/theming.html#builtin-themes), but use its official name - classic.
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 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.
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,