When I try to use #at-root and Interpolation I'm getting an error... but I'm not sure why... I'm even just using an out-of-the-book example for testing and I still get an error:
.button {
#at-root a#{&} {
color: green;
}
}
Error sass/Site.scss (Line 28 of sass/partials/_site-title.scss: Invalid CSS
after " #at-root a#{": expected expression (e.g. 1px, bold), was "&} {")
The functionality should be there, I'm using Sass 3.4.22 combined with Compass 1.0.3 so I'm thinking its an dev enviroment issue perhaps? I'm use to working on a Mac, but I'm using a Windows 7 computer with ruby 2.2.5p319 (i386 version).
Any thoughts?
You can't do interpolation like this.
Rename the file to have a .scss.erb extension and then do the interpolation with ERB:
.button {
#at-root a<%= "my_string_inserted_with_ruby" %> {
color: green;
}
}
But I'm unclear ... what is the & you're trying to insert, and why are you doing it with interpolation?
I don't have the answer but to help with the problem, if I compile your code
.button {
#at-root a#{&} {
color: green;
}
}
It compiles to this as expected
a.button {
color: green;
}
So it definitely sounds like a dev environment issues. Sorry I can't help more. I am on a windows machine using atom, with node-sass & sass-autocompile.
Related
I am looking at a SCSS somebody else wrote, and I notice a selector with a plus and ampersand immediately to the right.
.listing-feature {
&__summary {
.feature-title+& {
color: #f00;
}
}
}
What does this do? I tried compiling the project, but I can't find what this compiles into.
Would it be something like this?
.feature-title + .listing-feature__summary {
color: #f00;
}
The & is just shorthand for the selector (.listing-feature__summary in your case).
The plus means that every .listing-feature__summary class that follows the .feature-title class will be affected by the styles added.
I found an online SASS compiler and plugged this code in and got.
.feature-title + .listing-feature__summary {
color: #f00;
}
This ends up being a sibling selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
Consider the following SCSS:
$color-black: #000000;
body {
--color: $color-black;
}
When it is compiled with node-sass version 4.7.2, it produces following CSS:
body {
--color: #000000;
}
When I compile the same SCSS with version 4.8.3 or higher, it produces following:
body {
--color: $color-black;
}
What am I missing? I checked release logs, but could not found anything useful. Also, I wonder if this change is genuine why does it have only minor version change? Should it not be a major release?
Also, what is my alternative? Should I use Interpolation?
Just use string interpolation:
$color-black: #000000;
body {
--color: #{$color-black};
}
Apparently the old behaviour is not intended and violated the language specs of SASS:
CSS variables mixed with SCSS variables don't emit proper CSS in 4.8+
CSS variables aren't properly compiled
Assigning SASS variables to CSS Variables (Custom Properties) no longer works
scss and css
I found a workaround to mapping the scss variables to css variables.
See Terry's answer for better use
Scss:
// sass variable map
$colors: (
color-black: #FFBB00
);
// loop over each name, color
:root {
// each item in color map
#each $name, $color in $colors {
--#{$name}: #{$color};
}
}
Css:
:root {
--color-black: #FFBB00;
}
I had an issue with older sass versions.
Trying to compile a list of variables coming from an array, it would get stuck with the double dash. Here's my solution in case it helps someone
$var-element:'--';
:root {
#each $color in $color-variables {
#{$var-element}#{nth($color, 1)}: #{nth($color, 2)};
}
}
Having issues compiling some bootstrap 4 modules (updating from beta3).
While the issue can be solved by setting #charset: 'UTF-8'; on _hover.scss mixin partial (which is noted as deprecated within the file), why would that be needed considering it should compile out of the box as previous beta versions.
Code in _hover.scss:
#mixin hover {
&:hover { #content; }
}
#mixin hover-focus {
&:hover,
&:focus {
#content;
}
}
#mixin plain-hover-focus {
&,
&:hover,
&:focus {
#content;
}
}
#mixin hover-focus-active {
&:hover,
&:focus,
&:active {
#content;
}
}
After going through SCSS files can't figure exactly what's wrong, quotes seem ok.
After going through it in detail seems to be the - character on top comments ("iOS-an issue..").
One can replace it for their own - character and should compile fine (or just add #charset: 'UTF-8'; at the top of the _hover.scss mixin file).
Issue report: https://github.com/twbs/bootstrap/issues/25391
I ran into the same charset problem.
Especially on OSX there seams to be a problem with ruby Encoding Settings.
I fixed it creating a config.rb file in the main project directory to tell ruby explicitly which charset encoding it should use.
Since sass and compass depend on ruby, chances good that this will fix your problems.
Encoding.default_external = 'utf-8'
I'm trying to convert a [www.bootswatch.com][1] theme from less to scss for my rails app.
Problem is I'm no expert on either SCSS or LESS :(
I've read up on some of the differences and I've figured variable differnces using # and $
I've got an issue with the my LESS code , can someone tell me what the snipet below should be when converted SCSS
// Buttons ====================================================================
.btn:active {
.box-shadow(none);
}
.btn-group.open .dropdown-toggle {
.box-shadow(none);
}
// Typography =================================================================
.text-primary,
.text-primary:hover {
color: $brand-primary;
}
.text-success,
.text-success:hover {
color: $brand-success;
}
.text-danger,
.text-danger:hover {
color: $brand-danger;
}
.text-warning,
.text-warning:hover {
color: $brand-warning;
}
When I run my app I'm getting the following message
Invalid CSS after " .box-shadow": expected "{", was "(none);"
You could install the bootstrap SASS for ruby: Bootstrap SASS Gem
But to better answer your question try #extend .box-shadow(none)
I need to compile a LESS file and mix in some of the classes used in other files, but I don't want to print the whole contents of the imported files.
This looks pretty much like silent selectors in SASS.
How can this be achieved?
"muted" imports are not yet implemented in the current stable version of less (1.4.2 as of as of this post), but are planned for inclusion in 1.5.0. source #github issues
They don't seem to be working in the current beta, but when they are finally baked in, the implementation should like this:
PSEUDO CODE
reference.less:
.not-awesome {
color: red;
}
.awesome {
color: blue;
}
main.less:
#import (mute) "foo.less";
.more-awesome:extend(.awesome){
font-size:8em;
}
output:
.awesome,
.more-awesome {
color: blue;
}
.more-awesome {
font-size: 8em;
}