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'
Related
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)};
}
}
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.
I've been using parameterless mixins for pure CSS animations so that my classes and my keyframes don't contain a bunch of repetitive styles, something similar to the following:
//css classes excluded for brevity, compile as expected
#mixin btn() {
color: black;
}
#mixin btn-hover() {
color: white;
}
#keyframes hover {
from {
#include btn();
}
to {
#include btn-hover();
}
}
Recently I converted those mixins to placeholder selectors like so:
//css classes excluded for brevity, compile as expected
%btn {
color: black;
}
%btn-hover {
color: white;
}
#keyframes hover {
from {
extend %btn;
}
to {
extend %btn-hover;
}
}
That didn't work, and in retrospect it's perfectly clear why not. What confuses me is why this compiles in the first place. The resulting CSS is valid #keyframes block that's completely empty:
#keyframes hover {
}
Assuming my understanding of how the extend concept works in Sass is correct and complete, using placeholder selectors in this manner makes no sense. Why is this valid syntax to begin with? Why don't I get a compile error?
It isn't considered valid and it should raise an error.
Error from Sass 3.3:
You may not #extend an outer selector from within #keyframes.
You may only #extend selectors within the same directive.
From "#extend %btn" on line 11.
Error from Sass 3.4:
Extend directives may only be used within rules.
If you are using Sass 3.2 or older, you should upgrade. If you're using LibSass, there's not much you can do about it other than report the issue on their bug tracker if it isn't already there.
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;
}