so iv'e started learning sass and i'm now in a spot when i added a class to my html (.circle)
and my sass file is already linked to my css file.
when i typed .circle to my sass file and tried to give him a color i incountred in the next error:
This selector doesn't have any properties and will not be rendered.
error styles.sass (Line 6: Properties are only allowed within rules, directives, mixin includes, or other properties.)
my sass file is really simple by now as i try to play with it:
body
background-color: cadetblue
.circle
color: red
as i said when reaching the .circle i get the error. any ideas?
i used the sass --watch command and i use ruby devkit 2.6.5-1
thanks for helping! im new so i try my best
It seems like the syntax is not correct. Try this instead (remark the indentation on color property):
body
background-color: cadetblue
.circle
color: red
More info about Sass syntax : https://sass-lang.com/documentation/syntax#the-indented-syntax
Related
I am developing a WordPress theme and I am trying to use sass from another file using the #use method but it doesn't seem to be working. How can I fix the problem since the #import rule method will be depreciated soon?
I have files
//_brand.scss
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
and then
//footer.scsss
#use 'brand' as b;
.footer{
padding: 0px 5%;
background-color: b.$base-color;
}
and I get this error when it's compiling
Compilation Error
Error: Invalid CSS after "...ground-color: b": expected expression (e.g. 1px, bold), was ".$font-size;"
on line 5 of sass/opt/lampp/.../sass/footer.scss
>> background-color: b.$base-color;
I am using "Live Sass Compiler" visual studio code extension to compile to CSS
If you want to use the variables you have defined within the brand.scss file across different files, you can use the #import directive. For using it, just add the line below to your footer.scss file:
#import "brand";
Source: https://www.w3schools.com/sass/sass_import.asp
I hope my answer will help you
In my scss file I am importing a third-party css file
#import 'icons/third-party-icons/style';
Unfortunately, this style is missing the value for the color style
.mySelector {
content: "\eac2";
margin-left: -1em;
color: ;
}
As expected, node-sass is throwing the following error:
ModuleBuildError: Module build failed (from
./node_modules/sass-loader/lib/loader.js):
color: ;
^
Style declaration must contain a value
Is there any way to configure node-sass to ignore this invalid property?
In my opinion, that error report is there for a reason, you shouldn't have empty definitions as that is technically an error. In unminified CSS you wouldn't have an issue it would just appear as strikethrough in the element inspector in the browser, but in this case you break the minify process.
Instead of importing it you can download the CSS code if possible and save it in your project locally then solve the issues manually. It won't matter what you do later in your CSS file, the error will appear. Or else you can try to link the CSS in the header. If you are using PHP or similar serverside scripting then create a separate header.php (for example) and include it into every file. This way you will need to copy and paste the link once and you can access the style at every page.
You could override the imported css. The code is looking to use a value, but can't because it's null.
You could include in your style tags:
.mySelector {
color: black !important;
}
That !important will override whatever is imported from the stylesheet, and you class in the body will use that color instead of trying to use the null color.
I am using Angular5 with sass v1.3.2.
I want to be able to change a color that is used extensively in the scss files of my single page app in runtime (not by compiling new files).
The color is defined globally in my _variables.css as:
$brand: #123123;
And for example used as:
h1 {
color: $brand;
}
I learned that I can modify the color if I am using CSS variables such as:
# CSS
:root {
--brand: #123123
}
#JS
document.documentElement.style.setProperty('--brand', '#456456');
# OR
document.querySelector(':root').style.setProperty('--brand', '#456456');
However to be able to do that using SCSS, I needed to use css-vars mixin as such:
$brand: #123123;
:root {
#include css-vars((
--brand: #{$brand},
));
}
And use it as:
h1 {
color: var(--brand);
}
Two problems:
Actually, still --brand is not showing at root.
Also, the CSS generated in <script type="text/css"> by angular-cli does not have --brand anywhere, it is actually compiling the CSS variable into #123123 so the output is:
h1 {
color: #123123;
}
Any ideas about how can I achieve changing a global color in runtime? Or how to get my CSS in :root and then how to get SASS to not compile it?
UPDATE
As #JonUleis has showed, there is no need for using css-var. Now the var --brand shows in the DOM at :root.
However, now color: var(--brand); line still does not show in the CSS, and h1 doesn't have a color style at all.
After updating node-sass to the latest 4.9.0 from 4.8.3, it worked great.
You're likely on an outdated version of node-sass that wasn't yet compatible with the syntax for CSS custom properties.
Here's your example code compiling successfully using Sassmeister without using the css-vars mixin:
Im using Meteor
why node modules are load at last, and overwrite my own css files in imports/ directories?
Im using bootstrap, but there are classes that I don't like as background-color body. Here happens this:
in my directories:
import/ui/socially/socially.less
body{ backgrond-color: #000000;}
but don't work, when the firefox or chrome refresh the same default bootstrap color always appear.
I read the documentation Order Loads but this no solution my issue.
I don't wanna overwrite original files of the bootstrap, or delete, or edit because is not good idea when I will use .git
Any ideas?
Thanks for all. Please I have many days in this issue jajaja
Check your css syntax
body{
background-color: #000000
}
Make sure you load your external CSS file after the bootstrap css file else your rules will get overwritten
If it still doesn't work. Try this :
body{
background-color: #000000 !important
}
I'm running into problems with WordPress style.css files when trying to use then as .styl -files. The style.css from twentytwelve is the only one so far that works when I just change it from .css to .styl.
So for example when I copy-paste the style.css from theme twentyeleven or Nimble by ElegantThemes to a .styl -file, it won't compile and I get an error from CodeKit:
ParseError: /Applications/MAMP/htdocs/test/wp-content/themes/twentytwelve-child/style.styl:1454
1450| }
1451| article.feature-image.small .entry-summary p a {
1452| background: #222;
1453| color: #eee;
> 1454| display: block;
1455| left: -23.8%;
1456| padding: 9px 26px 9px 85px;
1457| position: relative;
expected "indent", got ";"
If I delete all the CSS from around it, the error just jumps to a different line of code.
I also get similar errors if I use css2stylus.com to make Stylus from CSS.
So for you people wiser than me:
How would one go about debugging Stylus? Is there a smart method for that? What if it's just copy-pasted CSS, and what if it's been compiled to .styl?
Any way to just make the style.css -files work by not compiling, other than loading separate files using one made with Stylus and the original CSS?
Do you think that this kind of problems are less likely to happen with i.e. SASS?
So for anyone using Stylus with WordPress, it would be very nice to share some thoughs!
Thank you very much.