SCSS Refactoring

SCSS Refactoring tools

Extract variable

Extract selection into new variable. Name is automatically generated from context.

Shortcut: Ctrl+Alt+E on Windows and ⌘+Ctrl+E on Mac.

Examples

.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

Format variables.

Examples

$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;
}