第一次手打一个完整的less样式表

意义重大,要记下来。

index.less

/*初始化样式*/
@spacing: 0.18rem; //元素之间的核心间距
@theme-color: #cc0000; //项目主题颜色
body {
    font: 400 14px/1.5 Arial; //初始化字体
}
* {
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch; //在IOS操作系统的手机中滑动更流畅
}
body, button, form, html, input, label, textarea {
    margin: 0;
    padding: 0;
}
//input被填充时的样式
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f5f5f9 inset;
}
//placeholder的字体颜色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999;
}
//Google Chrome浏览器去除滚动条
::webkit-scrollar {
    display: none;
}
//外边距
.cm-mt-009 {
    margin-top: @spacing / 2;
}
.cm-mt-018 {
    margin-top: @spacing;
}
.cm-mt-036 {
    margin-top: @spacing * 2;
}
.cm-mt-080 {
    margin-top: 0.8rem;
}
.cm-ml-018 {
    margin-left: @spacing;
}
.cm-mr-009 {
    margin-right: @spacing / 2;
}
.cm-mr-018 {
    margin-right: @spacing;
}
.cm-mtb-009 {
    margin-top: @spacing / 2;
    margin-bottom: @spacing / 2;
}
.cm-mtb-018 {
    margin: @spacing 0;
}
.cm-mlr-018 {
    margin-left: @spacing;
    margin-right: @spacing;
}
.cm-m-018 {
    margin: @spacing;
}
//内边距
.cm-pt-018 {
    padding-top: @spacing;
}
.cm-ptb-018 {
    padding: @spacing 0;
}
.cm-ptb-009 {
    padding-top: @spacing / 2;
    padding-bottom: @spacing / 2;
}
.cm-plr-009 {
    padding-left: @spacing / 2;
    padding-right: @spacing / 2;
}
.cm-plr-018 {
    padding: 0 @spacing;
}
.cm-p-009 {
    padding: @spacing / 2;
}
.cm-p-018 {
    padding: @spacing;
}
//布局
.cm-flex {
    display: flex;
}
.cm-flex-column {
    display: flex;
    flex-direction: column;
}
.cm-flex-1 {
    flex: 1;
}
.cm-flex-wrap {
    flex-wrap: wrap;
}
.cm-jc-c {
    justify-content: center;
}
.cm-jc-sa {
    justify-content: space-around;
}
.cm-jc-sb {
    justify-content: space-between;
}
.cm-jc-fe {
    justify-content: flex-end;
}
.cm-ai-c {
    align-items: center;
}
.cm-as-fe {
    align-self: flex-end;
}
.cm-as-fs {
    align-self: flex-start;
}
.cm-w-full {
    width: 100%;
}
.cm-tx-l {
    text-align: left;
}
.cm-tx-r {
    text-align: right;
}
.cm-tx-c {
    text-align: center;
}
//字体颜色与背景色
.cm-c-main {
    color: @theme-color;
}
.cm-c-white {
    color: #fff;
}
.cm-c-333 {
    color: #333;
}
.cm-c-666 {
    color: #666;
}
.cm-c-999 {
    color: #999;
}
.cm-c-ddd {
    color: #ddd;
}
//字体大小
.cm-fs-020 {
    font-size: 0.20rem;
}
.cm-fs-022 {
    font-size: 0.22rem;
}
.cm-fs-024 {
    font-size: 0.24rem;
}
.cm-fs-026 {
    font-size: 0.26rem;
}
.cm-fs-028 {
    font-size: 0.28rem;
}
.cm-fs-030 {
    font-size: 0.30rem;
}
.cm-fw-bold {
    font-weight: bold;
}
.cm-fs-height {
    line-height: 0.4em;
}
//图片尺寸
.cm-img-04 {
    width: 0.4rem;
    height: 0.4rem;
}
.cm-img-05 {
    width: 0.5rem;
    height: 0.5rem;
}
.cm-img-06 {
    width: 0.6rem;
    height: 0.6rem;
}
.cm-img-08 {
    width: 0.8rem;
    height: 0.8rem;
}
.cm-img-10 {
    width: 1rem;
    height: 1rem;
}
.cm-img-12 {
    width: 1.2rem;
    height: 1.2rem;
}
.cm-img-14 {
    width: 1.4rem;
    height: 1.4rem;
}
.cm-img-16 {
    width: 1.6rem;
    height: 1.6rem;
}
.cm-img-banner {
    width: 100%;
    height: 1.6rem;
}
//边框样式
.cm-border-ddd {
    border: 1px solid #ddd;
}
.cm-border-bottom-ddd {
    border-bottom: 1px solid #ddd;
}
.cm-border-top-eee {
    border-top: #eee;
}
.cm-border-bottom-eee {
    border-bottom: 1px solid #eee;
}
//圆角样式
.cm-border-radius-10 {
    border-radius: 0.1rem;
}
.cm-border-radius-half {
    border-radius: 50%;
}
.cm-space-line {
    height: 0.18rem;
    background: #eee;
}
//按钮样式
.cm-btn-main {
    background: @theme-color;
    padding: 0.05rem 0.2rem;
    color: #fff;
    border-radius: 0.1rem;
}
.cm-btn-main-higher {
    background: @theme-color;
    padding: 0.05rem 0.2rem;
    color: #fff;
    border-radius: 0.1rem;
}
.cm-btn-border-333 {
    padding: 0.05rem 0.2rem;
    border: 1px solid #333;
    color: #333;
    border-radius: 0.1rem;
}
.cm-btn-border-main {
    border: 1px solid @theme-color;
    padding: 0.05rem 0.2rem;
    color: @theme-color;
    border-radius: 0.1rem;
}
.cm-btn-border-999 {
    border: 1px solid #999;
    padding: 0.05rem 0.2rem;
    color: #999;
    border-radius: 0.1rem;
}
//底部悬浮定位
.com-bottom-position {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0.18rem;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。