LESS/CSS in Magento

LESS File Locations

view/frontend/web/css/
├── source/
│   ├── _reset.less
│   ├── _layout.less
│   ├── _typography.less
│   └── _extend.less  (your custom styles)
├── styles-l.less    (desktop styles)
├── styles-m.less    (mobile styles)
└── styles.less      (all styles)

Compilation Modes

# Production mode (compiled)
bin/magento deploy:mode:set production
bin/magento setup:static-content:deploy -f

# Developer mode (preprocessed)
bin/magento deploy:mode:set developer

# Check compilation
bin/magento setup:static-content:deploy --dry-run

LESS Import Structure

// styles.less
@import 'source/_reset.less';
@import 'source/_layout.less';
@import 'source/_typography.less';
@import 'source/_extend.less';

Theme LESS Override

Create in your theme:

app/design/frontend/Vendor/Theme/web/css/
└── source/
    └── _extend.less

Magento automatically loads _extend.less from your theme.

Define Variables

// web/css/source/_variables.less
@primary-color: #ff6600;
@secondary-color: #333333;
@background-color: #ffffff;

@font-family-base: 'Open Sans', sans-serif;
@font-size-base: 14px;
@line-height-base: 1.5;

@border-radius-base: 4px;
@box-shadow-base: 0 2px 4px rgba(0,0,0,0.1);

@spacing-xs: 4px;
@spacing-sm: 8px;
@spacing-md: 16px;
@spacing-lg: 24px;
@spacing-xl: 32px;

@screen-sm: 576px;
@screen-md: 768px;
@screen-lg: 992px;
@screen-xl: 1200px;

Use Variables

// web/css/source/_extend.less
@import '_variables.less';

.button {
    background-color: @primary-color;
    color: @background-color;
    font-family: @font-family-base;
    font-size: @font-size-base;
    border-radius: @border-radius-base;
    padding: @spacing-sm @spacing-md;
    
    &:hover {
        background-color: darken(@primary-color, 10%);
    }
}

.card {
    box-shadow: @box-shadow-base;
    padding: @spacing-lg;
    margin-bottom: @spacing-md;
}

Magento Default Variables

// Inherited from Blank theme
@color-primary: #1979c3;
@color-error: #e02424;
@color-success: #008a00;
@color-warning: #eb5200;

// Override in your theme
@color-primary: #ff6600;

Basic Mixins

// web/css/source/_mixins.less

// Clearfix mixin
.clearfix() {
    &::after {
        content: '';
        display: table;
        clear: both;
    }
}

// Flexbox mixin
.flexbox() {
    display: flex;
    display: -webkit-flex;
}

.flex-center() {
    .flexbox();
    justify-content: center;
    align-items: center;
}

// Responsive mixin
.responsive(@screen; @rules) {
    @media only screen and (min-width: @screen) {
        @rules();
    }
}

Use Mixins

@import '_mixins.less';

.container {
    .clearfix();
    .flex-center();
}

.sidebar {
    .responsive(@screen-md; {
        width: 25%;
        float: left;
    });
}

.main-content {
    .responsive(@screen-md; {
        width: 75%;
        float: right;
    });
}

Magento LESS Mixins

// Available from Magento
@import 'source/lib/_lib.less';

// Use Magento mixins
.media-width(@max-width; {
    .sidebar {
        display: none;
    }
});

.lib-clearfix();
.lib-css(color, @text-color);
.lib-css(margin, @spacing-md);

Media Queries

// Mobile first approach
.column.main {
    width: 100%;
    
    .responsive(@screen-md; {
        width: 75%;
        float: left;
    });
}

.sidebar {
    display: none;
    
    .responsive(@screen-md; {
        display: block;
        width: 25%;
        float: right;
    });
}

Magento Media Width Mixin

// From Magento's LESS library
.media-width(@max-width; {
    // Styles for screens up to @max-width
    .header {
        padding: @spacing-sm;
    }
});

// Desktop styles
.media-width(@min-width; {
    .header {
        padding: @spacing-lg;
    }
});

Responsive Grid

.grid-container {
    .lib-css(display, flex);
    .lib-css(flex-wrap, wrap);
    .lib-css(margin, 0 -(@spacing-md / 2));
}

.grid-item {
    .lib-css(width, 100%);
    .lib-css(padding, 0 (@spacing-md / 2));
    .lib-css(box-sizing, border-box);
    
    .media-width(@screen-sm; {
        .lib-css(width, 50%);
    });
    
    .media-width(@screen-lg; {
        .lib-css(width, 33.333%);
    });
}

Mobile Navigation

.nav-sections {
    display: none;
    
    .media-width(@screen-md; {
        display: block;
    });
}

.nav-toggle {
    display: block;
    
    .media-width(@screen-md; {
        display: none;
    });
}