I have _extandable.scss file with one placeholder selector:
%text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
and I'm trying to use it in another file:
#use 'extendable';
.text-ellipsis {
#extend extendable.%text-ellipsis;
}
The output of sass-loader is an error:
SassError: Expected identifier.
╷
4 │ #extend extendable.%text-ellipsis;
│ ^
╵
src/assets/styles/_component.scss 4:22 #import
What's the right way of importing of placeholder selectors using #use rule?
After some investigation I've found out that it's incorrect syntax. Placeholder selectors have global scope during compiling, so we cannot write like this and we don't need to do it.
Related
i am struggling with breaktpoints in SASS.
I have this file structure
style.scss
_layout.scss
_variables.scss
I wanna use code breakpotints from _variables.scss in _layout.scss
_variables.scss
$screen-xl-min: 1200px;
#mixin xl {
#media (min-width: #{$screen-xl-min}) {
#content;
}
}
_layout.scss
#use 'variables';
nav {
height: 80px;
#include xl {
background-color: red;
}
}
style.scss
#use 'variables';
#use 'layout';
And I have error
SassError: Undefined mixin.
Can someone tell me, what am I doing wrong? Thanks a lot for a help!
Try and change
#use 'variables'
for
#use 'variables' as *;
Check the documentation: https://sass-lang.com/documentation/at-rules/use
In your example correct way will be write #include variables.xl {}
Or modify #use rule like #Café wrote
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
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
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?
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;
}