Master Mobile Line-List UI: Step‑by‑Step SCSS & HTML Guide

This series tutorial is a practical guide that consolidates the author’s mobile refactoring experience and analyses the sandal and sheral UI libraries, originally published on imweb and w3cplus.

The “line‑list” component, implemented as the SCSS file _line-list.scss, is illustrated by the image below.

Key problems addressed include retina 1px borders, divider indentation, whole‑row clickability, SPA or page navigation, and easy extensibility.

Minimal Mode

HTML Structure

.line-list>.line-item

The markup can be either ul.line-list>.line-item for single‑page applications or div.line-list>a.line-item for link navigation.

Key SCSS Code

.line-item { @extend %bar-line; }
.line-list { background: #fff; + .line-list { margin-top: 10px; } }

The reusable placeholder %bar-line is defined in sandal’s _mixin.scss:

// bar line
%bar-line {
  line-height: $barHeight - 10px;
  padding: 5px 10px;
  position: relative;
  display: block;
  overflow: hidden;
  @if $activeStateSwitch { &:active, &:hover { background-color: darken($colorF, 3%); } }
  &:not(:first-of-type)::before { content: ""; @include retina-one-px-border; }
}

Interpretation:

Retina 1px borders are generated via the retina-one-px-border mixin from sandal.

A 1px line is attached to pseudo‑elements before all items except the first, while the topmost and bottommost 1px lines are applied to the parent element.

Each line item’s height is 44px (iOS standard) achieved by line‑height plus padding rather than a fixed line-height:44px, allowing further extensions.

Right‑Arrow Navigation Mode

Keep the HTML unchanged and add classes to achieve the required features:

1px indentation between items, without indentation at the start and end.

Right‑side arrow.

.line-list--indent { @extend %border-tb; .line-item::before { left: 10px; } }
.line-list--after-v { .line-item { padding-right: 30px; @extend %item-v-right; } }

The indentation uses a pseudo‑element ::before with a left offset; using margin-left on the item would break whole‑row clickability.

Two placeholders are defined in sandal:

// border top & bottom
%border-tb {
  position: relative;
  &::before { content: ""; @include retina-one-px-border(top); z-index: 1; }
  &::after { content: ""; @include retina-one-px-border(bottom); }
}

// item arrow (right side)
%item-v-right {
  &::after { content: ""; @include v-arrow; color: $colorC; position: absolute; right: 15px; top: 50%; margin-top: -1px; transform: rotate(45deg) translate(0, -50%); box-sizing: border-box; }
}

Selection Mode

Both single and multiple selection keep the same structure; a checkmark is generated with ::after for single selection, while multiple selection adds an i.icon-checkbox element.

// Single selection
.line-list--select .line-item { padding-right: 30px; &.active { color: $primary; &::after { content: ""; display: block; width: 14px; height: 8px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(-52deg) translate(0, -50%); box-sizing: border-box; position: absolute; top: 50%; right: 8px; margin-top: -4px; } } }

// Multiple selection
.line-list--multi-select .active { color: $primary; .icon-checkbox { color: $primary; } }

Complex Mode

Using flex layout, the line‑list is divided into three columns: a fixed‑width icon, flexible middle content, and a right‑side operation area (switch, hint text, number, or arrow). For devices without flex support, absolute positioning or float can be used without changing the markup.

.line-list--flex .line-item { display: flex; align-items: center; padding-right: 0; .item-icon, .item-img, .icon-switch, .remind-num, .item-append { margin-right: 10px; } .item-bd { flex: 1; margin-right: 10px; width: 1%; } .item-append { color: $color9; } .icon-v-right { width: 30px; height: 30px; color: $colorC; margin-left: -10px; } .remind-num { position: static; line-height: 1.5; } }

Once the line‑list component is built, it can be widely reused in components such as actionsheet, filter, popover, and many other places.