scss-lint is a tool to help keep your SCSS files clean and readable. This tag should be used only in case of problems with the tool itself and not in case of SASS / SCSS problems
Questions tagged [scss-lint]
177 questions
0
votes
1 answer
How to properly write nested classes in CSS
I am using an example from a library @dndkit, so it has some CSS modules for example Item.module.css. The CSS inside those files is not properly working as I forked it from the codepen.
It uses some nested CSS classes or something but I cannot…
kukri
- 93
- 1
- 8
0
votes
0 answers
ERROR: SassError: $map: null is not a map
I was trying to add theme changing property in my react website, for that i used this method in scss file:`
$themes: (
light: (
textColor: #000,
bg: white,
logo: darkblue,
bgSoft: #f6f3f3,
textColorSoft: #555,
border:…
Anonymous
- 1
- 1
0
votes
1 answer
SCSS Modify the variable of a variable on click
I'm using a template from another developer made in SCSS and vue.js to develop online courses. All colors are using the SCSS variable $primary and $secondary. I was thinking of inserting a color-blind option that would cycle through complementary…
SlayerCat
- 146
- 2
- 6
0
votes
1 answer
How to create inner border into pie chart using HTML and CSS
I have created pie chart like this using HTML and css
I tried Below Code -
HTML -
CSS -
.pie-chart {
margin-left: 10px;
--size: 8rem;
--fg: #369;
--bg: #def;
width:…
Sushant
- 3
- 1
0
votes
1 answer
How can I declare two different configurations to .stylelint
I use Stylelint on my project to check styles.
I'm using a plugin that should only run on one folder. And the main configuration that is done for the whole project.
.stylelint file:
{
"extends": "stylelint-config-standard",
"plugins": [
…
Vladislav Kochurko
- 35
- 5
0
votes
1 answer
Error on & with attribute selector in SCSS
SCSS code: .parent-class { &[dir='rtl'] {
&__cta {
p {
margin-left: 6px;
margin-right: initial;
}
} }
}
Error: sass error Invalid parent selector "[dir=rtl]"
&[dir='rtl'] { &__cta {
p {
Sudhakar Lahane
- 137
- 1
- 2
- 12
0
votes
0 answers
MEDIA QUERY For orientation: landscape but not desktop. how?
Here it will not contain it on the tablet because I am testing a tablet with a mouse on my computer:
@media (max-width: 1024px), (not: pointer) and (orientation: landscape)
And here it will also contain a desktop.
@media (max-width: 1024px),…
bob habanai
- 11
- 1
0
votes
1 answer
Apply parent component css to child not in sibling component in Angular 11
i have 2 types of component, i) before login ii) after login
want to add 2 different css for both parent component,
with using ViewEncapsulation.None it apply in sibling component also, here is the structure of code
- ParentComponent1
-…
Apurv Chaudhary
- 1,672
- 3
- 30
- 55
0
votes
1 answer
How to change PhpStorm SCSS File Watcher Settings to Compile / Export css into different folder
I have SCSS and CSS folder into a project. I am writing my code into SCSS file which is located into SCSS folder. Now i want to output this code into CSS file and this file location will be CSS folder.
My project folder tree
Suzon Khan
- 31
- 4
0
votes
0 answers
How to use environment variable inside scss file
I have this scss file
&__passo2 {
width: 100%;
height: auto;
margin-bottom: 56px;
margin-top: 14px;
figure {
height: 44vw;
width: 70vw;;
margin: 0 auto;
…
chewie
- 333
- 2
- 3
- 19
0
votes
1 answer
How to make vscode format SCSS calc function properly
I have an SCSS file that contains a calc() function.
When i use a calc function without spaces around the operator like so calc(var(--primary-color-h)+5) the transpiled CSS result doesn't work. Only when i set spaces around the operator does it…
Lefthandmedia
- 385
- 1
- 3
- 5
0
votes
1 answer
Stylelint not linting component.module.scss in Next.js
I two projects, one with React (v17.0.2) and the other with Next.js (v11.1.0) In both I
have implemented ESlint with Prettier and Stylelint.
My problem is that in React project everything is working smoothly and fine, however in Next.js project,…
Javier
- 428
- 5
- 12
0
votes
1 answer
Stylelint: Create a rule, that can disallow add nested media queries
I wanna create a rule, which should block nested media queries.
For example, this SCSS should be blocked:
.example-class {
max-width: 350px;
@media screen and (max-width: 768px) {
margin: auto;
}
}
Anatoly Surgutov
- 3
- 2
0
votes
0 answers
Import css cdn in sass file and extend class from it
I have exposed CSS classes as CDN to be imported into any scss file.
The way i am importing the cdn into my scss file is using
@import url(cdn_name)
And in the same file, I have extended one of the classes that is in cdn.
But the issue is that at…
Sahil Julka
- 75
- 1
- 6
0
votes
2 answers
How to make Visual Studio Code show errors when using missing SCSS styles in a React app?
In my React app I import styles from a SCSS file like this:
import styles from './index.module.scss';
To use a particular SCSS style I set up a className on a component and grab a style from a styles array:
Tom Smykowski
- 25,487
- 54
- 159
- 236