When i am compiled my style.scss file then compiler through error following
Property " " must be followed by a ':'
When i have add following css is style.scss file then getting error
.custom-file-input:lang(en)~.custom-file-label::after {
content: "Browse";
padding: 8px 20px;
height: 35px;
}
.custom-file label {
width: 100%;
height: 37px;
padding: 8px 15px;
}
i faced the same problem when i had a mistake in naming my sass file. Now i understand that that issue stems from a sass syntax error or wrong filename imports
Related
I am new to sass and want to use a variable stored in a file named "_designs.scss". I want to use this variable in a file named "_component.scss". But I am getting "Undefined variable: "$grey-light-2" error. I have tried everything, but nothing is working, please help.
Below is the "_component.scss" file.
#use "designs" as d;
.logo{
height: 3.25rem;
}
.search{
display: flex;
flex: 0 0 40%;
&__input{
width: 90%;
background-color: d.$grey-light-2;
padding: .7rem .2rem;
border-radius: 100px;
border: none;
}
&__button{
outline: none;
}
&__icon{
height: 2.5rem;
width: 2.5rem;
}
}
This is "-designs.scss" file:
$color--primary: #eb2f64;
$color--grey-light-1: #faf9f9;
$grey-light-2: #f4f2f2;
$color--grey-light-3: #f0eeee;
$color--grey-light-4: #ccc;
Two things I can think of:
Check the path (i.e., #use "../../your/path/to/designs";).
If you're using Visual Studio Code extension for compilation, use the one by Glenn Marks.
EDIT
You should rename _component.scss to component.scss.
According to the SASS official website:
A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.
I new to linting in scss file, I have a angular project with following scss file
p {
margin-left: 10px;
margin-top: 9px;
}
::ng-deep .expandButton {
margin: 10px;
color: teal;
border: none;
background: transparent;
}
a.mat-list-item.ng-tns-c1-0.active {
background : #eff0f1;
font-weight: bold;
color: black;
border-right: 3px solid teal;
}
and a .yml file for lint rules,
rules:
declaration-no-important: null
scss/at-rule-no-unknown: null
while building the code or executing the following command stylelint **.scss, I'm getting the following errors,
1:1 × Unknown rule at-rule-disallowed-list at-rule-disallowed-list
1:1 × Unknown rule declaration-property-value-disallowed-list declaration-property-value-disallowed-list
How to fix/suppress this warning, the build passes, there are no errors, but these two lines, keep on occurring for all the scss files.
The Unknown rule <rule-name> error is shown when stylelint encounters a rule in the configuration object that it does not recognise.
The at-rule-disallowed-list and declaration-property-value-disallowed-list rules were added to stylelint in version 13.7.0.
You can fix these errors by either:
updating your stylelint to at least version 13.7.0
removing the rules from your configuration object
I'm currently following a tutorial that uses .scss but have decided to use .css instead. While I was following the tutorial I tried writing into the .css file but I ran into some compilation issues.
I'm not as familiar with .css so it was hard for me to fix them. I wasn't sure if the problem was with some of the syntax being exclusive to scss. The problem mainly lies in property-list-item.component.css and Property-list.component.css.
https://github.com/zhadjah9559/Wholesale-cli.git
Errors:
ERROR in ./src/app/property/Property-list-item/property-list-item.component.css
Module build failed: Error: Can't resolve 'variables' in 'C:\Users\zach\College\Spring 2019\Senior Proj\Wholesale-cli\src\app\property\Property-list-item'
at doResolve (C:\Users\zach\College\Spring 2019\Senior Proj\Wholesale-cli\node_modules\enhanced-resolve\lib\Resolver.js:180:19)
Pic1
pic 2
Also, does anyone know how to uninstall an extension? I believe i may be having a problem with one of the css formatter extensions i used in visual code.
UPDATE
#import 'variables';
a 6:hover,
a 6:focus {
text-decoration: none;
}
.bsp-card {
border: none;
}
.bsp-card .card-block {
padding-top: 8px;
}
.bsp-card .card-subtitle {
margin: 0px;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
color: #16861a;
}
.bsp-card .card-title {
font-size: 19px;
margin: 3px 0;
}
.bsp-card .card-text {
font-size: 14px;
font-weight: 300;
color: #7e7e7e;
margin-bottom: 0;
}
When you generate a new project you need to select CSS on generation like this
Your CSS file is trying to import a variables scss file that doesn't exist.
#import 'variables';
Remove that, but make sure there's no references to variables inside the css file.
I've just been following the Sass tutorial. For some reason though the Sass file is not correctly generating the css. The terminal says the css is invalid but I'm pretty sure it's not. I've tried changing it too just in case there was a problem...
What have I done wrong?
Sass Version: Sass 3.1.10
Error message:
error sass/test.sass (Line 3: Invalid CSS after "80%":
expected expression (e.g. 1px, bold), was ";")
.sass file contents:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Based on your error message (error sass/test.sass) I can tell you're using the .sass extension for a Scss file. Change your file name to style.scss.
Sass and Scss use two different and incompatible syntaxes.
Try either:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Or:
/* style.sass */
#navbar
width: 80%
height: 23px
Note the difference in file extension and syntax.
I've just been following the Sass tutorial. For some reason though the Sass file is not correctly generating the css. The terminal says the css is invalid but I'm pretty sure it's not. I've tried changing it too just in case there was a problem...
What have I done wrong?
Sass Version: Sass 3.1.10
Error message:
error sass/test.sass (Line 3: Invalid CSS after "80%":
expected expression (e.g. 1px, bold), was ";")
.sass file contents:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Based on your error message (error sass/test.sass) I can tell you're using the .sass extension for a Scss file. Change your file name to style.scss.
Sass and Scss use two different and incompatible syntaxes.
Try either:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Or:
/* style.sass */
#navbar
width: 80%
height: 23px
Note the difference in file extension and syntax.