I want to build
.btn-default {
color: #ccc;
&:hover,
&:focus {
color: #ddd;
}
}
into
.btn-default {
color: #ccc;
}
.btn-default:hover,
.btn-default:focus {
color: #ddd;
}
But instead, it compares into
.btn-default {
color: #ccc;
}
.btn-default:hover, .btn-default:focus {
color: #ddd;
}
On the other hand, it works fine without &, which build
a,
.btn {
color: #ccc;
}
into
a,
.btn {
color: #ccc;
}
So, how should I build & into multi-lines?
I use gulp-sass. Option is available here.
Sass only provide 4 compile output style:
(https://github.com/sass/node-sass#outputstyle)
:nested
:expanded
:compact
:compressed
There's no way to get the result you want, but you can use something like : https://github.com/csscomb/csscomb.js to format it.
Related
I am moving from Sass to PostCSS (it's what is used here in my company).
I would like to be able to chain the parent selector to my selector what I did with the #at-root syntax in Sass.
I already installed the postcss-atroot plugin but when I use the Sass syntax I get the following error:
SyntaxError
(514:0) Unknown word
The error seems to come from this part {&}
That's what I try to achieve:
Sass:
.foo {
color: blue;
text-decoration: underline;
#at-root {
p#{&} {
color: red;
text-decoration: none;
}
.bar#{&} {
color: red;
text-decoration: none;
}
}
}
CSS:
.foo {
color: blue;
text-decoration: underline;
}
p.foo {
color: red;
text-decoration: none;
}
.bar.foo {
color: red;
text-decoration: none;
}
How would I have to write this the PostCSS way?
Thanks in advance for your help!
I have a scss file that I need to orgnanize by nesting some of these properties, I've tried to nest them but the properties do not seem to work when I nest them. I was just wondering if there is a proper way to do it, thanks in advance!
This is how it is working at the moment:
input~.checked-icon {
color: $primary-color;
background-color: transparent;
&:hover {
background-color: transparent;
}
}
input:disabled~.checked-icon {
color: $disabled-color;
}
This is what i've tried:
input~.checked-icon {
color: $primary-color;
background-color: transparent;
&:hover {
background-color: transparent;
}
&:disabled {
color: $disabled-color;
}
}
Your current solution is creating a selector that looks like this:
input ~ .checked-icon:disabled {
color: $disabled-color;
}
where the :disabled is applied to the .checked-icon.
The additional :disabled rule needs to be applied to the input, so you would want to use:
input {
&~.checked-icon {
color: $primary-color;
background-color: transparent;
&:hover {
background-color: transparent;
}
}
&:disabled~.checked-icon {
color: $disabled-color;
}
}
Keep in mind there are lots of useful online tools for playing with Sass and viewing the compiled code. Like Sassmeister.
This question already has answers here:
Sass Nesting for :hover does not work [duplicate]
(2 answers)
Closed 3 years ago.
I have *.scss file in an Angular 7 project.
After compiling it, the compiler adds unwanted whitespace to the css, which leads to wrong results in the UI.
To reproduce the error go to...
https://www.sassmeister.com/
...copy and paste the following code.
$color-background-default: white;
$color-foreground-default: black;
$color-background-disabled: #d3d3d3;
$color-foreground-disabled: #808080;
$color-background-mouseover: #00a7dc;
$color-foreground-mouseover: white;
$color-background-mousedown: #00467F;
$color-foreground-mousedown: white;
.Tab
{
background-color: $color-background-default;
color: $color-foreground-default;
:hover
{
background-color: $color-background-mouseover;
color: $color-foreground-mouseover;
}
:active
{
background-color: $color-background-mousedown;
color: $color-foreground-mousedown;
border-color: $color-background-mousedown;
}
}
In the CSS box of Sassmeister you should see, that there are whitespaces between ".Tab" and "hover" and "active" that look like this:
.Tab {
background-color: white;
color: black;
}
//WHITESPACE AFTER Tab
.Tab :hover {
background-color: #00a7dc;
color: white;
}
//WHITESPACE AFTER Tab
.Tab :active {
background-color: #00467F;
color: white;
border-color: #00467F;
}
Now when I remove the whitespaces between Tab and hover and active it looks like this:
.Tab {
background-color: white;
color: black;
}
//NO WHITESPACE AFTER Tab!
.Tab:hover {
background-color: #00a7dc;
color: white;
}
// NO WHITESPACE AFTER Tab!
.Tab:active {
background-color: #00467F;
color: white;
border-color: #00467F;
}
The second option without whitespaces gives me the correct UI result.
My question: How can I avoid these whitespaces in Angular 7?
The parent selector, &, is a special selector invented by Sass that’s
used in nested selectors to refer to the outer selector. It makes it
possible to re-use the outer selector in more complex ways, like
adding a pseudo-class or adding a selector before the parent.
(from SASS official documentation)
So when you write rules for pseudo-class (before, after, hover, active etc.), to refer to the outer selector (only one level higher), put the ampersand like this:
.link {
color: blue;
&:hover {
color: green;
}
}
So, your SCSS code can be rewritten as:
$color-background-default: white;
$color-foreground-default: black;
$color-background-disabled: #d3d3d3;
$color-foreground-disabled: #808080;
$color-background-mouseover: #00a7dc;
$color-foreground-mouseover: white;
$color-background-mousedown: #00467F;
$color-foreground-mousedown: white;
.Tab
{
background-color: $color-background-default;
color: $color-foreground-default;
&:hover
{
background-color: $color-background-mouseover;
color: $color-foreground-mouseover;
}
&:active
{
background-color: $color-background-mousedown;
color: $color-foreground-mousedown;
border-color: $color-background-mousedown;
}
}
You're looking for the sass ampersand.
.Tab {
:hover {
...
}
}
...should be:
.Tab {
&:hover {
...
}
}
& means: "current selector". You use &:hover to specify
#{currentSelector}:hover.
Without the ampersand, it results into #{currentSelector} :hover and that's the way you want it to work for constructs like
.a {
.b {
...
}
}
... which parses as .a .b {...}.
A more ample explanation here.
Note: the ampersand also allows specifying a prefix to current selector. For example:
.a {
.b {
prop: value;
.c & {
prop: otherValue;
}
}
}
will parse into:
.a .b { prop: value; }
.c .a .b { prop: otherValue; }
My idea is that I would like to write silent classes for input[type=text], input[type="password"] and input[type=submit]. I would then #extend them in a mixin by passing hem through as a variable.
My parser is throwing this error;
Syntax error: Invalid CSS after " #extend ": expected selector_sequence, was "$type;"
Here is my code;
%text {
(text styling)
}
%password {
#extend %text;
}
%submit {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
#mixin input($type) {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
#extend $type;
}
Any help would be appreciated
try using variables interpolation
#extend #{$type};
Further information on SASS Reference
While Fabrizio's answer is formally correct, consider not going that way.
There's a great rule in programming of any kind: "keep it simple, stupid!" aka KISS.
Though SASS provides such advanced facilities as extends and mixins, it doesn't mean that you should use them as much as possible. Don't make your code complicated when you don't have to!
This code does exactly what you want: applying styles to input[...] selectors:
input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
input[type=text], input[type=password] {
font-family: Verdana; // Text styles
}
input[type=submit] {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
If you want to apply styles to custom classes/ids, consider this approach:
/////////////////
// Silent classes
/////////////////
%input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
%text {
#extend %input;
font-family: Verdana;
}
%password {
#extend %text;
}
%submit {
#extend %input;
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
///////////////////////////
// Applying silent classes:
///////////////////////////
.some .weirdly .nested input[type=text] {
#extend %text;
}
.password {
#extend %password;
}
#the-submit-button {
#extend %submit;
}
Demo: http://sassbin.com/gist/5956909/
My idea is that I would like to write silent classes for input[type=text], input[type="password"] and input[type=submit]. I would then #extend them in a mixin by passing hem through as a variable.
My parser is throwing this error;
Syntax error: Invalid CSS after " #extend ": expected selector_sequence, was "$type;"
Here is my code;
%text {
(text styling)
}
%password {
#extend %text;
}
%submit {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
#mixin input($type) {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
#extend $type;
}
Any help would be appreciated
try using variables interpolation
#extend #{$type};
Further information on SASS Reference
While Fabrizio's answer is formally correct, consider not going that way.
There's a great rule in programming of any kind: "keep it simple, stupid!" aka KISS.
Though SASS provides such advanced facilities as extends and mixins, it doesn't mean that you should use them as much as possible. Don't make your code complicated when you don't have to!
This code does exactly what you want: applying styles to input[...] selectors:
input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
input[type=text], input[type=password] {
font-family: Verdana; // Text styles
}
input[type=submit] {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
If you want to apply styles to custom classes/ids, consider this approach:
/////////////////
// Silent classes
/////////////////
%input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
%text {
#extend %input;
font-family: Verdana;
}
%password {
#extend %text;
}
%submit {
#extend %input;
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
///////////////////////////
// Applying silent classes:
///////////////////////////
.some .weirdly .nested input[type=text] {
#extend %text;
}
.password {
#extend %password;
}
#the-submit-button {
#extend %submit;
}
Demo: http://sassbin.com/gist/5956909/