PC端项目常用的公共样式
我们在写PC端项目时,需要
经常处理一些默认样式,如ul列表,a标签等
还需要经常的重复写一些相同的css,如项目的字体颜色,背景色,距离等
因此在此用sass语法写了一套PC端项目常用的样式,供使用,
此模板已经历3年的实际项目的考验,可放心应用于实战
使用方法 :
如现在需要设置字体为白色的样式,那么我们就这样使用,直接在要变成白色的字体上添加 g_c_f 即可
模板 :
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
html,body{
font-family: "微软雅黑";
}
a {
text-decoration: none;
&:focus{
outline: none !important;
text-decoration: none !important;
}
&:hover{
text-decoration: none !important;
}
}
ul {
list-style-type: none;
}
input,textarea {
outline: 0;
-webkit-appearance: none;
}
textarea {
resize: none;
}
button {
border: none;
}
img {
vertical-align: top;
}
.g_c_ {
&0 {
color: #000000;
}
&f {
color: #FFFFFF;
}
&c {
color: #CCCCCC;
}
&e {
color: #EEEEEE;
}
&e6 {
color: #E6E6E6;
}
&3 {
color: #333333;
}
&6 {
color: #666666;
}
&9 {
color: #999999;
}
}
//background-color
.g_bg_ {
&0 {
background-color: #000000;
}
&f {
background-color: #FFFFFF;
}
&c {
background-color: #CCCCCC;
}
&e {
background-color: #EEEEEE;
}
&e6 {
background-color: #E6E6E6;
}
&f2 {
background-color: #F2F2F2;
}
&3 {
background-color: #333333;
}
&6 {
background-color: #666666;
}
&9 {
background-color: #999999;
}
}
//float
.g_float_ {
&l {
float: left;
}
&r {
float: right;
}
&over {
overflow: hidden;
}
}
//ell
.g_ell_ {
&1 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
&2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
&3 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;
}
&4 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
word-break: break-all;
}
&5 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
word-break: break-all;
}
}
//flex
.g_flex_ {
&1 {
flex: 1;
}
&none {
flex: none;
}
&row_start {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
&row_between {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
&row_end {
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}
&column_start {
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
}
&column_between {
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
&column_end {
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-end;
}
&column_center {
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}
}
//margin
.g_m {
&t_ {
&1 {
margin-top: 1px;
}
&2 {
margin-top: 2px;
}
&3 {
margin-top: 3px;
}
&4 {
margin-top: 4px;
}
&5 {
margin-top: 5px;
}
&6 {
margin-top: 6px;
}
&7 {
margin-top: 7px;
}
&8 {
margin-top: 8px;
}
&9 {
margin-top: 9px;
}
&10 {
margin-top: 10px;
}
&11 {
margin-top: 11px;
}
&12 {
margin-top: 12px;
}
&13 {
margin-top: 13px;
}
&14 {
margin-top: 14px;
}
&15 {
margin-top: 15px;
}
&16 {
margin-top: 16px;
}
&17 {
margin-top: 17px;
}
&18 {
margin-top: 18px;
}
&19 {
margin-top: 19px;
}
&20 {
margin-top: 20px;
}
}
&r_ {
&1 {
margin-right: 1px;
}
&2 {
margin-right: 2px;
}
&3 {
margin-right: 3px;
}
&4 {
margin-right: 4px;
}
&5 {
margin-right: 5px;
}
&6 {
margin-right: 6px;
}
&7 {
margin-right: 7px;
}
&8 {
margin-right: 8px;
}
&9 {
margin-right: 9px;
}
&10 {
margin-right: 10px;
}
&11 {
margin-right: 11px;
}
&12 {
margin-right: 12px;
}
&13 {
margin-right: 13px;
}
&14 {
margin-right: 14px;
}
&15 {
margin-right: 15px;
}
&16 {
margin-right: 16px;
}
&17 {
margin-right: 17px;
}
&18 {
margin-right: 18px;
}
&19 {
margin-right: 19px;
}
&20 {
margin-right: 20px;
}
}
&b_ {
&1 {
margin-bottom: 1px;
}
&2 {
margin-bottom: 2px;
}
&3 {
margin-bottom: 3px;
}
&4 {
margin-bottom: 4px;
}
&5 {
margin-bottom: 5px;
}
&6 {
margin-bottom: 6px;
}
&7 {
margin-bottom: 7px;
}
&8 {
margin-bottom: 8px;
}
&9 {
margin-bottom: 9px;
}
&10 {
margin-bottom: 10px;
}
&11 {
margin-bottom: 11px;
}
&12 {
margin-bottom: 12px;
}
&13 {
margin-bottom: 13px;
}
&14 {
margin-bottom: 14px;
}
&15 {
margin-bottom: 15px;
}
&16 {
margin-bottom: 16px;
}
&17 {
margin-bottom: 17px;
}
&18 {
margin-bottom: 18px;
}
&19 {
margin-bottom: 19px;
}
&20 {
margin-bottom: 20px;
}
}
&l_ {
&1 {
margin-left: 1px;
}
&2 {
margin-left: 2px;
}
&3 {
margin-left: 3px;
}
&4 {
margin-left: 4px;
}
&5 {
margin-left: 5px;
}
&6 {
margin-left: 6px;
}
&7 {
margin-left: 7px;
}
&8 {
margin-left: 8px;
}
&9 {
margin-left: 9px;
}
&10 {
margin-left: 10px;
}
&11 {
margin-left: 11px;
}
&12 {
margin-left: 12px;
}
&13 {
margin-left: 13px;
}
&14 {
margin-left: 14px;
}
&15 {
margin-left: 15px;
}
&16 {
margin-left: 16px;
}
&17 {
margin-left: 17px;
}
&18 {
margin-left: 18px;
}
&19 {
margin-left: 19px;
}
&20 {
margin-left: 20px;
}
}
}
//padding
.g_p {
&t_ {
&1 {
padding-top: 1px;
}
&2 {
padding-top: 2px;
}
&3 {
padding-top: 3px;
}
&4 {
padding-top: 4px;
}
&5 {
padding-top: 5px;
}
&6 {
padding-top: 6px;
}
&7 {
padding-top: 7px;
}
&8 {
padding-top: 8px;
}
&9 {
padding-top: 9px;
}
&10 {
padding-top: 10px;
}
&11 {
padding-top: 11px;
}
&12 {
padding-top: 12px;
}
&13 {
padding-top: 13px;
}
&14 {
padding-top: 14px;
}
&15 {
padding-top: 15px;
}
&16 {
padding-top: 16px;
}
&17 {
padding-top: 17px;
}
&18 {
padding-top: 18px;
}
&19 {
padding-top: 19px;
}
&20 {
padding-top: 20px;
}
}
&r_ {
&1 {
padding-right: 1px;
}
&2 {
padding-right: 2px;
}
&3 {
padding-right: 3px;
}
&4 {
padding-right: 4px;
}
&5 {
padding-right: 5px;
}
&6 {
padding-right: 6px;
}
&7 {
padding-right: 7px;
}
&8 {
padding-right: 8px;
}
&9 {
padding-right: 9px;
}
&10 {
padding-right: 10px;
}
&11 {
padding-right: 11px;
}
&12 {
padding-right: 12px;
}
&13 {
padding-right: 13px;
}
&14 {
padding-right: 14px;
}
&15 {
padding-right: 15px;
}
&16 {
padding-right: 16px;
}
&17 {
padding-right: 17px;
}
&18 {
padding-right: 18px;
}
&19 {
padding-right: 19px;
}
&20 {
padding-right: 20px;
}
}
&b_ {
&1 {
padding-bottom: 1px;
}
&2 {
padding-bottom: 2px;
}
&3 {
padding-bottom: 3px;
}
&4 {
padding-bottom: 4px;
}
&5 {
padding-bottom: 5px;
}
&6 {
padding-bottom: 6px;
}
&7 {
padding-bottom: 7px;
}
&8 {
padding-bottom: 8px;
}
&9 {
padding-bottom: 9px;
}
&10 {
padding-bottom: 10px;
}
&11 {
padding-bottom: 11px;
}
&12 {
padding-bottom: 12px;
}
&13 {
padding-bottom: 13px;
}
&14 {
padding-bottom: 14px;
}
&15 {
padding-bottom: 15px;
}
&16 {
padding-bottom: 16px;
}
&17 {
padding-bottom: 17px;
}
&18 {
padding-bottom: 18px;
}
&19 {
padding-bottom: 19px;
}
&20 {
padding-bottom: 20px;
}
}
&l_ {
&1 {
padding-left: 1px;
}
&2 {
padding-left: 2px;
}
&3 {
padding-left: 3px;
}
&4 {
padding-left: 4px;
}
&5 {
padding-left: 5px;
}
&6 {
padding-left: 6px;
}
&7 {
padding-left: 7px;
}
&8 {
padding-left: 8px;
}
&9 {
padding-left: 9px;
}
&10 {
padding-left: 10px;
}
&11 {
padding-left: 11px;
}
&12 {
padding-left: 12px;
}
&13 {
padding-left: 13px;
}
&14 {
padding-left: 14px;
}
&15 {
padding-left: 15px;
}
&16 {
padding-left: 16px;
}
&17 {
padding-left: 17px;
}
&18 {
padding-left: 18px;
}
&19 {
padding-left: 19px;
}
&20 {
padding-left: 20px;
}
}
}