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.
Related
So I'm working on a web project and I started with an HTML/CSS template created by someone else. It appears to use bootstrap which I don't know much about.
Upon using chrome developer tools I noticed that some of the css styles being applied were coming from scss files which I can not find on my system. I'm wondering where do these files exist?
The screenshots are from
Chrome dev tools that tells me the path to the scss file that is applying styles
That same path on my system where the scss folder was stated to be does not appear to exist. Notice that I'm in the "vendor" folder but there is no scss folder as dev tools shows there to be.
Can someone explain to me where the browser is loading these scss files from? I've tried having Windows display hidden files and folders and that doesn't make a difference. Thanks!
Path to scss file via Chrome Dev Tools:
That same path on my file system
It happened because of scss sourcemap. It generated when compile scss file to CSS, for easy debugging.
I assume you are using development version of bootstrap. If you using production version it's not happen.
You can find more information about this here
There may be files with .map extension (called as the source map in scss world) in your project path. These .map files refer to the path of the .scss files that were used during development to create .css files. So, even though there are no physical .scss files present in your context path; and your html file refers to the compiled .css file, Chrome debugger would still show the original .scss file from which the .css got compiled. If you require the Chrome debugger to show the actual .css file name, then you could delete the .map file temporarily. This suggestion is considering you would like to see the .css file name instead of the non-existent .scss files. You could also check this link to understand more about working with .scss files in Chrome debugger : https://www.sitepoint.com/using-source-maps-debug-sass-chrome/
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.)
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’m a new user to CodeKit and sass and I’ve been playing around with it for the past few days trying to figure out how to use it correctly to improve my workflow.
I’m building a WP project so I start by creating a new CodeKit project with Zurb and compass. It outputs the files and I throw them into a folder called 'Foundation'. I then throw in my WordPress files, and throw that ‘Foundation’ folder into the theme I’m working on in WP in my ‘assets’ folder. I know in the YouTube video CodeKit mentions not to pull the files out so that any linking isn’t messed up, but I can’t keep those files in the root of my project because they need to be within the theme.
So it looks like this:
wordpress/theme/assets/foundation
Assets is also where my sass files live for the overall site
wordpress/theme/assets/sass
Where I get hung up is in the compiling of the files.
I have one master style.sass file where I import all my partials and that works correctly. I want to include the foundation app.scss file so everything is in one place, but it doesn’t call it up. It says the compiling is complete, but when I look at the code it’s just the import line without the foundation code actually being outputted. I also found that if I place my sass partials in a folder called partials, CodeKit can't compile them, even though I'm importing them with the folder name, example: partials/layout, instead of layout.
I’m doing this locally so I can’t show you the link, but I guess I just feel like I’m setting this up entirely wrong.
My question are:
How do others setup their projects on CodeKit with WordPress and Foundation?
Is it correct to import .scss files into a .sass file?
Any help would be appreciated.
You should make your CodeKit project only contain the folder for the theme you are developing. CodeKit should then put foundation, jquery, and other scripts and frameworks in a folder called bower_components because it uses bower to fetch the project's dependencies.
The advantage of using bower is you can update the packages from the command line and also through CodeKit. You can also keep dependencies out of the git repo by adding bower_components to your .gitignore file.
Check out this directory structure that I use based on the Roots Sage Starter Theme
/your-custom-theme-folder
|--/bower_components
|--/foundation
|--/jquery
|--/etc.
|--/assets
|--/fonts
|--/images
|--/scripts
|--main.js // custom js for theme goes here
|--/styles
|--/modules
|--/utilities
|--/etc.
|--main.scss // all sass is imported through this file
|--/dist // all files compile to this directory
|--/fonts
|--/scripts
|--app.js // all js files concatenated together
|--app.min.js
|--/styles
|--app.css // main.scss outputs all imported sass to this file
|--app.min.css
|--functions.php
|--index.php
|--single.php
|--style.css // no actual styles in this file, just theme info
|--etc.
What is the easiest way to do this?
I have a simple one page Boostrap website with a less folder and a css folder.
I have no way of making changes to the .less files and having them compile as a .css file in the css folder.
I have tried instructions on Grunt.js via Boostrap, which compiles everything to a dist folder inside node_modules but I don't want to include the entire build system when I publish my website. And I don't want to have to manually copy and paste the css folder from the build system.
I tried the instructions on Less and had no idea which files were where. In the past I used Compass but it only works with Sass.
I feel like this should be really easy, anything that I'm overlooking?