Okay so let's assume, for simplicity's sake that my folder structure looks like this:
project
- index.html
- css
- style.css
- scss
- style.scss
- img
- image.jpg
I want to use my image.jpg as a background for a div. I am working from style.scss and then monitoring the scss to css in style.css. If I use the path ../../img/image.jpg it will be displayed as correct in style.scss, but since I am monitoring this to style.css, the image will not be displayed because the path to the image from style.css is ../img/image.jpg. This goes both ways, If I use the path ../img/image.jpg the image should not be displayed because the path is incorrect for style.scss. How can I make this work?
I'd personnally set the images url to fit the style.css needs.
In my point of view, style.scss is here only to provide more flexibility during the coding of your design. This way, i never use .scss files inside my HTML.
Taking the in mind that i always compile the .scss into .css, that makes no sense to me to set the path from the .scss file.
By the way, i know there are tools allowing to auto-compile .scss files before returning them compile from the server, but i'm not pretty fan of this solution, because more than requesting a file in HTTP GET, you'll need your server to compile code before returning it, so it'll obviously take a bit more time...
One of the possible solutions for that to use absolute path to your images, I mean, like:
/img/image.jpg
therefore you will still have autocomplete in IDE
and css will be transpiled correctly
Related
enter image description herefirst time posting here. I restructured all the files on my website since I wanted to experiment with how to organize files, and I ran into a few issues. When I launch the site HTML appears but the CSS stylesheet doesn't seem to want to attach. I also think the js sheet is also not attaching properly but can't test it till css shows up. I double-checked spelling as well as placed the index.html on the root folder but still nothing I'll post the code below and hopefully someone can help me out. I appreciate you guys.
When you link a CSS or JS file to an HTML file, you need to provide a relative path from the HTML file to the CSS or JS file. In this case, it looks like index.html is already in the Root directory, so you shouldn't include that in the CSS file paths. The relative path to the css files (the path from the directory where index.html is to where the css file is) would be /Css/index.css, and the same for your javascript files (/Scripts/index.js).
After finishing my website locally using HTML5, SASS (Koala for compiling) and a bit of jQuery, I uploaded it to GitHub and hosted it on git pages. Everything works flawlessly except that my background images are not showing up. Using the 'Inspect element' I found out that deleting one '../' from the URL specified for the img file background-image: URL("../../img/background.jpg"), solves the problem and the background image is shown.
The thing that confuses me is that I uploaded the structure from my PC straight to Github without modifying anything. Plus, I checked the structure of the project in my repo and it doesn't make sense that the background-image shows after deleting one '../' because there are two folders that you have to get out of to reach the image.
This just doesn't make sense. Can anyone explain what is happening?
P.S. Basic representation of my project structure:
index.html
folder: img
folder: sass
research-pages
SASS FILE
Inside this folder is my specific sass file where I type my styling.
You have to go up two folders to reach the img folder where my background.jpg is located.
edit: With your file structure, just one ../ should take you to the sass folder. But on GitHub, perhaps their directory structuring method is more forgiving than the 'correct' way (perhaps ../ means both the parent folder and the parent folder level).
Some other possibilities: maybe things somehow got moved around or arent' uploading the way you think they are during your git add/commit/push, or possibly I'm interpreting your file structure incorrectly, or maybe you're mistaken with what you are seeing (though I tend to believe you - I will test this myself soon). Can you send us a link to your gh-pages repo?
I am developing my own theme for wordpress, I'm also using SASS to write the CSS, and I want the final compiled CSS to be minified... my question is:
What would happen if I set SASS to compile the CSS in my style.css file (the one that is in the main folder of "themes"), would Wordpress be able to read it without problems?
Or should I leave style.css blank and compile the CSS in a file inside a CSS fodler, for example: css/main.css?
Or should I leave style.css blank and compile the CSS in a file inside
a CSS fodler, for example: css/main.css?
This is the best way to do it, and the way 99% of custom theme developers use. Just call main.css with #import and that's it
I would leave the style.css file alone and create another file like you stated. I'd also make sure to not include the default style.css and only the one you generated. If you look at great starter themes, that is what they do. For example, https://github.com/roots/roots.
I think it depends on how large your css file will be. For larger projects, I would split up my stylesheets into global.css, layout.css, mobile.css, tablet.css, put them in a subdirectory and #import them into the main style.css in the theme's root folder.
If it is a simple site that doesn't require structuring your css in such a way, you can have style.css and style.sass located in the same root folder of your theme.
I had to split up a long css file. I put the smaller css files within a styles directory.
Now I have to update the the urls to go up one level with the ../ notation.
Is there anyway to specify the base URL from which to load assets like with the base tag in HTML, but with CSS?
No, there isn't. I suggest to place the CSS images in at least the same level as the CSS file so that you don't need to go backwards in the path. E.g. /css folder for CSS files and /css/images folder for CSS images. Then you can consistently use url('images/name.ext') for CSS images. This way you can place the root /css folder practically everywhere without fiddling with the image URL's.
As an alternative, you could dynamically add a class to your body tag, and use that in selectors to override css URLs depending on which directory your file is served from.
An alternative way to set the base directory in the CSS (which seems to be impossible) is to set the base directory of the HTML document with the <base> tag. This tag is not well known in the community but I found a nice tutorial in the web:
https://webdesign.tutsplus.com/articles/quick-tip-set-relative-urls-with-the-base-tag--cms-21399
It seems to be totally a good solution.
Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.
Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/
I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?
Using root-relative links is great but, as you see, can cause issues when working locally.
Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.
By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.
Say you have a directory structure like this:
/website
/html
/css
style.css
test.html
script.js
/newcss
newstyle.css
If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").
This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.
You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.
It may take some time of setting it up and getting into it, though.