markdown Bulma偏移SCSS

Posted 2021-05-06

// NOTE: All my sass mixins and styles in here.
//Responsive Mixins
// Responsiveness
// @include from {}

// @include until {}

@include mobile {
    // Offset only
    .is-offset-0-mobile {
        margin-left: 0;
    }
}

@include tablet {
    // Offset only
    .is-offset-0-tablet {
        margin-left: 0;
    }
}

@include tablet-only {
    // Offset only
    .is-offset-12-tablet-only {
        margin-left: 100%;
    }
    .is-offset-11-tablet-only {
        margin-left: 91.66666667%;
    }
    .is-offset-10-tablet-only {
        margin-left: 83.33333333%;
    }
    .is-offset-9-tablet-only {
        margin-left: 75%;
    }
    .is-offset-8-tablet-only {
        margin-left: 66.66666667%;
    }
    .is-offset-7-tablet-only {
        margin-left: 58.33333333%;
    }
    .is-offset-6-tablet-only {
        margin-left: 50%;
    }
    .is-offset-5-tablet-only {
        margin-left: 41.66666667%;
    }
    .is-offset-4-tablet-only {
        margin-left: 33.33333333%;
    }
    .is-offset-3-tablet-only {
        margin-left: 25%;
    }
    .is-offset-2-tablet-only {
        margin-left: 16.66666667%;
    }
    .is-offset-1-tablet-only {
        margin-left: 8.33333333%;
    }
    .is-offset-0-tablet-only {
        margin-left: 0;
    }
    .is-offset-three-quarters-tablet-only {
        margin-left: 75%;
    }
    .is-offset-two-thirds-tablet-only {
        margin-left: 66.6666%;
    }
    .is-offset-half-tablet-only {
        margin-left: 50%;
    }
    .is-offset-one-third-tablet-only {
        margin-left: 33.3333%;
    }
    .is-offset-one-quarter-tablet-only {
        margin-left: 25%;
    }
    .is-offset-one-fifth-tablet-only {
        margin-left: 20%;
    }
    .is-offset-two-fifths-tablet-only {
        margin-left: 40%;
    }
    .is-offset-three-fifths-tablet-only {
        margin-left: 60%;
    }
    .is-offset-four-fifths-tablet-only {
        margin-left: 80%;
    }
}

@include touch {
    // Offset only
    .is-offset-0-touch {
        margin-left: 0;
    }
}

@include desktop {
    // Offset only
    .is-offset-0-desktop {
        margin-left: 0;
    }
}

@include desktop-only {
    //Offset only
    .is-offset-12-desktop-only {
        margin-left: 100%;
    }
    .is-offset-11-desktop-only {
        margin-left: 91.66666667%;
    }
    .is-offset-10-desktop-only {
        margin-left: 83.33333333%;
    }
    .is-offset-9-desktop-only {
        margin-left: 75%;
    }
    .is-offset-8-desktop-only {
        margin-left: 66.66666667%;
    }
    .is-offset-7-desktop-only {
        margin-left: 58.33333333%;
    }
    .is-offset-6-desktop-only {
        margin-left: 50%;
    }
    .is-offset-5-desktop-only {
        margin-left: 41.66666667%;
    }
    .is-offset-4-desktop-only {
        margin-left: 33.33333333%;
    }
    .is-offset-3-desktop-only {
        margin-left: 25%;
    }
    .is-offset-2-desktop-only {
        margin-left: 16.66666667%;
    }
    .is-offset-1-desktop-only {
        margin-left: 8.33333333%;
    }
    .is-offset-0-desktop-only {
        margin-left: 0;
    }
    .is-offset-three-quarters-desktop-only {
        margin-left: 75%;
    }
    .is-offset-two-thirds-desktop-only {
        margin-left: 66.6666%;
    }
    .is-offset-half-desktop-only {
        margin-left: 50%;
    }
    .is-offset-one-third-desktop-only {
        margin-left: 33.3333%;
    }
    .is-offset-one-quarter-desktop-only {
        margin-left: 25%;
    }
    .is-offset-one-fifth-desktop-only {
        margin-left: 20%;
    }
    .is-offset-two-fifths-desktop-only {
        margin-left: 40%;
    }
    .is-offset-three-fifths-desktop-only {
        margin-left: 60%;
    }
    .is-offset-four-fifths-desktop-only {
        margin-left: 80%;
    }
}

@include until-widescreen {}

@include widescreen {
    //Offset only
    .is-offset-0-widescreen {
        margin-left: 0;
    }
}

@include widescreen-only {
    //Offset only
    .is-offset-12-widescreen-only {
        margin-left: 100%;
    }
    .is-offset-11-widescreen-only {
        margin-left: 91.66666667%;
    }
    .is-offset-10-widescreen-only {
        margin-left: 83.33333333%;
    }
    .is-offset-9-widescreen-only {
        margin-left: 75%;
    }
    .is-offset-8-widescreen-only {
        margin-left: 66.66666667%;
    }
    .is-offset-7-widescreen-only {
        margin-left: 58.33333333%;
    }
    .is-offset-6-widescreen-only {
        margin-left: 50%;
    }
    .is-offset-5-widescreen-only {
        margin-left: 41.66666667%;
    }
    .is-offset-4-widescreen-only {
        margin-left: 33.33333333%;
    }
    .is-offset-3-widescreen-only {
        margin-left: 25%;
    }
    .is-offset-2-widescreen-only {
        margin-left: 16.66666667%;
    }
    .is-offset-1-widescreen-only {
        margin-left: 8.33333333%;
    }
    .is-offset-0-widescreen-only {
        margin-left: 0;
    }
    .is-offset-three-quarters-widescreen-only {
        margin-left: 75%;
    }
    .is-offset-two-thirds-widescreen-only {
        margin-left: 66.6666%;
    }
    .is-offset-half-widescreen-only {
        margin-left: 50%;
    }
    .is-offset-one-third-widescreen-only {
        margin-left: 33.3333%;
    }
    .is-offset-one-quarter-widescreen-only {
        margin-left: 25%;
    }
    .is-offset-one-fifth-widescreen-only {
        margin-left: 20%;
    }
    .is-offset-two-fifths-widescreen-only {
        margin-left: 40%;
    }
    .is-offset-three-fifths-widescreen-only {
        margin-left: 60%;
    }
    .is-offset-four-fifths-widescreen-only {
        margin-left: 80%;
    }
}

@include until-fullhd {}

@include fullhd {
    //Offset only
    .is-offset-0-fullhd {
        margin-left: 0;
    }
}

Bulma Helpers.

Offset '-only' sass mixins.

Import into your mystyles.scss (just before bulma.sass works for me) then compile.


This will add an '-only' class to the offset classes already native in Bulma.

ie. .is-offset-4-mobile-only<br>
    .is-offset-one-quarter-widescreen-only.
    
It will also add a reset for all devices and sizes.

ie. .is-offset-0-tablet<br>
    .is-offset-0-desktop-only