顔色
sass顔色变量声明
在vue中声明颜色变量时需要在 vue.config.js 里面增加如下配置。
module.exports = {// ... css: {sourceMap: true, loaderOptions: {sass: {prependData: `@import "@/assets/styles/variable.scss";` } } }}
主题色
$color-red: #ff3333;$color-purple: #ff33a9;$color-orange: #ff8833;$color-blue: #3377ff;
文字色
$color-black: #000;$color-dark: #333;$color-deep: #555;$color-pl: #999999;$color-weak: #B3B3B3;$color-white: #fff;
####### 背景色
$bg-bar: #F9F9F9;$bg-page: #F3F3F3;$bg-page-light: #F9F9F9;
颜色样式，需使用颜色变量
.bg-red {background-color: $color-red !important;}.bg-purple {background-color: $color-purple !important;}.bg-orange {background-color: $color-orange !important;}.bg-blue {background-color: $color-blue !important;}.color-red {color: $color-red !important;}.color-purple {color: $color-purple !important;}.color-orange {color: $color-orange !important;}.color-blue {color: $color-blue !important;}.text-black {color: #000;}.text-dark {color: #333;}.text-deep {color: #555;}.text-weak {color: #B3B3B3;}.text-white {color: #fff;}
字体
.f10 {font-size: 10px;}.f12 {font-size: 12px;}.f14 {font-size: 14px;}.f15 {font-size: 15px;}.f17 {font-size: 17px;}.f20 {font-size: 20px;}.f24 {font-size: 24px;}/* // 文字对齐 */.tl {text-align: left;}.tc {text-align: center;}.tr {text-align: right;}
浮动与清除浮动
.fl {float: left;}.fr {float: right;}.fix {*zoom: 1;}.fix:after {display: table;content: '';clear: both;}
显示
.dn {display: none;}.di {display: inline;}.db {display: block;}.dib {display: inline-block;}.dt {display: table;}div.dib {*display: inline;*zoom: 1;}.vm {vertical-align: middle;}.vib {display: inline-block;vertical-align: middle;}
定位
.pr {position: relative;}.pa {position: absolute;}.pf {position: fixed;}
盒子模型
.ml4 {margin-left: 4px;}.mr4 {margin-right: 4px;}.mt4 {margin-top: 4px;}.mb4 {margin-bottom: 4px;}.ml8 {margin-left: 8px;}.mr8 {margin-right: 8px;}.mt8 {margin-top: 8px;}.mb8 {margin-bottom: 8px;}.ml12 {margin-left: 12px;}.mr12 {margin-right: 12px;}.mt12 {margin-top: 12px;}.mb12 {margin-bottom: 12px;}.ml16 {margin-left: 16px;}.mr16 {margin-right: 16px;}.mt16 {margin-top: 16px;}.mb16 {margin-bottom: 16px;}.ml20 {margin-left: 20px;}.mr20 {margin-right: 20px;}.mt20 {margin-top: 20px;}.mb20 {margin-bottom: 20px;}.ml24 {margin-left: 24px;}.mr24 {margin-right: 24px;}.mt24 {margin-top: 24px;}.mb24 {margin-bottom: 24px;}.ml10 {margin-left: 10px;}.mr10 {margin-right: 10px;}.mt10 {margin-top: 10px;}.mb10 {margin-bottom: 10px;}.ml15 {margin-left: 15px;}.mr15 {margin-right: 15px;}.mt15 {margin-top: 15px;}.mb15 {margin-bottom: 15px;}
按钮禁用
.disabled {outline: 0 none;cursor: default !important;opacity: .4;filter: alpha(opacity=40);-ms-pointer-events: none;pointer-events: none;}
CSS画圆半圆扇形三角梯形
div{margin: 50px;width: 100px;height: 100px;background: red;}/* 半圆 */.half-circle{height: 50px;border-radius: 50px 50px 0 0;}/* 扇形 */.sector{border-radius: 100px 0 0;}/* 三角 */.triangle{width: 0px;height: 0px;background: none;border: 50px solid red;border-color: red transparent transparent transparent;}/* 梯形 */.ladder{width: 50px;height: 0px;background: none;border: 50px solid red;border-color: red transparent transparent transparent;}
初始化css样式代码 颜色 字体 浮动与清除浮动 显示 定位 盒子模型 按钮禁用 CSS画圆半圆扇形三角梯形
