I can't find a rule that would automatically fix this:
.a {
.b {
width: 16px;
}
padding: 2px 0;
}
on this:
.a {
padding: 2px 0;
.b {
width: 16px;
}
}
You can use the order rule of the stylelint-order plugin to order things inside of rule sets.
To ensure nested rules come before declarations you should add the following to your Stylelint configuration:
{
"plugins": [
"stylelint-order",
],
"rules": {
"order/order": [
["custom-properties", "declarations", "rules", "at-rules"]
]
}
}
Related
VSCode highlights nested classes with parent selector as properties in SCSS as seen here:
&__recommendation is highlighted in blue which is a bit confusing. Can i make it so vscode highlights it in yellow like a class selector? I'd like it to be like this(it's a .less file):
The code if someone needs to copypaste it:
.product-card {
padding: 15px 27px;
color: red;
font-family: "DM Sans";
font-size: 16px;
font-weight: 700;
&__recommendation {
display: flex;
}
}
Had to add in settings.json:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"entity.name.tag.reference.scss",
"entity.other.attribute-name.parent-selector-suffix.css"
],
"settings": {
"foreground": "#D7BA7D"
}
}
]
}
I've used Developer: Inspect Editor Tokens and Scopes command to find which scopes i need
More information here:
VS Code change theme color only for CSS
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
https://code.visualstudio.com/api/extension-guides/color-theme#syntax-colors
https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide#theming
I have the following code where I need to reference another rule name to avoid style duplication in material ui. Unfortunately the rules aren't reflecting.
const useNavStyles = makeStyles((theme) => ({
active: {
color: 'green'
},
listItem: {
borderTopRightRadius: 100,
borderBottomRightRadius: 100,
paddingBottom: 12,
paddingTop: 12,
backgroundColor: theme.palette.background.paper,
},
subListItem: {
"&$listItem": { // I wish to copy over the properties from the above listItem rule and only add padding to it, but it isn't working.
paddingLeft: theme.spacing(4),
},
},
How do I resolve this?
Thanks
Referencing a local rule name does not "copy over" other styles. It changes your selector. You will still need to apply all those classes to your elements, which in return will then also apply the respective styles.
listItem: {
color: 'hotpink',
},
subListItem: {
"&$listItem": {
fontWeight: 'bold'
}
}
this compiles to
.listItem-1: {
color: hotpink;
}
.subListItem-0.listItem-1: {
font-weight: bold;
}
In other words, this will apply styles to an element that has both these classes:
<div className={clsx(classes.listItem, classes.subListItem)}>
hotpink and bold
</div>
<div className={classes.subListItem}>no styles at all</div>
I'm trying to change the padding off input field by changing the css4 variable but I must be doing something wrong because the padding is not changing. I'm still getting use to css4. This is my scss file.
app-page {
--padding-end: 50px;
ion-input{
padding: var(--padding-end);
}
}
ion-input {
--padding-end: 12px;
}
Did what I wanted.
Are you using SASS? Variable declaration would look like this:
app-page {
$padding-end: 50px;
ion-input{
padding: $padding-end;
}
}
Does anyone know if this is possible:
I want my brand colour to be $brand: #00cccc;
however, I want to change that on just one page, and that page is defined by a class on it's body.
body class="purple"
Now my mind is thinking that this would be ideal:
body.$class {
#if $class == 'purple'
{
$brand = #ff0033;
}
#else
{
$brand = #00cccc;
}
}
But that's not correct syntax at all.
Is this something that can be done in a similar way?
I believe you are looking for something like this?
#each $class in purple, none {
$brand: #00cccc;
$selector: 'body';
#if $class == purple {
$brand: #ff0033;
$selector: 'body.' + $class;
}
#{$selector}{
/* Use $brand */
}
}
I don't believe there is an #if statement you could create for that. In LESS you could redeclare the same variable inside body.purple and it would only apply inside that block, but in Sass/Scss redeclaring the variable will change it globally. This might not be ideal but you could redeclare the variable twice, once at the top for the purple color, and once at the bottom to set it back to its default value.
scss
// Global Variables
$blue: #0cc;
$purple: #f03;
$brand: $blue;
body {
color: $brand; // blue
}
.purple {
$brand: $purple;
color: $brand; // now purple
// all other styles
$brand: $blue;
}
.test {
color: $brand; // back to blue
}
css output
body {
color: #00cccc;
}
.purple {
color: #ff0033;
}
.test {
color: #00cccc;
}
Here is an article about the variable scope differences between LESS and Sass. http://blog.freeside.co/post/41774744757/less-vs-sass-variable-scopes
Yes, as of 2022 Sass does include #if and #else rules for flow control. More info on the Sass documentation site.
The #if rule is written #if { ... }, and it controls whether or not its block gets evaluated (including emitting any styles as CSS). The expression usually returns either true or false—if the expression returns true, the block is evaluated, and if the expression returns false it’s not.
For example, this Sass code:
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;
#mixin theme-colors($light-theme: true) {
#if $light-theme {
background-color: $light-background;
color: $light-text;
} #else {
background-color: $dark-background;
color: $dark-text;
}
}
.banner {
#include theme-colors($light-theme: true);
body.dark & {
#include theme-colors($light-theme: false);
}
}
...will produce this CSS:
.banner {
background-color: #f2ece4;
color: #036;
}
body.dark .banner {
background-color: #6b717f;
color: #d2e1dd;
}
There is also support for #else if and Boolean operators and, or, and not.
I am passing multiple arguments in the mixin below. I am calling the mixin from multiple places in my CSS files; sometimes all the args need to be specified, other times only a few. Ruby allows you to pass an optional args using a hash. Is there such an equivalent in SASS, or this obviated by the fact that named arguments can be passed in any order, and arguments with default values can be omitted?
#mixin three-column-header-layout($background_color: #EEEEEE, $left_width: 25%, $mid_width: 50%, $right_width: 25%, $left_line_height: 40px, $mid_line_height: 40px, $right_line_height: normal, $column_height: 40px) {
.wrapper {
margin: 0 auto;
width: 100%;
overflow: hidden;
}
.middleCol {
float: left;
background: $background_color;
height: $column_height;
width: $mid_width;
display: inline;
line-height: $mid_line_height;
}
.leftCol {
background: $background_color;
height: $column_height;
width: $left_width;
float: left;
line-height: $left_line_height;
}
.rightCol {
background: $background_color;
height: $column_height;
width: $right_width;
float: left;
line-height: $right_line_height;
}
}
Sass's only data structure as of 3.1.7 is lists.
As you mentioned you can include your mixin using any combination of named arguments only if all arguments that are not passed have default values.
Sass 3.3 added the mapping data structure and you can pass them as arguments to mixins like this:
$options:
( background_color: red
, right_width: 30%
, left_width: 20%
);
.foo {
#include three-column-header-layout($options...);
}
Note, however, that one could also specify the arguments like so (this may have been a 3.2 feature):
.foo {
#include three-column-header-layout($background_color: red, $right_width: 30%, $left_width: 20%)
}