What are /r/Sass' favorite Products & Services?

From 3.5 billion Reddit comments

Generally speaking, text editors won't handle compiling your code for you. As u/lumpyspacebiiitch mentioned, Scout App is one of many GUI tools that can handle Sass and many other types of compilation. My personal favorite GUI tool is CodeKit, but if you're comfortable at all on the command line, I highly recommend learning how to handle your Sass there. Here's a simple walkthrough of setting up NPM to compile your sass.

i like to define more like small, medium, large, x-large
device resolutions can change

https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/

gives you more leeway towards non ipad devices :)

It seems a bit like overkill. Using colons in class names is a novel idea, but I think leads to confusion. Colons in CSS selectors already serve a purpose, after all. Minifiers, PostCSS, or some JavaScript libraries might not jive with your non-traditional class names. You might get unexpected results with selectors like .text-blue\:visited:visited

Check out this fork on CodePen: https://codepen.io/jasongardner/pen/MBJeGQ

I think it achieves your purpose, but sticks with a more conventional class-naming approach. This is just a quick and dirty demo. I think you could optimize it with SCSS placeholders/mixins/functions, more colors, more pseudo-classes, etc.

I've solved, I had uninstalled Node.js that was the last version and I've downloaded the recommended version of Node.js after that I've installed sass in node.js by this command: nmp install node-sass -g and after that I've downloaded sass-autocompile for Atom at this site : https://atom.io/packages/sass-autocompile

. Now the Atom autocompilation of sass works. Thanks :)

You need to keep up to date with the Sass changelog.

http://sass-lang.com/documentation/file.SASS_CHANGELOG.html

Sass 3.3.0 was only released 4 days ago - hence why you got this buggy version (well buggy from --watch perspective), 3.3.1 was just released today off the back of the GitHub issue I posted above today. It should fix the problem.

Yes, that will work.

It's one of my favorite parts of writing Sass is that it makes this part so much easier.

This article is a bit overly dramatic on the concerns of nesting, but a good rule of thumb is to avoid going more than 3 levels deep. http://www.sitepoint.com/beware-selector-nesting-sass/

And another good article on the subject http://thesassway.com/beginner/the-inception-rule

I will refer to your command prompt / terminal as just "shell".

1) Install Node.js (and npm should install alongside it) from here. I recommend going with the LTS version.

2) You may have to close your shell windows for it to start working.

3) Verify node and npm work by typing the following in your shell: node -v and npm -v.

4) Navigate to your project directory in your shell.

5) Install gulp by running npm install gulp-cli -g and then npm install gulp -D.

6) Run npm install --save-dev gulp-sass.

7) Create a new file in your project root called gulpfile.js.

8) Add this JavaScript code to the gulpfile:

var gulp = require('gulp'); var sass = require('gulp-sass');

var src = './assets/sass/*.scss'; var dest = './output/css/';

gulp.task('sass', function () { gulp.src(src) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest(dest)) });

// Default task, will compile sass when running gulp in the shell. gulp.task('default', ['sass']);

// Watch task, will watch files and compile sass when files have changed, by running gulp watch in the shell. gulp.task('watch', function() { gulp.watch(src, ['sass']); });

I hope this helps.

The only way that css can get values from html is through html5 data attributes. https://codepen.io/mpalpha/pen/yqEoQq

otherwise you can use loops like this...

@each $property in width margin padding { @each $values in (50:'rem', 25:'px') { .#{$property}-#{nth($values,1)-#{nth($values,2)}} { #{$property}: #{nth($values,1)+nth($values,2)}; } } } // compiles to...

.width-50-rem { width: 50rem; } .width-25-px { width: 25px; } .margin-50-rem { margin: 50rem; } .margin-25-px { margin: 25px; } .padding-50-rem { padding: 50rem; } .padding-25-px { padding: 25px; }

I've solved, I had uninstalled Node.js that was the last version and I've downloaded the recommended version after I've installed it in node.js sass by this command: nmp install node-sass -g and after that I've downloaded sass-autocompile for Atom at this site : https://atom.io/packages/sass-autocompile . Now the Atom autocompilation of sass works. Thanks :)

From the sound of it you should use a UI framework like you do with your Javascript and probably the backend as well. A UI framework will give you that piece of mind to not worried about browser compatibility.

I would recommend using Material Design as it's perfect for Angular and have the best integration between the two, this have to do with the fact that both are from Google.

Good luck! :)

The easiest way would probably be to set up Grunt/Gulp for each project you're working on (which you probably would want to do any way) and then have NPM take care of the dependencies. That comes with the added benefit of being able to run libsass which is way faster than the Ruby gem. libsass doesn't support Compass yet, unfortunately but it seems that Compass is somewhat abandoned nowadays and I would recommend Bourbon either way. Bourbon also has a Node implementation available. I know this didn't really answer your question but I thought I'd present an alternative which, in my opinion, is superior.

Thanks for the feedback, I am on the fence about the idea that certain characters are "reserved" from within class names. One utility-first css framework which is 'for' this approach is tailwind

• http://sass-lang.com/documentation/Sass/Script/Functions.html#opacify-instance_method

Opacify is a built in function, like adjust hue

$BaseColor: #F00; .thing { background: adjust-hue($BaseColor, 20); }

Ended up solving this by including the keyframe rules in the mixin inside an @at-root { } block, worked like a charm as it still gave me access to the parameters passed to the mixin.

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#at-root

Many Sass tools exist independently of one another. For example you can use Susy grids with a material design UI kit with a type scale tool with a animation library and so on.

Anyway, here is a material design theme: http://materializecss.com/, here is another: https://github.com/dmglab/material-design-theme-sass

Use whatever you want, you don’t need them bundled together.