SCSS Refactoring tools
Extract selection into new variable. Name is automatically generated from context.
Shortcut: Ctrl+Alt+E on Windows and ⌘+Ctrl+E on Mac.
.foo {
background-color: #f8f8f8;
}$foo-bg-color: #f8f8f8;
.foo {
background-color: $foo-bg-color;
}@import "common";
$foo-text-color: #333;
.foo {
color: $foo-text-color;
background-color: #f8f8f8;
}@import "common";
$foo-text-color: #333;
$foo-bg-color: #f8f8f8;
.foo {
color: $foo-text-color;
background-color: $foo-bg-color;
}.l-menu {
&__item {
color: #f8f8f8;
}
}$menu-item-text-color: #f8f8f8;
.l-menu {
&__item {
color: $menu-item-text-color;
}
}.l-menu {
&__header {
border-radius: 3px;
}
&__item {
color: #f8f8f8;
}
}$menu-item-text-color: #f8f8f8;
.l-menu {
&__header {
border-radius: 3px;
}
&__item {
color: $menu-item-text-color;
}
}#menu {
&.active:hover a {
font-weight: bold;
}
}$menu-active-hover-link-font-weight: bold;
#menu {
&.active:hover a {
font-weight: $menu-active-hover-link-font-weight;
}
}Format variables.
$foo-text-color: #333;
$foo-bg-color: #ffffff;$foo-text-color: #333;
$foo-bg-color: #ffffff;@import "variables";
$foo-text-color: #333;
$foo-bg-color: #ffffff;
.foo {
color: $foo-text-color;
background-color: $foo-bg-color;
}@import "variables";
$foo-text-color: #333;
$foo-bg-color: #ffffff;
.foo {
color: $foo-text-color;
background-color: $foo-bg-color;
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent