This is my first time working with Scss, although I have run the command in terminal to convert a simple input.sass to output.css in the case of other libraries, it seems a little bit difficult, since it's new to me.
I have a profile with index.html which should require a style.css, but I need this style.css to be generated from Bulma directory which is currently in this format:
index.html
vendors
bulma
css
bulma.css
bulma.css.map
sass
base
_all.sass
generic.sass
helpers.sass
minireset.sass
components
elements
grid
layout
utitlities
bulma.sass
The problem here is that, unlike the sass input.scss output.css example which converts Scss files to CSS, the above seems complicated.
I don't know which file to convert, or if I should alter the Sass file and modify them but do I save the output in individual CSS file or one master style...
in every sass directory such as base, components and so on, they all have _all.sass file. which include all of the files in that directory. So, all you need is to include one _all.sass file from every folder within sass folder.
So in your sass file, that you will watch with sass gem, make includes for all fo the _all.sass.
Something like this would work.
#import "utilities/_all"
#import "base/_all"
#import "elements/_all"
#import "components/_all"
#import "grid/_all"
#import "ayout/_all"
Also, I am not 100% sure, but I think it is a bad idea to mix sass with scss, so my advice would be to do something like this:
In your sass folder of your project create a sass file and name it styles.sass. In that file write imports to all the _all.sass files.
And then just go do this in the terminal: sass --watch sass:css
Related
I'm looking to setup a scenario where a sass file outputs css and that css file outputs back to the sass file. So, if I were to code in the css file it would update the sass file, and if I were to code in the sass file it would update the css file.
Basically, something like --watch input.sass output.css and --watch output.css input.sass combined.
How would I go about doing this?
I've started working on a project that has bunch of css files eg. 15-20 css files which is not the right approach i wanted to use Sass framework but these bunch of css files have confused me. I want to make sure i dont break anything before start writing sass for these css file so wanted to know What's the best strategy i should adapt to integrate sass framework in a project considering we already have bunch of css files??
Valid css is valid sass so to start you could just change the extension to .scss and compile them along with your new sass files. So if you were generating just one main.css for example:
//main.scss
#import "existing-file-one";
#import "existing-file-two";
#import "existing-file-three";
#import "new-file";
This would then add all your existing styles.
Although I know CSS file is a valid SCSS
but there is some reason ，so I can't change some files subfix to SCSS
global_min.scss
#import url("global/reset.css")
#import url("global/frameset.css");
#import url("global/header.css");
....
....
Can sass or compass merge it (´･_･`)
You can try the Sass CSS importer plugin, by Chris Eppstein himself :)
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import
#import takes a filename to import. By default, it looks for a Sass
file to import directly, but there are a few circumstances under which
it will compile to a CSS #import rule:
If the file’s extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
If none of the above conditions are met and the extension is .scss or
.sass, then the named Sass or SCSS file will be imported.
You can't do that with SASS without renaming the CSS files.
I suggest that you use some kind of CSS compressor to concatenate and minify your CSS code. Please have a look at Yeoman, currently the most solid approach to handling this kind of tasks.
If you want to merge all css files into a single compiled css file, you need to change their extension to sass or scss and make the changes to be compatible with that format.
I'm looking for ways to optimize my WordPress instance. The theme has about 8-10 CSS files that are rendered in the functions.php. Consequently, I do not want to change any file names because that would mean that I have to hack the theme and I want to keep that to a bare minimum.
I want to use SCSS to combine these CSS files into one CSS file and include the new file in the theme instead. When I try...
#import "style.css";
#import "reset.css";
#import "shortcodes-styles.css";
It renders as
#import url(style.css);
#import url(reset.css);
#import url(shortcodes-styles.css);
How can I get SCSS to import the CSS as partials without changing the file names? I'm also using CodeKit if that makes a difference.
Not possible. Sass only compiles Sass files: https://github.com/nex3/sass/issues/556
All I need is to do is have a directory with my custom reset sheets and other sass files for imports.
I've been playing around and I can't get compass to read my custom sheets.
1) Where do I put my custom css sheets for import?
2) how do I #import them
(I'm using the sass indentation, but I doubt that makes a difference,)
(I know little about ruby I'm just using it for compass)
Thanks
Look at the #import section in Sass reference.
You can import a Sass file without telling explicitly the file extension:
#import "file"; /*will import file.scss or file.sass. Anyway you could as well use #import "file.scss" or #import "file.sass*/
To import a CSS, provide its extension.
#import "file.css"; /*will import file.css"
There are more ways to differentiate them in the reference, but these are the most used.
You can put your files where you want, but write the path relative to the current directory (the directory which the file from where you are importing is).