Sass .scss: Nesting and multiple classes? eg. div.myClass

use the parent selector reference &, it will be replaced by the parent selector after compilation:

// override the text on the banner
$banner-text-height : 125px;
$anchor-hero-height : 75px;

.hero-new-section {
    height: 300px; // default height and can be reset at back-end
    margin-bottom: $banner-text-height;
    background-position: 50% 50%;

    .new-hero-card {
        width: 100%;
        height: $banner-text-height;
        bottom: -$banner-text-height;
        padding: 30px;

        .header-primary {
            margin-bottom: 1px;
            font-size: 1.5rem;
            font-weight: bold;

        p {
            padding-top: 15px;
            margin-bottom: 2px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

    .anchor-hero-wrap {
        bottom: -$anchor-hero-height;

    &.no-subtitle {
        margin-bottom: $anchor-hero-height;

        .new-hero-card {
            height: $anchor-hero-height;
            bottom: -$anchor-hero-height;

Leave a Reply

Your email address will not be published. Required fields are marked *