- <p class="c-primary">主色</p>
- <p class="c-secondary">次色</p>
- <p class="c-success">强调色-成功</p>
- <p class="c-error">强调色-错误</p>
- <p class="c-warning">强调色-警告</p>
- <p class="c-333">辅助色-#333333灰色</p>
- <p class="c-666">辅助色-#666666灰色</p>
- <p class="c-999">辅助色-#999999灰色</p>
- <p class="c-red">标准色-红色</p>
- <p class="c-green">标准色-绿色</p>
- <p class="c-blue">标准色-蓝色</p>
- <p class="c-white">标准色-白色</p>
- <p class="c-black">标准色-黑色</p>
- <p class="c-orange">标准色-橙色</p>
- body {
- background-color: #fff;
- color: #333;
- .bg-fff {
- background-color: #fff;
- }
- a {
- color: #333;
- }
- a:hover,
- .active a {
- color: #06c;
- }
- .c-primary,
- .c-primary a,
- a.c-primary {
- color: $primary-color;
- }
- .c-primary a:hover,
- a.c-primary:hover {
- color: $primary-color;
- }
-
- .c-secondary,
- .c-secondary a,
- a.c-secondary {
- color: #555;
- }
- .c-secondary a:hover,
- a.c-secondary:hover {
- color: #555;
- }
-
- .c-success,
- .c-success a,
- a.c-success {
- color: $secondary-color;
- }
- .c-success a:hover,
- a.c-success:hover {
- color: $secondary-color
- }
-
- .c-danger,
- .c-danger a,
- a.c-danger {
- color: $danger-color
- }
- .c-danger a:hover,
- a.c-danger:hover {
- color: $danger-color
- }
-
- .c-warning,
- .c-warning a,
- a.c-warning {
- color: $warning-color;
- }
- .c-warning a:hover,
- a.c-warning:hover {
- color: $warning-color;
- }
-
- .c-error,
- .c-error a,
- a.c-error {
- color: $error-color;
- }
- .c-error a:hover,
- a.c-error:hover {
- color: $error-color;
- }
-
- .c-333,
- .c-333 a,
- a.c-333 {
- color: #333
- }
- .c-333 a:hover,
- a.c-333:hover {
- color: #333
- }
-
- .c-666,
- .c-666 a,
- a.c-666 {
- color: #666
- }
- .c-666 a:hover,
- a.c-666:hover {
- color: #666
- }
-
- .c-999,
- .c-999 a,
- a.c-999 {
- color: #999
- }
- .c-999 a:hover,
- a.c-999:hover {
- color: #999
- }
-
- .c-red,
- .c-red a,
- a.c-red {
- color: red
- }
- .c-red a:hover,
- a.c-red:hover {
- color: red
- }
-
- .c-green,
- .c-green a,
- a.c-green {
- color: green
- }
- .c-red a:hover,
- a.c-red:hover {
- color: green
- }
-
- .c-blue,
- .c-blue a,
- a.c-blue {
- color: blue
- }
- .c-blue a:hover,
- a.c-blue:hover {
- color: blue
- }
-
- .c-white,
- .c-white a,
- a.c-white {
- color: white
- }
- .c-white a:hover,
- a.c-white:hover {
- color: white
- }
-
- .c-black,
- .c-black a {
- color: #000;
- }
- .c-black a:hover,
- a.c-black:hover {
- color: #000;
- }
-
- .c-orange,
- .c-orange a,
- a.c-orange {
- color: orange;
- }
- .c-orange a:hover,
- a.c-orange:hover {
- color: orange;
- }
- }
- body {
- background-color: #fff;
- color: #333;
- }
- body .bg-fff {
- background-color: #fff;
- }
- body a {
- color: #333;
- }
- body a:hover,
- body .active a {
- color: #06c;
- }
- body .c-primary,
- body .c-primary a,
- body a.c-primary {
- color: #5a98de;
- }
- body .c-primary a:hover,
- body a.c-primary:hover {
- color: #5a98de;
- }
- body .c-secondary,
- body .c-secondary a,
- body a.c-secondary {
- color: #555;
- }
- body .c-secondary a:hover,
- body a.c-secondary:hover {
- color: #555;
- }
- body .c-success,
- body .c-success a,
- body a.c-success {
- color: #3bb4f2;
- }
- body .c-success a:hover,
- body a.c-success:hover {
- color: #3bb4f2;
- }
- body .c-danger,
- body .c-danger a,
- body a.c-danger {
- color: #dd514c;
- }
- body .c-danger a:hover,
- body a.c-danger:hover {
- color: #dd514c;
- }
- body .c-warning,
- body .c-warning a,
- body a.c-warning {
- color: #f37b1d;
- }
- body .c-warning a:hover,
- body a.c-warning:hover {
- color: #f37b1d;
- }
- body .c-error,
- body .c-error a,
- body a.c-error {
- color: #c00;
- }
- body .c-error a:hover,
- body a.c-error:hover {
- color: #c00;
- }
- body .c-333,
- body .c-333 a,
- body a.c-333 {
- color: #333;
- }
- body .c-333 a:hover,
- body a.c-333:hover {
- color: #333;
- }
- body .c-666,
- body .c-666 a,
- body a.c-666 {
- color: #666;
- }
- body .c-666 a:hover,
- body a.c-666:hover {
- color: #666;
- }
- body .c-999,
- body .c-999 a,
- body a.c-999 {
- color: #999;
- }
- body .c-999 a:hover,
- body a.c-999:hover {
- color: #999;
- }
- body .c-red,
- body .c-red a,
- body a.c-red {
- color: red;
- }
- body .c-red a:hover,
- body a.c-red:hover {
- color: red;
- }
- body .c-green,
- body .c-green a,
- body a.c-green {
- color: green;
- }
- body .c-red a:hover,
- body a.c-red:hover {
- color: green;
- }
- body .c-blue,
- body .c-blue a,
- body a.c-blue {
- color: blue;
- }
- body .c-blue a:hover,
- body a.c-blue:hover {
- color: blue;
- }
- body .c-white,
- body .c-white a,
- body a.c-white {
- color: white;
- }
- body .c-white a:hover,
- body a.c-white:hover {
- color: white;
- }
- body .c-black,
- body .c-black a {
- color: #000;
- }
- body .c-black a:hover,
- body a.c-black:hover {
- color: #000;
- }
- body .c-orange,
- body .c-orange a,
- body a.c-orange {
- color: orange;
- }
- body .c-orange a:hover,
- body a.c-orange:hover {
- color: orange;
- }