Sass cannot perform arithemetic operations on strings, only concatenation. When you use interpolation, what you’ve created is a string that looks like a number: @debug type-of(#{10px}); // string @debug type-of(’10px’); // string @debug type-of(unquote(’10px’)); // string @debug type-of(10px); // number If you want a number, do not use interpolation and do not use quotes. For … Read more
& You can achieve this with the ampersand operator. Try: .a .c display: inline-block &.date width: 50px The ampersand is a placeholder for parent selectors. And if you don’t place a space after it in a nested selector it will output a concatenated selector (just what you want). DEMO Note: in deeper nested selectors & … Read more
Your function doesn’t exist. You must declare it (or import it from another file) before you use it. Sass does not throw errors for non-existent functions because they have a similar syntax to CSS functions. So it assumes that if it isn’t a Sass function that it must be a CSS function. Related: Test whether … Read more
For those of you who came here looking for a way of importing a CDN as a sass @import I found the answer here: https://github.com/webpack-contrib/sass-loader/issues/246 This is how you do it (using bootstrap as an example): styles.scss @import url(https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css);
You’re setting the color after it has already been used. Basically, what you’re trying to do is this: $color: red; .foo { background: $color; } $color: green; Depending on how jqtouch is written, you might not be able to modify the colors at all. You need the variables to be set as a default in … Read more
Compass 0.12 explicitly depends on Sass 3.2. Even if you have a newer version of Sass installed, it will still compile with 3.2. In order to use Sass 3.3 or later, you have to be using Compass 1.0 or later. Running the gem install command normally should get you the latest stable version. gem install … Read more
How Sass treats colors varies depending on what version you’re using. But there are a few common behaviors: Sass will always maximize backwards compatibility whenever possible. Since keyword, hex, and rgba have the broadest browser support, all colors will be converted to one of those 3 formats, prioritizing towards either the keyword or hex. The … Read more
Interpolation doesn’t work on mixins or variables at this point in time. You’ll have to come up with a different way to achieve your goal. As of Sass 3.3, you can use mappings for this purpose for variables: $dialogs: ( error: ( light: red , dark: darken(red, 10%) ) , success: ( light: green , … Read more
The short answer Since the element we want to replace has a unique name, what we’re looking for is this: nav { ul { li { a { color: red; @at-root #{selector-replace(&, ‘ul’, ‘ul.opened’)} { color: green; } } } } } The long answer Manipulating selectors is extremely dirty, and I would advise against … Read more
Sass 3.2 and older The only thing you can do is reverse your nesting or not nest at all: .social-media { /* … */ .twitter { /* … */ } .facebook { /* … */ } } ul.social-media { /* … */ } Sass 3.3 and later You can do that using interpolation and the … Read more