A simple and commonly used style(stylus) library
import 'light-stylus/src/index.styl'
mixin |
description |
$clearfix() |
清除浮动 |
$clearfix-another() |
采用overflow 清除浮动 |
$flex-container() |
flex 的容器 |
$flex-fixed-width(width) |
固定宽度的flex item |
$flex-dynamic-width() |
动态宽度的flex item |
$absolute-center() |
绝对水平居中 |
$single-line-center(height, fontSize) |
单行文字水平居中(应用于父元素) |
$multi-line-center-parent(width, height) |
多行文字水平居中(应用于父元素) |
$multi-line-center-child() |
多行文字水平居中(应用于子元素) |
$text-overflow-ellipsis(lines) |
一行或多行文字溢出显示省略号 |
mixin |
description |
$rotate(angle) |
2D 旋转 |
$translate(x, y) |
2D 偏移 |
$translate3d(x, y) |
3D 偏移 |
$scale(x, y) |
2D 缩放 |
$scale3d(x, y) |
3D 缩放 |
$transition(time) |
设置过渡效果时长,默认值为0.3s |
内置样式的默认前缀为v
,部分内置样式如下:
css |
default |
.v-radius-base |
border-radius 6px |
.v-radius-small |
border-radius 4px |
css |
default |
.v-shadow-base |
box-shadow: 0 1px 6px rgba(0, 0, 0, .2) |
.v-shadow-card |
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1) |
.v-shadow-up |
box-shadow: 0 -1px 6px rgba(0, 0, 0, .2) |
.v-shadow-down |
box-shadow: 0 1px 6px rgba(0, 0, 0, .2) |
.v-shadow-left |
box-shadow: -1px 0 6px rgba(0, 0, 0, .2) |
.v-shadow-right |
box-shadow: 1px 0 6px rgba(0, 0, 0, .2) |
css |
default |
.v-primary |
#3399ff |
.v-info |
#2db7f5 |
.v-success |
#00cc66 |
.v-warning |
#ff9900 |
.v-error |
#ff3300 |
.v-bg-primary |
#3399ff |
.v-bg-info |
#2db7f5 |
.v-bg-success |
#00cc66 |
.v-bg-warning |
#ff9900 |
.v-bg-erro |
#ff3300 |
css |
description |
.v-rotate-reverse |
旋转180° |
css |
description |
.v-content-box |
普通盒模型 |
.v-border-box |
怪异盒模型 |
css |
description |
.v-text-ellipsis-1 |
1 行文字溢出显示省略号 |
.v-text-ellipsis-2 |
2 行文字溢出显示省略号 |
css |
default |
@media (min-width: $screen-xs) |
480px |
@media (min-width: $screen-sm) |
768px |
@media (min-width: $screen-md) |
992px |
@media (min-width: $screen-lg) |
1200px |
可以通过修改以下文件来修改css
前缀和各种默认值:
/node_modules/light-stylus/config.styl
默认配置如下:
$css-prefix = v
/* Colors
========================================================================== */
$primary-color = #3399ff
$info-color = #2db7f5
$success-color = #00cc66
$warning-color = #ff9900
$error-color = #ff3300
/* Font Size
========================================================================== */
$font-size-xxl = 20px
$font-size-xl = 18px
$font-size-l = 16px
$font-size-m = 14px
$font-size-s = 12px
$font-size-xs = 10px
/* Font Family
========================================================================== */
$font-family = "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Microsoft YaHei UI", "Microsoft YaHei UI Light",Arial,sans-serif
/* Border Radius
========================================================================== */
$border-radius-base = 6px
$border-radius-small = 4px
/* Media Query
========================================================================== */
// Extra small screen / phone
$screen-xs = 480px
$screen-xs-min = $screen-xs
$screen-xs-max = ($screen-xs-min - 1)
// Small screen / tablet
$screen-sm = 768px
$screen-sm-min = $screen-sm
$screen-sm-max = ($screen-sm-min - 1)
// Medium screen / desktop
$screen-md = 992px
$screen-md-min = $screen-md
$screen-md-max = ($screen-md-min - 1)
// Large screen / wide desktop
$screen-lg = 1200px
$screen-lg-min = $screen-lg
$screen-lg-max = ($screen-lg-min - 1)
/* Animation
========================================================================== */
$transition-time = .3s
/* Box Shadow
========================================================================== */
$shadow-color = rgba(0, 0, 0, .2)
$shadow-base = $shadow-down
$shadow-card = 0 1px 1px 0 rgba(0,0,0,.1)
$shadow-up = 0 -1px 6px $shadow-color
$shadow-down = 0 1px 6px $shadow-color
$shadow-left = -1px 0 6px $shadow-color
$shadow-right = 1px 0 6px $shadow-color