![]() Compass version background-image: linear-gradient(top, $blue, darken( $blue, 10)) There were a few occurences of an older syntax of linear-gradient() that had to have the direction top removed because that was the default browser value (this old syntax would fail in modern browsers). If anything needed to be fixed or corrected, I’d do that part manually.Īn example of where I had to fix things manually dealt with the background-image() mixin. (Side note: Atom is pretty great at this because it will provide you an inline preview of what you're finding and replacing, taking a lot of the unsurety out of it, though I’ve found its ability to actually write changes to the found files hit or miss).Īfter running the regex, I would pull up the file diffs in the Github client and just make sure everything looked ok. Once confirmed, I’d run it for all *.scss files. Generally I would test out the regex on one file first, just to make sure it was finding/replacing the correct values. Everything else about the regex could stay the same.įor each of these mixin regexes, I used Sublime to do all the legwork, i.e. border-radius\( for finding and replacing Compass’ border-radius() mixin, box-shadow\( for finding and replacing Compass’ box-shadow() mixin, etc). For each Compass mixin, I would swap out the beginning part of the regex with the mixin name I was trying to find (i.e. Having a regex for each property, I could then run a find and replace for all *.scss files using my text editor Sublime. In doing a find and replace, this would give me the entire line to work with and provide me with the mixin’s CSS value in a grouping. This regex searches for the specified Compass mixin, creates a grouping around the parameter value(s), and then selects up until the end of the line ( \) ). I came up with the following border-radius\((. ?(?=\) ))\) / scss files for occurences of the Compass mixins I wanted to replace. ![]() Using regex101, I devised a regex that would allow me to search all. Would become regular CSS without prefixes border-radius: 5px So all I needed to do was extract the CSS value from the mixin call and drop it into the corresponding CSS property, i.e. The find/replace pattern for these rules was pretty straightforward since Compass mixins mapped straightforwardly to CSS properties and their parameters were simply valid CSS values. transition(VALUE) -> transition: VALUE.background-image(VALUE) -> background-image: VALUE.border-radius(VALUE) -> border-radius: VALUE.box-shadow(VALUE) -> box-shadow: VALUE.As those were no longer needed, I made a list of all the Compass mixins that would need to be replaced and their corresponding CSS counterparts: Application Gemfile version was from 2013įrom analyzing the code, I gathered that the primary usage of Compass in the application had been for prefixing CSS3 properties.Application Gemfile version was from 2012.It seemed even more logical to remove Compass and Susy because the dependeices themselves were quite old: Move off Ruby Sass for styles and switch to node-sass via NPM.Refactor the code to remove Compass and Susy as dependencies thus relying solely on Sass for the styles preprocessor.Provide better documentation so developers after me would know how to compile styles.These insights made me formulate the following goals: Additionally, I discovered that Susy was a dependency included in the project but rarely used. Since that initial setup, browser support for CSS3 rules has improved drastically and our own business requirements for browser support no longer dictated we needed to support legacy browsers via a helper like Compass. However, since that day nobody seems to have questioned its inclusion. ![]() The day the project was initially setup, Compass was likely needed. Getting StartedĪfter some initial research, it was clear that two of the style dependencies were completely unnecessary (and part of the problem). After an exercise in futility of trying to get the styles to compile (and seeing how nobody in the org knew how it worked) I decided to refactor the styles compilation process. scss files:ĭoing a bundle install and trying to run Sass didn’t work. Looking at the code base, I could glean the following Ruby dependencies were required in order to compile all. One of the problems I encountered at my new job was that nobody knew how styles were compiled for one of our applications.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |