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)
Related
Is there a way to see the CSS that corresponds to the SCSS when we are using SCSS as the preprocessor for Angular?
There is an answer here:
When using angular with scss, how can I see the translated css?
And it mentions using the --extract-css option, however when I try that it looks like it has been deprecated:
sandbox/project $ ng build --extract-css
Unknown option: '--extract-css'
Thoughts?
Styles in Angular Build Files
In your build files the styles of components will actually be compiled in the main.js file. You can find it in the network tab of your browsers developertools.
You will also see a file called styles.css, but this will only contain your global styles. This is because of Angulars view-encapsulation of styles per component. The behavior of angular may change if you change the view-encapsulation strategy as explained here to:
Emulated (default)
ShadowDOM
None
I would not recommend doing that though.
However, if you want you can compile your sass files into css using the command line tool you can install as explained on the official sass website.
You can also just use online sass converters like thisone.
If you are just interested in the global styles here's a reference to How you can switch the format from scss to css in your browser.
Example
app.component.scss
p {
background-color: orange;
}
styles.scss
#import 'default';
p {
color: red;
&:hover {
color: blue;
}
}
default.scss
h1 {
color: teal;
}
Result in Build
styles.css:
h1 {
color: teal;
}
p {
color: red;
}
p:hover {
color: blue;
}
main.js:
AppComponent.ɵfac = function AppComponent_Factory(t) { return new (t || AppComponent)(); };
AppComponent.ɵcmp = /*#__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: AppComponent, selectors: [["app-root"]], decls: 1, vars: 0, template: function AppComponent_Template(rf, ctx) { if (rf & 1) {
_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](0, "lib-my-lib");
} }, directives: [my_lib__WEBPACK_IMPORTED_MODULE_1__.MyLibComponent], styles: ["p[_ngcontent-%COMP%] {\n background-color: orange;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC5jb21wb25lbnQuc2NzcyIsIi4uXFwuLlxcLi5cXC4uXFxBbmd1bGFyJTIwUHJvamVjdHNcXGxpYi1leGFtcGxlXFxzcmNcXGFwcFxcYXBwLmNvbXBvbmVudC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0Usd0JBQUE7QUNDRiIsImZpbGUiOiJhcHAuY29tcG9uZW50LnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyJwIHtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiBvcmFuZ2U7XHJcbn1cclxuIiwicCB7XG4gIGJhY2tncm91bmQtY29sb3I6IG9yYW5nZTtcbn0iXX0= */"] });
*Note the orange background-color in the last line.
This is just a complement to the accepted answer. I wrote it up in a medium article, as it was not immediately obvious as styles.scss is opened first when selecting elements in Chrome Developer Tooling, but styles.css is in the tab right next to it.
https://fireflysemantics.medium.com/viewing-generated-global-css-for-angular-sass-projects-857a6887ff0b
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'
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 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;
}