Watch 1 Star 1 Fork 0

obear / less-osCSSMulanPSL-1.0

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
简单实用的less库 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

less-os

简介:
less-os是一个简单实用的less库,由作者从日常项目中积累整理而来,包含了浏览器兼容前缀补全和IE8等低版本浏览器兼容,适用于移动端和PC端开发.



文件说明:
less_os.less -less库主文件,存放公共属性和方法
init.less -less源码,存放项目less源码



方法列表:

方法 作用 参数说明
.clear-mp() 清除margin和padding
.box-sizing() box-sizing 盒模型计算方式 可设参数
参数1:@boxmodel - 盒子模式
默认值: content-box
可选值:
content-box | padding-box | border-box
.display-flex() 设置弹性盒子 无参数
.font-face() 自定义字体 可设参数
参数1:@path - 文字存放路径
默认值:'../fonts'
参数2:@font-name - 字体名称
无默认值
.writing-mode() 文本在水平或垂直方向上如何排布 可设参数
参数1:@mode - 模式
horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
.calc() 计算器 可设参数
参数1:@mode - 宽度/高度
可选参数:width | height
.border-radius() 设置圆角 可设参数
参数1:@radius - 圆角值
.border-cus-radius() 自定义圆角 可设参数
参数1:@radiusTop - 顶部圆角
参数2:@radiusRight - 右侧圆角
参数3:@radiusBottom - 底部圆角
参数4:@radiusLeft - 左侧圆角
.border-tl-radius() 设置左上角圆角 可设参数
参数1:@radius - 圆角值
.border-tr-radius() 设置右上角圆角 可设参数
参数1:@radius - 圆角值
.border-bl-radius() 设置左下角圆角 可设参数
参数1:@radius - 圆角值
.border-br-radius() 设置右下角圆角 可设参数
参数1:@radius - 圆角值
.border-image() 设置边框图片 可设参数
参数1:@url - 图片路径
参数2:@width - 宽度
参数3:@repeat - 循环模式
.no-box-shadow() 去除阴影
.box-shadow() 设置阴影 可设参数
参数1:@x - x轴偏移
参数2:@y - y轴偏移
参数3:@blur - 模糊距离
参数4:@color - 阴影颜色
.no-text-shadow() 去除文本阴影
.text-shadow() 设置文本阴影 可设参数
参数1:@x - x轴偏移
参数2:@y - y轴偏移
参数3:@blur - 模糊距离
参数4:@color - 阴影颜色
.text-overflow() 设置单行文本截取
.text-xline() 设置多行文本截取 可设参数:
参数1:@line - 截取行数
注:该方法只支持chrome内核浏览器
.pos-rel() 设置相对定位
.pos-abs() 设置绝对定位
.pos-fix() 设置窗口定位
.pos-center() 设置定位居中(margin-left),适合有固定宽度 可设参数
参数1:@width - 盒子宽度
参数2:@height - 盒子高度
参数3:@position - 定位方式
.pos-center-trans() 设置定位居中(translate),适合没有固定宽度且不需要支持IE8以下浏览器 可设参数
参数1:@position - 定位方式
.opacity() 设置透明度 可设参数:
参数1:@opacity - 透明度(可选值:0 ~ 100)
.background-image() 设置背景图 可设参数
参数1:@image - 图片路径
参数2:@position - 图片定位
参数3:@repeat - 循环方式
参数4:@size - 背景图覆盖大小
.background-size() 背景尺寸 可设参数:
参数1:@size - 尺寸(默认值:auto)
.background-clip() 背景覆盖的位置 可设参数:
参数1:@background-clip - 背景覆盖的位置(默认值:border-box)
.background-origin() 背景开始的位置 可设参数:
参数1:@background-origin - 背景开始的位置(默认值:padding-box)
.background-rgba() 设置透明背景色 可设参数
参数1:@red - 红色通道色值
参数2:@green - 绿色通道色值
参数3:@blue - 蓝色通道色值
参数4:@alpha - 透明度
.mask() 设置遮罩 可设参数
参数1:@url - 遮罩图片路径
参数2:@position - 遮罩开始位置
参数3:@repeat - 循环方式
参数4:@size - 遮罩尺寸
参数5:@clip - 设置裁切方式
.mask-image() 设置遮罩图片 可设参数
参数1:@url - 遮罩图片路径
.mask-mode() 根据资源的类型自动采用合适的遮罩模式,目前仅Firefox浏览器支持,可以支持同事设置多个值,默认值是match-source
.mask-position() 设置图形位置 可设参数
参数1:@type - 设置图形位置
.mask-repeat() 设置图形填充 可设参数
参数1:@type - 设置图形填充(默认值:repeat)
.mask-clip() 设置裁切 可设参数
参数1:@type - 设置裁切(默认值:no-clip)
.mask-origin() 背景开始的位置 可设参数
参数1:@type - 背景开始的位置
.mask-size() 设置遮罩图片尺寸 可设参数
参数1:@type - 设置遮罩图尺寸(默认值:auto)
.mask-typ() 设置不同的遮罩模式 可设参数
参数1:@type - 设置不同的遮罩模式(默认值:luminance)
.mask-composite() 表示当同时使用多个图片进行遮罩时候的混合方式 可设参数
参数1:@type,支持属性: [ add | subtract | intersect | exclude ]
.no-mask() 去除遮罩
.triangle() 使用css设置三角形 可设参数
参数1:top | right | bottom | left - 表示三角形朝向
参数2:width - 宽度
参数2:color - 三角形颜色
.content-columns() 分列布局 可设参数
参数1:@columnCount - 设置列数
参数2:@columnGap - 指定列之间的间距
参数3:@rule-width - 指定列之间的规则:宽度,样式和颜色
参数4:@rule-style - 指定列之间的样式
参数5:@rule-color - 指定列之间的颜色
.no-transform() 清除transform
.rotate() 设置旋转角度 可设参数
参数1:@degrees - 设置旋转角度
.rotate3d() 设置3D旋转 可设参数
参数1:@x - x轴
参数2:@y - y轴
参数2:@z - z轴
@degrees - 角度
.rotateX() 设置x轴偏移 可设参数
参数1:@degrees - 设置旋转角度
.rotateY() 设置y轴偏移 可设参数
参数1:@degrees - 设置旋转角度
.rotateZ() 设置z轴偏移 可设参数
参数1:@degrees - 设置旋转角度
.scale() 设置缩放 可设参数
参数1:@x - 设置水平缩放
参数2:@y - 设置垂直缩放
.scaleX() 设置x轴缩放 可设参数
参数1:@x - 设置水平缩放
.scaleY() 设置y轴缩放 可设参数
参数1:@y - 设置垂直缩放
.translate() 设置偏移 可设参数
参数1:@x - 设置水平偏移
参数2:@y - 设置垂直偏移
.translateX() 设置x轴偏移 可设参数
参数1:@x - 设置x轴偏移
.translateY() 设置y轴偏移 可设参数
参数1:@y - 设置y轴偏移
.translateZ() 设置z轴偏移 可设参数
参数1:@z - 设置z轴偏移
.translate3d() 设置偏移 可设参数
参数1:@x - 设置x轴偏移
参数2:@y - 设置y轴偏移
参数3:@z - 设置z轴偏移

Comments ( 0 )

Sign in for post a comment

CSS
1
https://gitee.com/obear997/less-os.git
git@gitee.com:obear997/less-os.git
obear997
less-os
less-os
master

Search

231008 48f1a665 1899542 231017 9a6720c6 1899542