Remark

Remark is a function-oriented tool utilizing SCSS. This library provides a set of useful SCSS mixins that assist in making web styling more efficient.

Usage

Initialization

This initializes HTML and text styling.

@import "./_remark_media.scss";
@include remark-setup-html();
@include remark-setup-text();

Media Queries

This sets up and traces media queries.

@import "./_remark_media.scss";
@include remark-setup-media();
@include remark-trace-media(); // At the end of body you will see what the current media is

Parent Selector Replacement

Apply different styles according to specific selectors.

@import "./_remark_main.scss";
span.badge {
  @include when("span.badge",".badge-red"){
    color:red;
  }
  @include when("span.badge",".badge-blue"){
    color:blue;
  }
}

Simple Absolute Positioning

Easily set an element's absolute position.

@import "./_remark_main.scss";
.cover {
  position:relative;
  section {
    @include absolute(right,10px);
  }
}

Icon (Background-based Icon)

Use a background image as an icon.

@import "./_remark_main.scss";
.someIcon {
  // iconImage, iconWidth, iconHeight
  @include icon-variant(url(icon.png),10px,10px);
}

Image Text (Inline)

Use an image as inline text.

@import "./_remark_main.scss";
span {
  // textImage, width, height
  @include image-text-variant(url(word.png),20px,10px);
}

Easy Input Style Initialization

Easily initialize the style of input fields.

input {
  // width, height
  @include input-variant(20px,100px){
    color:gray;
    background-color:white;
  }
}

Remark provides a multitude of features. Apologies, as we have not been able to document them all yet. Please refer to the source code for more information.

sepalang/remark