I'm very new to scss and css so please bear with me. I've done some research but found conflicting information.
I have 2 freelancers working on my project. Both freelancers make changes to:
style.css
style.css.map
style.scss
Everytime I merge their work I break the frontend. How can I merge their work without breaking everything?
I read online that these files should not be included in GIT? I also read that I should used GULP or LESS? Apparently, I should compile the merged code before committing? Seriously confused with the research.
How do I handle these files?
The .css file is generated from the .scss files.
Your developers should commit only in the .scss files.
In the most cases the .css file is not added to the repository at all. And you should not modify the .css file directly because it will be replaced with the next compilation of .scss the files.
GULP is just the tool that compiles the .scss files and create the css from them. Basically when using GULP you can create some functions where you can specify the input location(.scss), output location(.css) and additional rules, etc.
There are also other tools that can do this. Like Koala, Webpack.
You probably should not store generated files in git. In this case, the generated files would be the .css and .css.map files that compass (I'm assuming you use compass because of the tags) generates for you. You should store the .scss file in source control, and compile it to .css afterwards.
If the freelancers are making direct manual changes to the .css files, they should know that at each recompile those changes will be lost.
Related
I am using a CSS framework, which has documentation for user-created extensions. But these extensions are all written in SASS files on GitHub.
Now this framework is only a single CSS file. But for the extensions they are requiring to use NPM, or clone the entire GitHub project, and start using SASS commands, which I'm unfamiliar with.
Is it possible that I keep the current configuration: I.e. only have the main framework CSS file, and somehow convert each extension SASS file to CSS file and add that to my /css folder? Or that's not possible?
**Edit: It's the Bulma CSS framework, and this is the link to the Extensions repository: Wikiki
If the number of files are not too much, you could convert them manually using an online sass compiler
SassMeiser is my goto choice for online Sass compilers.
Maybe if you could provide a link to the repo, we'll have more clarity on how we could deal with it.
Edit: I just went through the repo. They already have the .min.css file for each extension in dist dir. You're better off just downloading the .min.css file rather than converting it yourself. Remember, you need the .min.js files also for the extension to work.
Problem
We are using System.Web.Optimization bundling and BundleTransformer for SASS/SCSS. Is it possible to call some preprocessing before each sass file? Not only before files included in bundle, but before files imported using #import too.
If you want to do some preprocessing before each file in bundle you can add some custom IItemTransform or IBundleTransform, but imagine this:
Main.scss:
#import '_mixin';
some styles
_mixin.scss:
some mixins
Main.scss is included in bundle and will be preprocessed, but _mixin.scss is not included in bundle, so scss compiler will get raw file from disk without any preprocessing.
Any hook into compiling process? Or some other way?
Why do we need this?
Our common static files are located in Core project. This core project static is included in other projects as virtual directory in IIS (in debug) or copied (in release). With this solution we can use '/SharedStatic/..' in any project and it's resolved always: as virtual directory in debug and as usual path in release.
So right #import to core project must be like that (works with BundleTransformer):
#import '~/SharedStatic/Styles/_mixin.scss'
But VS intellisense (or R# intellisense) and WebEssentials intellisense don't understand '~' imports at compile time. Intellisense understands only this:
#import '../../../../CoreProject/Static/_mixin.scss'
So idea is to preprocess scss files while bundling and fix imports from '../../..' to '~/'.
Nobody answered yet, so looks like there is no easy hook into building SASS.
We solved this problem other way: stopped using virtual directories in IIS and included symlinks to shared staff in each project. Now it looks like every project has its own /SharedStatic (which is really symlink to Core Static). And this solves problem with SCSS as we can use '../../SharedStatic/' both in initial file and in file before compiling, no need to change pathes from one to another.
I'm using VS 2014 Web Essentials. Most of my CSS is compiled from LESS files, and Web Essentials creates *.css, *.min.css, and *.css.map files for those.
I've inherited quite a lot of plain *.css files, however, and when Web Essentials minifies these, it only creates *.min.css files--no *.css.map files. Is there a way to change this behavior?
Try renaming your existing .css files to .less, then open and save the less file. If you have WE running it should create a css, css.map, and min.css for you.
I'm working on a project (by myself, and in two different machines) where I'm using Gulp, and the gulpfile has two main goals - generate the build (default task) and compile SASS to CSS, within the /app (source) folder.
Any advice on avoiding people (me included) to update a .css file that would be eventually overwritten by a compiled .scss file with gulp-watch?
I'm also using Git and recently I lost some changes I've made to a CSS file for that reason. I'm not sure what happened, but when I merged commits, some CSS was lost and I had to look for it in previous commits. No big deal, and it was actually my fault, because I made some commits without checking out the origin, and then pushed them.
A part from the CSS issue, does it sounds like a good workflow? It feels good to work with that level of organisation and make profit of Sass, Gulp and Git, but sometimes it feels I'm making things too complex, not sure if that's the case, or if I'm doing something wrong or if it's just a matter of familiarisation.
First of all, if you are using SCSS, why are you editing CSS files?
I would recommend adding your CSS files to .gitignore so that they are not committed and only commit your scss files. You just have to remember to use gulp to generate new css files whenever you checkout your repo into a fresh project.
As far as, keeping people (including you) from editing a css file... just don't do it. You and anyone else familiar with a project should know that your css is overwritten by scss compiling.
I was hoping to find a way to create my css files from my less files using web essentials or something of the sort. When create a new less file it will create the css to match, however on some of my older files I removed the css files permanently and I am looking to readd them.
grunt-contrib-less is a great solution for continuously converting LESS to CSS, as is assemble-less (I'm a maintainer of the latter).
So I was able to answer my own problem. When using VS2012 Web Essentials your .less file will not compile and create the matching .css and .min.css if errors exist. My errors were occurring because some of my variables were not recognized due to the fact that I wasn't dragging in the #import of the my .less file that contained these variables. I took a quick look at the libraries you mentioned and they did look pretty cool. Thanks for the answer.
It's important to say that if you installed the Web Essentials plug-in you must restart the Visual Studio, otherwise the .min.css and .css will not be generated, either.