I have the Prettier extension added to my VS Code editor.
When using Less or Sass, the default settings format code like this:
// Default
.parent_selector {
.child_selector {
color: red;
}
}
// Desired Format
.parent_selector {
.child_selector {
color: red;
}
}
How could I tweak the Prettier CSS settings to achieve this? I know it seems trivial, but in bigger code bases it helps readability.
As an alternative method; It can be achieved by using stylelint plugin and stylelint-config-standard rules.
npm install --save-dev stylelint stylelint-config-standard
After installing them, proceed with ctrl+shift+p on VS Code and run command: stylelint: fix all auto-fixable problems.
PS: Consider assigning a keyboard shortcut for stylelint: fix all auto-fixable problems command for easy access.
Related
I want to override the default values in scss file like
.auth-form {
width: 800px;
}
I change the width values in class auth-form scss file. But it is not working.
How to override the values in scss file. Please let me know.
Making assumptions on what will be the case you are probably facing a scope issue. If you have the following css:
.foo .bar {
color: red;
}
.bar {
color: blue;
}
.bar will always be red, because you are not overwriting the selector in the correct scope.
So in your case you need to specify the full selector:
.full.scope .auth-form {
width: 800px;
}
Where .full.scope is the full selector to .auth-form. You can get the full selector using on the css you eqnt to overwrite using the browser inspector.
Another option will be to make the property prioritary using the !important css keyword so it will overwrite any previous definition:
.auth-form {
width: 800px !important;
}
Hope it helps.
.scss (sass) files are not directly loadable into browsers, they need to be compiled to .css files first, then those are loaded into browsers by your application.
It seems you are not performing the compilation step (also called preprocessing or precompiling) and this is the reason you do not see the modification in your app.
How the compilation should be done varies. You may use sass directly (see here) or if you are using a framework there may be tools that combine this and other automation steps. For instance in Ruby-on-Rails you would install the required compile tool in the form of a gem and run:
bundle exec rake assets:precompile
As you do not provide details on your environment / framework is is difficult to provide the exact procedure applicable to you.
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:
I have postcss parser set up with http://cssnext.github.io and am trying to figure out a way to set up a variables.css file to contain all my theme settings.
So far variable.css looks like this with a couple of vars
:root {
--color-white: #FFF;
--color-black: #000;
}
I than import it into my other files where I want to use these variables, so #import './variables.css' or similar and then use it in that file like background-color: var(--color-white) for example, however I get follwoing warning:
variable '--color-white' is undefined and used without a fallback
[postcss-custom-properties]
You can try to install postcss import
$ npm install postcss-import
Check this post for more details how to install.
EDIT
Using postcss-import solved the issue, however there are currently issues with latest version, use v 7.x for stability
Another solution if you want to share your variables with your JavaScript code, is to rely on postcss-custom-properties "variables" options.
Here is an example of a postcss-cssnext config to pass global variables
require("postcss-cssnext")({
features: {
customProperties: {
variables: {
mainColor: "red",
altColor: "blue",
}
}
}
})
https://cssnext.github.io/usage/#features
I'm not sure whats happening. I'm new to Sass, so I was following this begginers guide: https://scotch.io/tutorials/getting-started-with-sass
For practicing (and hoping to use it as my developing tool) I set LiveReload to compile .scss files. But when testing the variable scope I got unexpected results.
In style.scss I have the following code:
$primaryColor: #eeccff;
body {
$primaryColor: #ccc;
background: $primaryColor;
}
p {
color: $primaryColor;
}
// When compiled, our paragraph selector's color is #eeccff
So p is supposed to get color: #eeccff. But this is what I'm getting:
body {
background: #cccccc; }
p {
color: #cccccc; }
I tested the same code in sassmeister.com and it worked as expected, just like the tutorial says:
body {
background: #ccc;
}
p {
color: #eeccff;
}
Again, I'm using LiveReload for Mac. And these are the compiling options:
Does anyone has an idea of why is this happening?
Thanks!
EDIT:
I found this question where someone was experiencing a very similar problem in a different situation: Web Essential for Visual Studio Sass compile wrong
Apparently it has to do with the Sass version you use. But how do I change that for LiveReload? How you change that?
Well, I just changed from Sass compiler. I had to stop using LiveReload and compile with Koala to have the expected results. Couldn't manage to change LiveReload Sass gem.
I used HTML auto-completion shortcut for the first time yesterday. I worked well. I tried to use the CSS autocompletion shortcut this morning and it did not work.
For example with :
#home {
display: ;
}
after typing "display:", and pressing alt+esc, I just get "--"
I am sure I am working in a CSS file. I took a look at the CSS bundle, but can't decipher the code.
Any idea ? Thanks.