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.
Related
I'm starting to work on a large application styling files. As Bootstrap 4 offers SASS files, I decided to follow that path.
I have built the following files structure:
theme.scss: general definitios for the theme like colors and fonts. Today there is just one but there could be more in the future.
global.scss: includes Bootstrap, some Bootstrap overrides and application componentes -i.e. a field with its label as part of the top border.
site.scss: general application styles.
additional page-specific SCSS files. I.e.: login.scss.
The problem I'm having is that global.scss -the one that imports Bootstrap- is then imported by site.scss as well as other files like page-specific SCSS files. So, Bootstrap styles end up in more than one compiled CSS. Compiled CSS files are what the application actually references.
I've previously used LESS and I could solve this using #import (reference) "bootstrap" instead of just plain #import "bootstrap". With SASS I haven't been able to find any solution to this problem without modifying Bootstrap core files.
Is there any other recommended way to organize the files and avoid this problem? Am I missing something or doing anything wrong?
Here are the files contents (they are large files but I'm posting only enough contents to show the problem I'm having):
theme.scss
$my-primary-color: #04459a;
global.scss
#import "../theme.scss";
$primary: $my-primary-color;
#import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
// [...]
}
site.scss
#import "global.scss";
div.field {
#extend %field;
}
// [...]
login.scss (or many other)
#import "global.scss";
// [...]
In the application I'm referencing site.css and login.css (in the loign page, of course) and both of them include Bootstrap styles.
I've built something that works for me, not sure if it's the best solution or which drawbacks it has, though.
I took some ideas from this article: My favored SCSS setup with Bootstrap 4. Here's what I've built:
First I created two SASS files for importing Bootstrap (similar to what the article does with bootstrap/_config.scss but splitted):
bootstrap/_sass-componentes.scss
#import "../../terceros/bootstrap/scss/_functions.scss";
#import "../../terceros/bootstrap/scss/_variables";
#import "../../terceros/bootstrap/scss/_mixins";
bootstrap/_config.scss
#import "_sass-componentes.scss";
// Every other bootstrap file I want to include:
#import "../../terceros/bootstrap/scss/_root";
#import "../../terceros/bootstrap/scss/_reboot";
#import "../../terceros/bootstrap/scss/_type";
// [...]
#import "../../terceros/bootstrap/scss/_utilities";
#import "../../terceros/bootstrap/scss/_print";
Then in global.scss I changed the bootstrap.scss import line to import only bootstrap/_sass-componentes.scss
Finally, in site.scss I included global.scss (such as it was before) and then full Bootstrap files trough bootstrap/_config.scss. **
** After importing _config.scss I also import my Bootstrap customizations. For doing them I followed the recomendation of the linked article although they do not apply directly to my own question.
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
I always use a predefined CSS Reset as well as WordPress Core CSS along with my upcoming CSS in any project that I work on. I did not have a problem before I use LESS.
When I write new LESS code and compiled it through SimpLESS or any other compiler, I just get my existing CSS (Reset, WP Core) code removed from my stylesheet (.css) and it gets updated with the new compiled CSS.
It's really annoying for me as I'm using LESS for the first time.
So, how to I keep my existing CSS and the compiled CSS both at once?
Two options:
Put your existing CSS in your LESS code. Your LESS code will
overwrite your css file on every save, so you'll manage all of your
styles with LESS.
Change the name of your LESS file so you're not overwriting your
existing CSS code, then put links to both stylesheets in your HTML
document, or by putting this line in your LESS file:
#import (css) "foo.css";
why dont you compile your less to a separate style sheet and include both in your page head? The problem is if you are compiling from style.less to style.css without including your existing css code in your less, it will overwrite the file not append to it.
So either use the solution above and include your existing css in your less, or compile to a different file name and include both css files in your document head.
after I save my changes in the less file, my original css file will also be updated.
The problem here: I use #import "bootstrap" in my less file for some mixins and the entire external bootstrap lines will be copied in my normal css.
How can I just use the mixins without that "Web Essentials 2013 for Update 2" copies the entire source code to my css file ?
You can import only the parts of Bootstrap that you need. This is a really good practice to get into, since as you have seen Bootstrap will include a lot of CSS that you probably don't need. For example, depending on your project's directory structure:
#import "bootstrap/mixins.less";
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.