0
\$\begingroup\$

I’ve just started a new job and am learning the LESS framework. I understand the concept of things like variables, nesting, etc, but wonder whether there are obvious inefficiencies in my code - e.g. is there a better way to structure the media queries, and is my code not dry enough?

A snippet of my typical code can be found below - note that it’s only a small portion and details such as variables are defined in other .less files.

Thanks for any advice here (and apologies for the absence of HTML).

//homepage news boxes (2)
.main-article-area-7 {
    > .placement-row-wrapper {
        max-width: 1200px;
        margin: 0 auto;
    }
}
.placement-row.placement-row-2-up.placement-row-1.clearfix { //parent
    display: flex;
    flex-flow: row nowrap;
}
.homepage-news-2 {
    color: @bright-white;
    overflow: hidden;
    transition: 0.3s all ease;
    display: flex;
    .placement-inner.clearfix, .content-item.single-content.content-wrapper.blog-mini-list, .content-item-inner, .content-wrapper-inner, .blog-posts-list, .blog-posts-post { display: flex }
    .placement-inner.clearfix {
        margin-left: 0;
        margin-right: 0;
    }
    .content-item-inner {
        position: relative;
        .blog-posts-post {
            .content-headline {
                h3 {
                    border-bottom: 2px solid #fff;
                    margin-bottom: 5px;
                    font-size: 1.4em;
                }
                span {
                    font-size: 1.2em;
                }
            }
            @media @mobile {
                padding-bottom: 50%;
            }
        }
        .content-wrapper-inner {
            position: relative;
            .content-main-image {
                z-index: -1;
                position: absolute;
                top: 0;
                right: 0;
                height: 100%;
                width: auto;
                min-width: 62%;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    content: url(#);
                    @media @mobile {
                        padding-top: 30%;
                        width: 100%;
                    }
                }
                @media @mobile {
                    width: 100%;
                }
            }
            .blog-post-detail-wrapper {
                background: @color1;
                width: 48%;
                min-height: 275px;
                clip-path: polygon(0 0,85% 0,100% 100%,0 100%);
                header {
                    padding: 5% 10%;
                    h3 {
                        display: inline;
                    }
                    span {
                        display: block;
                        padding-top: 2%;
                    }
                }
                > a {
                    color: white;
                    padding: 0 15% 0% 10%;
                    font-size: 3em;
                    font-weight: 600;
                    display: flex;
                    line-height: 1.1em;
                    @media @mobile {
                        font-size: 2em;
                    }
                }
                .blog-post-summary {
                    padding: 0 15% 5% 10%;
                    font-size: 1.3em;
                    @media @mobile {
                        font-size: 1.1em;
                        padding-right: 10%;
                    }
                }
                @media @mobile {
                    width: 100%;
                    clip-path: polygon(0 0,100% 0,100% 80%,0 100%);
                    padding-bottom: 5%;
                    min-height: auto;
                }
            }
        }
    }
    &:hover {
        opacity: 0.8;
    }
    @media @mobile {
        padding: 0 10%;
        margin-bottom: 2%;
    }
}

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.