- This topic is empty.
-
AuthorPosts
-
November 11, 2014 at 10:12 am #188055pleek91Participant
Hello all, question for you.
I’ve been working on my development process over the last month or so, trying to streamline my workflow to increase productivity. I’ve increased my sass knowledge (to take advantage of mixins, variables, and nesting), got up to speed with svgs (to replace the icon fonts i used previously), and integrated Grunt into my workflow to automate tasks.
I ended up with a pretty streamlined workflow that has made working much more fun. But I’ve run into one problem that is stalling my workflow and hurting my productivity. RubySass is slow, it takes 7 to 11 seconds for my fairly complicated style.scss file to compile into raw css.
I’ve been reading up on libsass and how much faster it is. I tried swapping out RubySass with libsass but I ran into a snag. I have been using Susy.scss and Breakpoint.scss to develop my site, but libsass doesn’t support either of them. What options do I have? Is there a scss grid system that is compatible with current releases of libsass?
Mostly just looking for what my options are or perhaps how I can speed up my RubySass workflow. I have ruby 2.0 x64 and sass 3.4.7 (Selective Steve) as well as grunt-contrib-sass 0.8.1
Thanks to all who reply.
November 11, 2014 at 11:02 am #188059__Participantit takes 7 to 11 seconds for my fairly complicated style.scss file to compile into raw css.
There was a similar conversation here a couple months ago. Are you
watch
ing your entire project? That’s the part of the process that might need changing. Watch the parts that you’re working on. During development, you might even break your project into several smaller stylesheets, and then combine them in a master sheet when you’re ready for production. That’s the real advantage of turning CSS into a programming language: you can abstract things and give your project real, logical structure.libsass sounds awesome and I’ll probably be going there at some point now that there seems to be reasonable feature parity. I’m not too big into any of the ruby-based frameworks (or, at least, their ruby-based features), so I’m not the person to ask on that point. Same for grunt.
As far as grids go, they aren’t very complex (you can get a reasonable grid in only one or two mixins), and building your own could be a great learning experience…?
November 11, 2014 at 12:02 pm #188062pleek91ParticipantThanks for your reply!
Currently I’m using
@import
to include all my different style sheets into one style.css file. I tried commenting out the@import
lines that included style sheets for other pages and saw about a 1s increase in compile times for each@import
I commented out.I also found that setting the watch option “spawn” to false improved my compile times by about 3s. And I discovered the “interrupt” setting that is also improving my productivity because I don’t have to wait for the current task to finish if I made a typo and hit save or something similar.
watch: {
css: {
files: ['scss/{,*/}*.{scss,sass}'],
tasks: ['sass'],
options: {
spawn: false,
interrupt: true,
livereload: true,
},
},
},
<code></code>Compile times are now around 5s. Much better compared to the previous compilation times.
Any other tips to speed things up?
November 11, 2014 at 4:20 pm #188080__ParticipantI use sass from the cli, so i couldn’t say.
November 11, 2014 at 4:52 pm #188081AlenParticipantI use ruby-sass with Gulp and don’t have issues with compile times. It could be a Grunt configuration thing.
December 17, 2014 at 12:40 pm #191089pragmarParticipantExperiencing similar issues using ruby-sass, susy and breakpoint on an i7 with loads of memory. Not a single @extend reference in the project. I’m beginning to think those that do not have issues just have a different workflow. In the vanilla css world, I’d make 1 to 3 style changes at a time and reload the page. This would happen maybe 15 or 20 times in a minute. Waiting 3-8 seconds is driving me bonkers. Not only am I losing time from the compile times, now I’m obsessively trying to figure out why it’s so slow. If I weren’t working on a team, I’d probably do a reset and use libsass with the limitations, or forget the whole css pre-processor idea altogether.
December 17, 2014 at 1:22 pm #191094pleek91ParticipantI after a lot of research I ended switching to libsass and using bourbon neat as my grid system. Not only does neat have a much smaller footprint than sussy it is also has a libsass compatible version. My compile times are now less than 0.4s
Well worth ditching sussy for in my opinion. Neat has all the features I needed anyway.
The hardest part for me in switching to libsass was making sure i was running compatible versions of sass, bourbon, and neat.
I’m currently running….
Sass 3.2.19 (Media Mark)
bourbon 3.2.3
Neat 1.5.1
grunt 0.4.5
grunt-sass 0.16.1Hope this is helpful to someone
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.