In my scss code I'm trying to make placeholder like:
%input__label {
color: red;
&_content {
color: blue;
}
}
And then extend it:
.input__label {
#extend %input__label;
}
When I'm trying to compile that code only input__label compiles, but input__label_content doesn't:
.input__label {
color: red;
}
(But for example with pseudo elements - &::after everything works fine)
Why is this hapenning? I'm using node v7.10.1 and node-sass v4.5.3.
Use a mixin instead of an extend:
#mixin input__label {
color: red;
&_content {
color: blue;
}
}
.input__label {
#include input__label;
}
The functionality to do it via extends is purposefully disallowed:
https://github.com/sass/sass/commit/face3172930b515ac2040e450d4db3ffe01c31b5
Related
How can I have this output using Sass?
.class.active .class-name1 {}
.class.active .class-name2 {}
Here is what I tried :
.class {
&.avtive {
&-name1 {
}
&-name2 {
}
}
}
You need to keep a reference to the outer class name, and interpolate it for your -name classes. Using color: red as an example of the style to apply:
.class {
$outer-class: &;
&.active {
#{$outer-class}-name1 {
color: red;
}
#{$outer-class}-name2 {
color: red;
}
}
}
I created a SASS #mixin which contains #if conditions to assign styling to elements based on their z-index property to create some sort of elevation.
However what ever I am trying it will not work out.
I'm pretty sure I am doing something just slightly wrong that affects everything else.
I'd appreciate your feedback. Thanks in advance!
$background: #121212;
$surface: #1f1f1f;
$surface-shade_1: #282828;
$surface-shade_2: #303030;
%surface {
background-color: $surface;
}
%surface-shade_1 {
background-color: $surface-shade_1;
}
%surface-shade_2 {
background-color: $surface-shade_2;
}
#mixin elevation($elevationValue) {
#if $elevationValue>0 {
#extend %surface;
}
#else if $elevationValue>4 or $elevationValue=4 {
#extend %surface-shade_1;
}
#else if $elevationValue>8 or $elevationValue=8 {
#extend %surface-shade_2;
}
z-index: $elevationValue * 50;
}
nav {
#mixin elevation(4);
}
If you want to use #mixin inside the CSS files you can use like #include mixin-name and also use directly $elevationValue >= 4 instead of $elevationValue>4 or $elevationValue=4 it becomes much cleaner.
$background: #121212;
$surface: #1f1f1f;
$surface-shade_1: #282828;
$surface-shade_2: #303030;
%surface {
background-color: $surface;
}
%surface-shade_1 {
background-color: $surface-shade_1;
}
%surface-shade_2 {
background-color: $surface-shade_2;
}
#mixin elevation($elevationValue) {
#if $elevationValue > 0 {
#extend %surface;
}
#else if $elevationValue >= 4 {
#extend %surface-shade_1;
}
#else if $elevationValue >= 8 {
#extend %surface-shade_2;
}
z-index: $elevationValue * 50;
}
nav {
#include elevation(4);
}
in the Header of my HTML-Page i set the following CSS Variables:
:root{
--data-color-primary: #ffcc00;
--data-color-secondary: #4b4b4b;
}
In my SASS-File i use it as follow:
DIV.color {
&.color-primary {
background-color: var(--data-color-primary);
}
&.color-secondary {
background-color: var(--data-color-secondary);
}
}
Now i try to set the font-color depending on the brightness of the background-color:
#function set-notification-text-color($color) {
#if (lightness($color) > 60) {
#return #000000;
} #else {
#return #ffffff;
}
}
DIV.color{
&.color-primary {
background-color: var(--data-color-primary);
color: set-notification-text-color(var(--data-color-primary));
}
}
But in my SASS-compliler i get the following i get the following Error:
Error: argument $color of lightness($color) must be a color
How is ist possible to hand over der CSS variable to the function.
My Problem is, the CSS Variables are set in the Backend of my CMS by User (Liferay 7) an will be rendered in a *.FTL-File and is printed in the HTML-Code.
$primary: ${clr_primary};
$secondary: ${clr_primary};
and then i cant use the SASS-Variable $primary in my SASS-File.
Use SASS variables in your CSS variables.
$primary: #ffcc00;
$secondary: #4b4b4b;
:root{
--data-color-primary: #{$primary};
--data-color-secondary: #{$secondary};
}
Now call your mixin
DIV.color{
&.color-primary {
background-color: $primary;
color: set-notification-text-color($primary);
}
}
Another options would be to create a mixin which retrieves the CSS variable
#function color($color-name) {
#return var(--data-color-#{$color-name});
}
Now call that function like so
DIV.color {
&.color-primary {
background-color: color(primary);
color: set-notification-text-color(color(primary));
}
}
Check out this link for usefull information about combining CSS and SASS variables
https://codepen.io/jakealbaugh/post/css4-variables-and-sass
If you need to change CSS variables outside of :root you can do the following
.class {
// sass-lint:disable no-duplicate-properties
#{--background}: transparent;
#{--background-focused}: transparent;
// sass-lint:enable no-duplicate-properties
}
and this compiles to
.class {
--background: transparent;
--background-focused: transparent;
}
I am trying to get a mixin done to achieve the following.
Im having a list of social buttons. They each share the same styles except the background-color and :hover states.
My current SASS approach. (will return invalid CSS error)
#mixin btn-social($network) {
.#{$network} {
background: $#{$network}; // trying to reference a global variable
&:hover, &:focus {
background: darken($#{$network}, $darken-modifier);
}
}
}
To render like this:
.facebook {
background: blue; // stored in $facebook
}
.facebook:hover, .facebook:focus {
background: darkblue; //darkend value above
}
I'm somehow lacking the right terms for a proper google search. I'd appreciate a push in the right direction.
Thanks for the help.
You can use a sass map to store the color variables and then find the right color using the name you pass into your mixin like so jsfiddle:
$colors: (
facebook: blue,
twitter: red
);
$darken-modifier: 100%;
#mixin btn-social($network) {
.#{$network} {
background: map-get($colors, $network);
&:hover, &:focus {
background: darken(map-get($colors, $network), $darken-modifier);
}
}
}
#include btn-social(facebook);
#include btn-social(twitter);
<a class="facebook">
facebook
</a>
<a class="twitter">
twitter
</a>
Edit: updated to include #TomOakley's suggestion below.
Please try the following:
#mixin btn-social($network, $color, $darkColor) {
#{$network} {
background: $color;
&:hover, &:focus {
background: $darkColor;
}
}
}
.foo {
#include btn-social('.facebook', blue, darkblue)
}
This compiles to:
.foo .facebook {
background: blue;
}
.foo .facebook:hover, .foo .facebook:focus {
background: darkblue;
}
Check out this reference for SASS interpolation.
I want to create a sass file that the selectors will be attribute selectors.
When I work with class selectors, in most of the cases I will do
.parent {
&-child {
}
}
which gives me the following css: .parent-child {}.
I want to achieve the same thing with attribute selectors:
[data-parent] {
&-child {
}
}
which I want to become: [data-parent-child] {}
someone knows how to achieve this? thanks.
You can use this mixin as a workaround to get the desired result.
#mixin child-attribute($child) {
$string: inspect(&);
$original: str-slice($string, 3, -4);
#at-root #{ selector-replace(&, &, "[#{$original}#{$child}]" ) } {
#content;
}
}
The code simply does the following
$string variable is responsible for turning the parent selector to a string using the inspect function
$original variable is responsible for getting the text content of the $string variable i.e the value 'data-parent' from '([data-parent])'
selector-replace function then replaces the parent selector with the concatenation of the $original variable and child variable
When used in the following ways
[data-parent] {
#include child-attribute('-child') {
color: green;
}
}
The css output
[data-parent-child] {
color: green;
}
Depending on what you want to achieve, it can also be used like this
[grandparent] {
#include child-attribute('-parent') {
color: white;
#include child-attribute('-child') {
color: blue;
}
}
}
Which generates the following css
[grandparent-parent] {
color: white;
}
[grandparent-parent-child] {
color: blue;
}
Hope this helps you
You can create mixin that will set styles for elements with data attribytes.
Scss:
#mixin data($name) {
[data-#{$name}] {
#content;
}
}
* {
#include data('lol') {
color: red;
};
}
Css output:
* [data-lol] {
color: red;
}
DEMO
I would go down a slightly different route of having a class on your elements that contain the data attributes.
<div class="data-obj" data-parent="true"></div>
<div class="data-obj" data-parent-child="true"></div>
then in your SASS do
.data-obj {
...
&[data-parent] { ... }
&[data-parent-child] { ... }
}