I'm trying to use a simple map in sass to create margin classes.
$margins:(
"5": 5px,
"10": 10px,
"15": 15px,
"20": 20px,
"25": 25px,
"30": 30px
);
#each $margin in $margins{
.u-mt-#{$margin}{
width: $margin !important;
}
}
In SassMeister I'm getting the error.
Invalid CSS after ".u-mt-5 ": expected selector, was "5px"
Fixed it thanks
#each $margin, $margin in $margins{
.u-mt-#{$margin}{
width: $margin !important;
}
}
Related
I saw this code, when i was checking Drupal Omega 4 theme
%container {
#include container;
#include grid-background;
}
what does the '%container' mean?
what is the '%' for?
https://sass-lang.com/documentation/style-rules/placeholder-selectors
Placeholder Selectors: %foo
Sass supports a special type of selector called a “placeholder
selector”. These look like class and id selectors, except the # or .
is replaced by %. They’re meant to be used with the #extend directive;
for more information see #extend-Only Selectors.
On their own, without any use of #extend, rulesets that use
placeholder selectors will not be rendered to CSS.
Example
SCSS SYNTAX
%toolbelt {
box-sizing: border-box;
border-top: 1px rgba(#000, .12) solid;
padding: 16px 0;
width: 100%;
&:hover { border: 2px rgba(#000, .5) solid; }
}
.action-buttons {
#extend %toolbelt;
color: #4285f4;
}
.reset-buttons {
#extend %toolbelt;
color: #cddc39;
}
CSS Output
.action-buttons, .reset-buttons {
box-sizing: border-box;
border-top: 1px rgba(0, 0, 0, 0.12) solid;
padding: 16px 0;
width: 100%;
}
.action-buttons:hover, .reset-buttons:hover {
border: 2px rgba(0, 0, 0, 0.5) solid;
}
.action-buttons {
color: #4285f4;
}
.reset-buttons {
color: #cddc39;
}
SASS
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
#extend %icon;
/* error specific styles... */
}
.info-icon {
#extend %icon;
/* info specific styles... */
}
Output
.error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
/* error specific styles... */
}
.info-icon {
/* info specific styles... */
}
Note
Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output.
More info
http://thesassway.com/intermediate/understanding-placeholder-selectors
Tools
If you want to play around Sass please use - http://sassmeister.com/
It's a placeholder selector. It doesn't do anything on its own but can be extended, like an abstract base class.
I'm using Sass for styles. When i try to compile this part of code:
.heart {
width: $size * 2;
height: $size * 1.65;
cursor: pointer;
&:before {
position: absolute;
content: "";
left: $size;
width: $size;
height: $size * 1.65;
background: #fff;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
&:after {
#extend .heart:before;
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
}
I got this message:
#extend .heart:before;
Error: compound selectors may longer be extended.
Consider `#extend .heart, :before` instead.
See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extending_compound_selectors for details.
#extend .heart:before;
It doesn't compile with terminal, but it's compile and works as expected with Prepros application. Any ideas why it doesn't work when i try to compile with sass command?
I used this example: https://codepen.io/souporserious/pen/yEntv
I think you need to create a placeholder like this; Also I know that there are some bugs in command line compiling with #extand and pseudo-elements around 2016.
%placeholder {
position: absolute;
content: "";
left: $size;
width: $size;
height: $size * 1.65;
background: #fff;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart {
width: $size * 2;
height: $size * 1.65;
cursor: pointer;
&:before {
#extend %placeholder;
}
&:after {
#extend %placeholder;
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
}
for angular 8
npm install node-sass --save-dev
should be tried; also remove sass with
npm remove sass
and comfigure to use node-sass only in your webpack.prod.js
const sass = require('node-sass');
...
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', {
loader: 'sass-loader',
options: { implementation: sass }
}],
exclude: /(vendor\.scss|global\.scss)/
},
just adding node-sass as it is described in some github issues answers didn't help me, I was forced to remove sass and point explicitly to node-sass implementation
In this SCSS code, I'm using mixin btn-structure and extend %red-color to get all declarations under one class contrary to my expectation SCSS output two separate rules for the same class as shown in output below:
%red-color{
color: red }
#mixin btn-structure
($text-case: null, $text-shadow: null, $decoration: none ){
display: inline-block;
text: {
decoration: $decoration;
transform: $text-case;
shadow: $text-shadow }
}
.link-btn{
#include btn-structure($text-case: 'uppercase', $decoration: underline);
#extend %red-color
}
OUTPUT
.link-btn {
color: red;
}
.link-btn {
display: inline-block;
text-decoration: underline;
text-transform: "uppercase";
}
I don't want the SASS to output two separate rules belonging to same class how to get SASS to output one rule if that belongs to one class.
This is the actual behaviour and a use-case of Sass #extend.
Explanation
To make it clear, update your code as below
%red-color{
color: red
}
#mixin btn-structure ($text-case: null, $text-shadow: null, $decoration: none ){
display: inline-block;
text: {
decoration: $decoration;
transform: $text-case;
shadow: $text-shadow
}
}
.link-btn{
#extend %red-color;
#include btn-structure($text-case: 'uppercase', $decoration: underline);
}
.test-class{
#extend %red-color;
#include btn-structure($text-case: 'uppercase', $decoration: underline);
}
Which would compile as,
.link-btn, .test-class {
color: red;
}
.link-btn {
display: inline-block;
text-decoration: underline;
text-transform: "uppercase";
}
.test-class {
display: inline-block;
text-decoration: underline;
text-transform: "uppercase";
}
As you could see, #extend is used to "share a set of CSS properties from one selector to another", which can be clubbed together (.link-btn, .test-class). Whereas, #include is used to insert the styles where ever required, which is not clubbed.
Solution
For your requirement, you can resort to #include and declare a mixin #mixin red-color as below,
%red-color{
color: red
}
#mixin red-color{
color: red
}
#mixin btn-structure ($text-case: null, $text-shadow: null, $decoration: none ){
display: inline-block;
text: {
decoration: $decoration;
transform: $text-case;
shadow: $text-shadow
}
}
.link-btn{
#include red-color;
#include btn-structure($text-case: 'uppercase', $decoration: underline);
}
Output
And the compiled css will be,
.link-btn {
color: red;
display: inline-block;
text-decoration: underline;
text-transform: "uppercase";
}
Hope this helps.
First time using SCSS, and testing my knowledge from the Sass-Lang.com guide. According to the guide, it is possible to both set variables and use mixins to simplify your CSS.
I was coding an animation where the div is clipped from bottom to top. I used variables to set the initial and final clip-path settings, and used them while calling a mixin. Yet I get the error, 'Invalid CSS after "...slider-initial)": expected "{", was "; }"'. What am I doing wrong?
Here is my code:
<body>
<section id='main'>
<div id='left'></div>
<div id='right'></div>
<section>
</body>
$slider-initial: inset(0 0 0 0);
$slider-final: inset(0 0 100% 0);
#mixin slider-clip($slider-state) {
-webkit-clip-path: $slider-state;
clip-path: $slider-state;
}
body {
height: 100%; width: 100%;
margin: 0 auto;
}
#main {
height: 64vh; width: 38vw;
margin: 0 auto;
margin-top: 10%;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
border: 1vh solid black;
}
#left {
order: 1;
width: 4%;
height: 100%;
margin-left: 46%;
background: green;
}
#right {
opacity: 1;
order: 2;
width: 4%;
height: 100%;
margin: auto;
margin-left: 0;
animation-name: dropdown;
animation-duration: 4s;
background: red;
}
#keyframes dropdown {
from { #mixin slider-clip($slider-initial); }
to { #mixin slider-clip($slider-final); }
}
You called your mixin in a wrong way:
#keyframes dropdown {
from { #mixin slider-clip($slider-initial); }
to { #mixin slider-clip($slider-final); }
}
In the guide on sass-lang.com, you can see the following example of how to include a mixin:
.box { #include border-radius(10px); }
Applied to your case, your code should look like this:
#keyframes dropdown {
from { #include slider-clip($slider-inital); }
to { #include slider-clip($slider-final); }
}
We were provided a number of colors with specific hover-state colors associated:
$red: #cb333b;
$red-hover: #fe666e;
$brown: #544742;
$brown-hover: #877a75;
etc.
Since all the colors are formatted the same way, so I was hoping to write a mixin that takes the color's variable name, then concatenates -hover to the end. This is my first try:
#mixin button_colorizor($color) {
border-color: $color;
color: $color;
&:hover {
color: #{$color}-hover;
border-color: #{$color}-hover;
}
}
But what this does is output a color like this: #f1735f-hover. The same thing when I do this: color: #{$color+-hover};
You can create map of colors. And get color values by its names.
Demo on sassmeister.
$colors: (
red: #cb333b,
red-hover: #fe666e,
brown: #544742,
brown-hover: #877a75
);
#mixin button_colorizor($color) {
color: map-get($colors, $color);
border-color: map-get($colors, $color);
&:hover {
color: map-get($colors, $color + '-hover');
border-color: map-get($colors, $color + '-hover');
}
}
a {
#include button_colorizor(red);
}
span {
#include button_colorizor(brown);
}
This code is compiled to css:
a {
color: #cb333b;
border-color: #cb333b;
}
a:hover {
color: #fe666e;
border-color: #fe666e;
}
span {
color: #544742;
border-color: #544742;
}
span:hover {
color: #877a75;
border-color: #877a75;
}