I'm working on a demo site with a bunch of one-off pages. Rather than have them all use the same CSS they'll each have their own stylesheets (with possibly a shared reset). I know I can just put a CSS file into whatever directory and it's fine, but it doesn't seem to work for Sass files.
Is there a way to get Jekyll to process any Sass file regardless of what directory it's in? Or at least in any directory within a certain folder?
It could be that you don't have any front-matter on your files if they're just in the css/ directory of your project.
Check out an example project here: css/main_css_file.scss, and have a read of this relevant part of the docs entitled "Assets"
Jekyll allows you to customize your Sass conversion in certain ways.
Place all your partials in your sass_dir, which defaults to <source>/_sass. Place your main SCSS or Sass files in the place you want them to be in the output file, such as <source>/css. For an example, take a look at this example site using Sass support in Jekyll.
If you are using Sass #import statements, you’ll need to ensure that your sass_dir is set to the base directory that contains your Sass files. You can do that thusly:
sass:
sass_dir: _sass
The Sass converter will default the sass_dir configuration option to _sass.
^ You may like to refer to the above if you want to inline the reset for each sheet. <source>/_sass or whatever you configure for sass_dir in the config could be it's home. (Although: you'd probably get a performance boost out of including it separately, so the browser could cache it between requests.)
Related
I have been searching all over for information on where django-cms is storing the CSS and SCSS data for my site, which I am working on localhost. When I go to edit the CSS file directly, it has no effect, so I'm wondering what needs to be done to edit those CSS files. Obviously they have been loaded somewhere. How can they be reloaded, or in general what is the best practice for editing the CSS files?
Apparently I had to do this with both the style.scss and style.css files, which seem to have the same css classes. But even after editing both files, I had to refresh the site on my localhost a few times before I could see the changes. Frustrating, but it does work to edit the files directly in the static folder.
#Lawrence DeSouza At first you should mention which plugins and style frameworks you use.
If you are using some sort of a frontend framework like Bootstrap 4 your should compile its css from scss separately. You can do it right on the dev server in a separate directory outside your project dir and cloned from the official repository. Normally you would only need to change variables in "/bootstrap-4.x.y/scss/_variables.scss" file. On the next step you would compile your *.css files with "npm run dist" command and then copy compiled files from "/bootstrap-4.x.y/dist" directory to your "/projectname/appname/static/css" directory. The process is well-documented here. After copying changed files to your "static" folder you should run "python manage.py collectstatic" and refresh the page. If it's not working after refreshing the page in a browser (normally it should work) - restart the server. I am a bit biased towards Bootstrap, but the logic should be the same in your case.
I'm using fourseven:scss to compile scss files. This seems to work fine if I include my .scss files under the client directory. However I'd like to leave them near my components either in /imports/ui/stylesheets/ or else right next to the components in /imports/ui/components/. It's just that nothing seems to happen when I leave them there.
The fourseven documentation says that the packages searches all directories and complies .css files from any .scss files it finds. These are then packaged up and sent down to the browser. I can see a resource "merged-stylesheets-prefixed.css" when I put my .scss in the client directory. I just can't see anything when I put it under imports.
How do I control this behaviour?
Try creating a main.scss file in the client folder and from there import all your other files, like e.g.:
#import "{}/imports/ui/components/_ComponentABC.scss";
Does it work?
I understand that it's built to compile .less files, but I'd really like to be able add vanilla CSS files in a nice way.
Yes this is absolutely possible. The less files just get compiled into css in the pub directory. To add your own static css files you will just put them in your css directory (/app/design/frontend/{vendor}/{theme}/web/css) and they will be accessed just like any less compiled css file.
Depending on your magento configuration you may need to first run bin/magento setup:static-content:deploy from your magento installation's root directory.
in my project I have multiple sites that share common SASS files. Some of them implement their own, custom rules (in _custom.scss); others don't. So for some of the sites there is no _custom.scss file (but it is imported in common SASS anyway). To avoid putting empty _custom.scss files in each local SASS folder I created an extension in compass (like it was suggested here How to import scss file in compass only if it exists?).
But there is problem: the compiled CSS goes into css/extension_name/stylesheets folder. I want it to go into css/ folder.
I have my css_dir set to "css" but still the compiled CSS goes into css/extension_name/stylesheets. I could move the file each time but I don't think it's a good practice.
Can somebody suggest some solutions? Any help would be appreciated.
Which file we should upload to server .scss or .css when we use Sass?
I read about Sass and Compass it makes these folders and files
I write scss in which gives output in .css file of same name.
My question do i need update whole folder to FTP or just .css file.?
I work with both .net and .php based websites.
the css is what the html pages will refer to. So thats the one you need to upload.
For source control, you only really need to keep the sass.
If you do not intend to do the compiling job on the server (like many Rails developers did with Capistrano), then no need to upload any sass files onto it. As Keith suggested, you need to keep sass files in source control repository and upload the css files. It's just like (more or less) compiling a c source code into binary executive files.