I'm using the NodeJS implementation of KSS. I have the following file structure:
sass (.scss files)
css (compiled .css files)
images (images & sprites)
styleguide (auto-generated styleguide html)
|- public (auto-generated assets)
|- template (styleguide template files)
I can successfully generate a styleguide by executing the following command line instruction:
kss-node sass styleguide --css css/styles.css --template styleguide/template
So sass is my source folder to parse, styleguide is the destination folder and the --css and --template options tell the compiler where to find my main css file and template respectively. During the process the contents of the css/styles.css file is copied over to styleguide/public/style.css which is then referenced by the styleguide. This is all great.
However, the css file that is generated and referenced by the styleguide now sits in a different folder structure from the original css file (it is two deep from the root instead of one) and therefore any references to the images folder are now invalid. Is there a way to resolve this without placing my original css files in another folder in the css directory to mimic the styleguide folder structure (which would be a massive hack)?
Also, any other references to images in the normal html markup (derived from the scss comments) will have to be adapted to reference the adjusted folder structure, and therefore is not indicative of a real life implementation of my code. Is there a way to resolve this too?
Thanks
I know it's not a solution per se, but what I ended up doing was a Grunt task to copy my images (even the generated by Compass) to the public folder of the generated styleguide after the KSS parsing (also done with Grunt).
Related
I have a folder with Less files, split in parts to have a cleaner workspace. But I want them to be compiled by PhpStorm to 1 file (styles.css in a css folder). I installed lessc and it compiles the files separate. See picture 1
As I said I would like to have all files combined into css/styles.css But I don't get this configured right. My configuration is as followed:
I hope someone can explain what arguments I could use.
When Track only root files option is enabled in Less file watcher settings, file watcher produces a single .css file with name matching your "main" .less file (the one that imports all your "partials") that includes the merged content of all your .less files. No individual .css files for partials are created
I've set up a new Jekyll site to test the Neat 2.0 grid. However, as I run Jekyll Serve I've noticed that nothing from my main.scss file doesn't compile into my main.css file:(
Folder set up
Config.yml
sass:
sass_dir: _scss
What's happening here and how can I get my main.scss file to compile?
The sass_dir won't be processed by the sass converter directly, is only meant to contain partials:
sass_dir becomes the load path for Sass imports, nothing more. This
means that Jekyll does not know about these files directly (..)
This folder should only contain imports.
To have your sass file converted, start the file with two lines of triple dashes:
---
---
// sass content
The output file will be located in the directory where that file is placed.
You can put it in css/main.scss and Jekyll will generate css/main.css.
I am playing with this as well, but I'm a beginner, so take my advice with a pinch of salt.
However, my setup is working and compiling all scss changes when I'm running "jekyll serve --watch" with my _sass folder specified in config.yml as:
sass:
sass_dir: _sass
My _sass folder itself contains a couple of _scss files, which I use for styling, but the important thing, I think, is that my jekyll CSS folder contains only imports in only one file named main.scss, like this:
---
# Front matter comment to ensure Jekyll properly reads the file
---
#import
"layout",
"grids",
"etc"
Hopefully this not-very-techinical explaination is of use either to you, or to someone googling how to make jekyll compile/process and watch for changes in .sccs files.
I'm working on a WordPress theme (more specifically: a wordpress theme boilerplate) which makes use of SASS (and lots of other technologies). My SASS files are within assets/sass. My problem is: how/whereto compile them?
Compiling them into the root directory doesn't feel right, since it gets bloat up - and it is already pretty big (with Grunt, Bower, etc.). But the asset path problem (see below) would disappear.
Compiling them into a directory (like temp or whatever) wouldn't bloat up my directories but lead to the asset path problem.
The asset path problem:
elem { background-image: url('images/foobar.png'); }
The path would be correct if the compiled sass file in assets, nowhere else. assets/images/foobar.png would just work in the root directory.
An important note: it's possible to create a distributable version of the theme with Grunt, where, amongst other things, all styles are concatenated with the style.css file in the root directory. The generated dist directory then contains only files which should be uploaded to a server or used for distribution (no build files, no sass, no coffee, etc. - just compiled and "finished" files).
Any ideas? Thanks.
I am using Netbeans 8.0 to edit my HTML, PHP, and CSS. Just today I have installed SASS and enabled it within Netbeans. I am developing on Ubuntu, and Ruby and Sass are both available in the repositories, so I installed them and Netbeans found the SASS executable with the click of a button. So, I assume it's all working.
I have created a file called style.scss, and put in some test colour variables and a dummy #test id.
My understanding was that when I saved the .scss file that it would get processed and a .css file with the same name, in this case style.css, would get created. Or updated if it already existed.
Is this not the case? I did see other SASS and .css file generation questions here on Stack Overflow, but I didn't see one specific to Netbeans, so I'm not sure if there's something I haven't set up correctly in my environment. Also, I don't need to upload to a server when saving, I am just testing and developing locally.
How do I actually generate a .css file from my .scss in Netbeans 8.0?
Right click on the project -> Properties -> CSS Preprocessors
You have to set an input folder, for example /scss, and an output folder like /css
And there is a checkbox "Compile Sass files on save".
For Compiler options " --style compact " can be useful.
This was working for me in NB7.4, but in 8, something happened...
The plugin page says, it's currently incompatible with 8.
http://plugins.netbeans.org/plugin/34929
UPDATE: My scss folder was wrong... So it's working in NB8.
Look # the project settings, and separate your .scss and .css files in two folder, the default folders are /scss and it converts files to /css folder
I am trying to create a jar file which includes some class and java files needed, but I also would like to include some extra xml, xsl, html, txt (README) files.
I am using Eclipse on Windows XP.
Is there an easy way for me to set up a directory structure and package all my files into a jar?
Add the files to a source folder and they can be included in the jar.
One common way is to have, at the root of your project, a src folder. Within that, folders for java files, and others. something like:
src/
css/
java/
html/
images/
Then you can make each of those subfolders a source folder (Right click, Use as Source Folder) and they should be available to add to the jar.
A .jar is nothing but a ZIP archive, so you can use any program capable of creating ZIPs. Just make sure that you include the manifest and all the class files.
I just added all the files into my Eclipse project (including the txt, html, xml, etc files).
Then I used Eclipse to File->Export->Jar File->Next
Check the "Export Java source files and resources" box.
Done.
If you're using Ant, you can use the jar task (see the examples section for how to include/exclude certain files, etc.)
If you move to an ANT (or Maven, for you Maven fans) then you can automate the Jar building very nicely, and also use it outside of Eclipse (e.g., in an automated build environment). All you need to do is copy the files from your src, jsp, foobar and resources locations into a build staging folder, then Jar the resulting files using ANT's Jar task.
<target name="makejar" depends="compile, copyfiles">
<jar destfile="${jars.dir}/myjarfile.jar" index="true" basedir="${build.dir}" />
</target>
One thing I look down on is including non-source (except package.html files for Javadoc) within the src folder. If you feel you have to do this to achieve something, then you are doing it wrong.