Error with CSS-Variables
See original GitHub issueI am not pretty sure about the error. I have made a screenshot and attached the .scss-file where it occurs.
Thanks in advance, Dennis
/**
* This is a card component for displaying text-/media-content in a grid.
**/
$cards-grid-size: 3;
$card-margin: $site-frame-width * 2 / 4;
.c-cards {
margin: - $card-margin;
--cards-grid-size: 3;// $cards-grid-size;
@include media("<small") {
--cards-grid-size: 1;
}
@include media(">=small","<large") {
--cards-grid-size: 2;
}
@include media(">=very-large") {
--cards-grid-size: 4;
}
}
.c-card {
float: left;
width: #{100% * (1 / $cards-grid-size)};
width: calc(100% * 1 / var(--cards-grid-size));
padding: $card-margin;
&--isHidden {
display: none;
}
// Double Sizing of 2x2 one
&--hasPreviewRatio2x2 {
width: #{100% * (2 / $cards-grid-size)};
width: calc(100% * 2 / var(--cards-grid-size));
}
// Hover-Effect
filter: saturate(75%);
transition: $base-transition;
&:hover, &:focus {
filter: saturate(120%);
// transform: translate(0, -3px);
}
.imageset,
img,
video {
background: $color-gray-ultralight;
}
}
/* Preview-Images */
// .c-card--hasPreviewImage {
// ...
// }
/* Preview-Videos */
// .c-card--hasPreviewVideo {
// ...
// }
/* Different Media-Ratios for Images & Video */
.c-card--hasPreviewRatio1x1 > .c-card__media,
.c-card--hasPreviewRatio2x2 > .c-card__media {
display: block;
position: relative;
&:before {
content: '';
display: block;
width: 100%;
padding-top: (1 / 1) * 100%;
}
> .imageset,
> img,
> video {
position: absolute !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
> video {
width: 100%;
height: 100%;
}
}
.c-card--hasPreviewRatio1x1\.62 > .c-card__media:before {
padding-top: (1.62 / 1) * 100%;
}
.c-card--hasPreviewRatio1\.62x1 > .c-card__media:before {
padding-top: (1 / 1.62) * 100%;
}
/* Preview-Text */
.c-card__quote {
background: $color-gray-ultralight;
color: $color-gray-ultradark;
@include font-monospace;
@include font-size(13px);
line-height: 1.6;
padding: 1rem;
font-style: italic;
border-top: 3px $color-gray-light solid;
+ .c-card__info {
border-top: 0;
transform: translate3d(0, 0, 0);
}
}
/* Info with Title, Summary & Tags */
.c-card__info {
@include font-monospace();
display: block;
border-top: 2px white solid;
background: $color-gray-ultradark;
background: black;
color: white;
position: relative;
padding: .8rem 1rem;
transition: $base-transition;
transform: translate3d(0, -1px, 0);
}
.c-card__title {
display: block;
color: inherit;
text-decoration: none;
margin-bottom: .3rem;
&:last-child {
margin-bottom: .1rem;
}
h2 {
margin: 0;
letter-spacing: .2px;
@include font-size(15px);
}
.o-icon {
opacity: 0;
transform: translateX(-3px);
transition: $base-transition;
.c-card:hover &,
.c-card:focus & {
transform: translateX(0);
opacity: 1;
}
}
}
.c-card__tags {
margin: 0;
text-overflow: ellipsis;
width: 100%;
ul {
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
margin: -.25rem;
}
a {
@include font-size(12px);
text-decoration: none;
color: $color-gray;
margin: .25rem;
}
ul > li {
}
}
Issue Analytics
- State:
- Created 6 years ago
- Reactions:12
- Comments:8 (1 by maintainers)
Top Results From Across the Web
Errors in CSS variables and calculations: How can I get error ...
First the spec. If a property contains one or more var() functions, and those functions are syntactically valid, the entire property's ...
Read more >var() - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla
The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any...
Read more >CSS variables (custom properties) bug & a potential crash
Due to crash being caused by really short CSS string which is possible to pass just as a style attribute to an HTML...
Read more >A user's guide to CSS variables – Increment: Frontend
CSS variables are custom properties that cascade normally and even inherit. They start with a reserved -- prefix, and there are no real...
Read more >Solved: CSS Variable - Adobe Support Community - 10146143
Solved: I have started using CSS variables and Dreamweaver CC ver 19 shows an error saying that it expects a RBRACE at line...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
VS Code 1.25.1
Please check validity of the block starting from line #3 CSScomb Core version: 4.2.0
1 | :root { 2 | --test-var: #fff; 3*| }
Syntax: css Gonzales PE version: 3.4.7
As far as I can tell, #275 is about scss variables but this error occurs when you try to declare a plain css variable.