SASS Invalid css error - ruby

I just started with sass and installed prepros. I tried to compile an .scss file and got an error:
Syntax error: Invalid CSS after " color: ": expected expression (e.g. 1px, bold), was "#blue;"
The .scss code:
.footer {
clear: both;
background-color: #blue;
}
I installed Ruby, and prepros.


SCSS uses $ to denote variables so it should be background-color: $blue;


It looks like your syntax is wrong. In Sass, # is for things like imports, media directives, partials (includes) and extends.
If you want to define a specific value for blue, and then reuse it, then the syntax is something like this:
$blue: #3333FF;
a {
font-weight: bold;
color: $blue;
}

Related

Ionic4 build error: Undefined SCSS variable in page.scss

I created a blank Ionic4 app and in the src/global.scss, I declare a variable $padding: 16px. I then tried to use the $padding in an element in home.page.scss as follows:
.highlight {
padding: $padding;
}
I expected it to output the following as it does in Ionic3:
.highlight {
padding: 16px;
}
Instead in Ionic4 I am getting an undefined variable on the $padding during the build process. Can we not use global SCSS variables within the page styles anymore or am I missing something obvious here?

You need to import the global.scss file in your page.scss file to get it work
#import '../../global.scss';
Since global.scss already include for the project. So the solution is that you make a new file common.scss and import it inside page.scss with
#import '../../common.scss';
And inside common.scss you can type
$padding: 16px

Using irregular CSS in a .scss file

I have some funky formatting which I am using to override a Polymer component. It's the custom variables mixin. Scss does not like it to compile with. Is it possible to set a chunk that doesn't get compiled the sass way? Similar to jekyll raw html tag.
For example
// tag do not compile with sass //
--my-component-custom-mixin: {
background-color: #000;
color: #fff;
};
// tag finish do not compile with sass //

You could use Sass string interpolation (#{'...'}) to escape the CSS mixin:
SELECTOR {
--CSS-VARIABLE-NAME: #{'CSS-VARIABLE-VALUE'};
}
Example:
my-view1 {
--my-component-custom-mixin: #{'{
background-color: #000;
color: #fff;
}'};
}
demo

compiling sass with grunt produce invalid property name

I don't know why but while compiling with grunt or anything there is an error called invalid property name
#flotTip {
border: none !important;
font-size: $font-size-small !important;
line-height: 1px !important;
#extend .tooltip-inner() !important;
}
in the above code in the line-height it produces an undefined property. My task was to convert all less files into sass files. Used many solutions to convert all of them to sass as far as I can find. But this one I can't find any solution. Can anyone answer what might be the problem?

Extend is only for extending simple selectors, like class, element, or id. You cannot use !important with #extend. This is the correct way to use extend:
.foo {
color: red;
}
#flotTip {
#extend .foo;
}
You may be confused confusing extends with mixins, which also cannot use !important. This is the correct way to use mixins:
#mixin foo() {
color: red;
}
#flotTip {
#include foo();
}

The line-height: 1px !important; line looks fine. The problem is with the following line. If you're trying to include a mixin, use #include and don't prefix the mixin's name with . (dot). Also, don't put !important after it.

I would guess that you are using #extend incorrectly. See the docs here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works

#include establish-baseline($base-font-size); generates no output?

I have the following in my scss file:
#import compass
$base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';
html {
#include establish-baseline($base-font-size);
font-family: $lato;
}
but when I check my CSS, the #include establish-baseline rule doesn't output anything and I get no compilation errors. Anyone any idea what could be wrong?

The main problem:
In your case, you should put the imported file name "compass" between quotes:
#import "compass"
If you only want to import establish-baseline mixin use instead:
#import "compass/typography/vertical_rhythm";
Some tips:
It's not necessary to set $base-font-size: 16px because imported compass files comes with a $base-font-size: 16px !defaultvariable declaration
As #nyuen says you don't need to pass $base-font-size as an argument and you should move the #include establish-baseline out of the html.
Here is the modified code:
// you should use the file name to import between quotes
#import "compass";
// $base-font-size: 16px !default; it's already declared in compass
// $base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';
// This include should be use out of any selector
#include establish-baseline();
html {
font-family: $lato;
}

I'm just learning about vertical rhythms as well, and here's my suggestion:
I think the syntax should be "#include establish-baseline;" (without the $base-font-size argument because when you include the establish-baseline mixin, it automatically looks for that argument, as well as $base-line-height), and you can also move that line out of your html selector to under the $base-line-height declaration.

Sass using #extend % from within a partial css file

I have style.scss that imports
_declarations.scss
_button.scss
in _declarations.scss, I have a placeholder declaration of
%blah{
colour: red;
width: 100%;
}
Inside style.scss, I can have a selector like this
.extend_it{
#extend %blah;
}
And the styles I'd expect are pulled into the .extend_it selector.
However if I try the same from within _button.scss I am unable to extend the %blah placeholder.
Is there a way around this?

Resources