首页 > 其他分享 >style.scss

style.scss

时间：2022-11-21 00:00:15浏览次数：37  
标签：scss style color text padding left margin size 

@import "./variables";

//  全局样式
* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
    outline: none;
}

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
    height: 100vh;
}

a {
    color: #343440;
    text-decoration: none;
}

.clearfix {
    &::after {
        content: "";
        display: table;
        height: 0;
        line-height: 0;
        visibility: hidden;
        clear: both;
    }
}

//浮动
.float-r {
    float: right;
}

//浮动
.float-l {
    float: left;
}

// 字体加粗
.fw-b {
    font-weight: bold;
}

//文章一行显示，多余省略号显示
.title-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-color-black {
    background-color: rgba(19, 25, 47, 0.6);
}

.bg-color-blue {
    background-color: #1a5cd7;
}

.colorBlack {
    color: #272727 !important;

    &:hover {
        color: #272727 !important;
    }
}

.colorGrass {
    color: #33cea0;

    &:hover {
        color: #33cea0 !important;
    }
}

.colorRed {
    color: #ff5722;

    &:hover {
        color: #ff5722 !important;
    }
}

.colorText {
    color: #d3d6dd !important;

    &:hover {
        color: #d3d6dd !important;
    }
}

.colorBlue {
    color: #257dff !important;

    &:hover {
        color: #257dff !important;
    }
}

//颜色
@each $colorkey, $color in $colors {
    .text-#{$colorkey} {
        color: $color;
    }

    .bg-#{$colorkey} {
        background-color: $color;
    }
}

//对齐
@each $var in (left, center, right) {
    .text-#{$var} {
        text-align: $var !important;
    }
}

//flex
@each $key, $value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}

@each $key, $value in $flex-ai {
    .ai-#{$key} {
        align-items: $value;
    }
}

//字体
@each $fontkey, $fontvalue in $font-sizes {
    .fs-#{$fontkey} {
        font-size: $fontvalue * $base-font-size;
    }
}

//.mt-1 => margin top
//spacing

@each $typekey, $type in $spacing-types {
    //.m-1
    @each $sizekey, $size in $spacing-sizes {
        .#{$typekey}-#{$sizekey} {
            #{$type}: $size * $spacing-base-size;
        }
    }

    //.mx-1
    @each $sizekey, $size in $spacing-sizes {
        .#{$typekey}x-#{$sizekey} {
            #{$type}-left: $size * $spacing-base-size;
            #{$type}-right: $size * $spacing-base-size;
        }

        .#{$typekey}y-#{$sizekey} {
            #{$type}-top: $size * $spacing-base-size;
            #{$type}-bottom: $size * $spacing-base-size;
        }
    }

    //.mt-1
    @each $directionkey, $direction in $spacing-directions {
        @each $sizekey, $size in $spacing-sizes {
            .#{$typekey}#{$directionkey}-#{$sizekey} {
                #{$type}-#{$direction}: $size * $spacing-base-size;
            }
        }
    }

    .#{$typekey} {
        #{$type}: 0;
    }
}

.tl{ text-align: left; }
.tc{ text-align: center; }
.tr{ text-align: right; }
.pr{ position: relative; }
.pa{ position: absolute; }
.pf{ position: fixed; }
.fl{ float: left; }
.fr{ float: right; }
.block{ display: block; }
.hidden{ display: none; }
.displayTable{ display: table; }
.displayTableCell{ display: table-cell; }
.none{ display: none; }
.z1{z-index: 1;}
.z2{z-index: 2;}
.z3{z-index: 3;}
.z9{z-index: 9;}
.z99{z-index: 99;}
.imgVertical{height: 100%; width: 0; display: inline-block; vertical-align: middle;}/* 图片水平垂直居中 */
/*== 鼠标状态==*/
.cp{cursor: pointer; }
.cd{cursor: default;}
/*== 字号 ==*/
.f12{ font-size: 12px; }
.f13{ font-size: 13px; }
.f14{ font-size: 14px; }
.f15{ font-size: 15px; }
.f16{ font-size: 16px; }
.f18{ font-size: 18px; }
.f20{ font-size: 20px; }
.f22{ font-size: 22px; }
.f24{ font-size: 24px; }
.f26{ font-size: 26px; }
.f30{font-size: 30px;}
.f32{font-size: 32px;}
.f34{font-size: 34px;}
.f36{ font-size: 36px; }
.f40{ font-size: 40px; }
.f48{font-size: 48px;}
.f60{font-size: 60px;}
.fb{ font-weight: bold; }
.fn{ font-weight: normal; }
.l12 { line-height: 12px; }
.l16 { line-height: 16px; }
.l18 { line-height: 18px; }
.l20 { line-height: 20px; }
.l24 { line-height: 24px; }
.l26 { line-height: 26px; }
.l30 { line-height: 30px; }
.l34 { line-height: 34px; }
.l36 { line-height: 36px; }
.l40 { line-height: 40px; }
.l48 { line-height: 48px; }
.l60 { line-height: 60px; }
.l_1 { line-height: 1.0; }
.l_15 { line-height: 1.5; }
.l_20 { line-height: 2.0; }
/*== 字色 ==*/
.text-white{ color: #fff; }
.text-gray3{ color: #333; }
.text-gray6{ color: #666; }
.text-gray9{ color: #999; }
.text-gray12{ color: #D3D3D3; }
.text-blue{ color: #1371E6; }
.text-green{ color: #225e22; }
.text-blue3{ color: #4193ef; }
.text-blue6{ color: #78b3f8; }
.text-blue9{ color: #7cd0f6; }
.text-blue12{ color: #97e4fc; }
.text-red{ color: #EF205A; }
.text-orange{color: #f28b11;}
/*== 宽度 ==*/
.w_10{width: 10%}
.w_15{width: 15%}
.w_19{width: 19.2%}
.w_20{width: 20%}
.w_25{width: 25%}
.w_30{width: 30%}
.w_35{width: 35%}
.w_40{width: 40%}
.w_45{width: 45%}
.w_50{width: 50%}
.w_55{width: 55%}
.w_60{width: 60%}
.w_65{width: 65%}
.w_70{width: 70%}
.w_75{width: 75%}
.w_80{width: 80%}
.w_85{width: 85%}
.w_90{width: 90%}
.w_95{width: 95%}
.w_100{width: 100%;}
.w280{width: 280px;}
.w700{width: 700px;}
.h100 { height: 100%; }
/*== 背景色 ==*/
.bg-white{background-color: #fff;}
.bg-blank9{background-color: #262626;}
.bg_grey{background-color: #f2f3f7;}
.bg_grey9{background-color: #f6f6f6;}
.bg-blue{background-color: #0a69f3;}
.bg-blue9{background-color: #4889ec;}
/*== 圆角 ==*/
.br2{ border-radius: 2px; }
.br4{ border-radius: 4px; }
.br6{ border-radius: 6px; }
.br8{ border-radius: 8px; }
.br10{ border-radius: 10px; }
.br50{ border-radius: 50px; }
/*== 内外边距 ==*/
.m5{margin: 5px;}
.m10{margin: 10px;}
.m15{margin: 15px;}
.m20{margin: 20px;}
.m30{margin: 30px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt35{margin-top: 35px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt100{margin-top: 100px;}
.mt200{margin-top: 200px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb35{margin-bottom: 35px;}
.mb40{margin-bottom: 40px;}
.mb45{margin-bottom: 45px;}
.mb50{margin-bottom: 50px;}
.mb100{margin-bottom: 100px;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}
.ml25{margin-left: 25px;}
.ml30{margin-left: 30px;}
.ml35{margin-left: 35px;}
.ml40{margin-left: 40px;}
.ml50{margin-left: 50px;}
.ml100{margin-left: 100px;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
.mr25{margin-right: 25px;}
.mr30{margin-right: 30px;}
.mr35{margin-right: 35px;}
.mr40{margin-right: 40px;}
.mr50{margin-right: 50px;}
.mr100{margin-right: 100px;}
.p20{ padding: 20px; }
.p5{padding: 5px;}
.p10{padding: 10px;}
.p15{padding: 15px;}
.p30{padding: 30px;}
.p40{padding: 40px;}
.p50{padding: 50px;}
.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}
.pt25{padding-top: 25px;}
.pt30{padding-top: 30px;}
.pt35{padding-top: 35px;}
.pt40{padding-top: 40px;}
.pt50{padding-top: 50px;}
.pt100{padding-top: 100px;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}
.pb25{padding-bottom: 25px;}
.pb30{padding-bottom: 30px;}
.pb35{padding-bottom: 35px;}
.pb40{padding-bottom: 40px;}
.pb50{padding-bottom: 50px;}
.pb100{padding-bottom: 100px;}
.pl5{padding-left: 5px;}
.pl10{padding-left: 10px;}
.pl15{padding-left: 15px;}
.pl20{padding-left: 20px;}
.pl25{padding-left: 25px;}
.pl30{padding-left: 30px;}
.pl35{padding-left: 35px;}
.pl40{padding-left: 40px;}
.pl45{padding-left: 45px;}
.pl50{padding-left: 50px;}
.pl100{padding-left: 100px;}
.pr5{padding-right: 5px;}
.pr10{padding-right: 10px;}
.pr15{padding-right: 15px;}
.pr20{padding-right: 20px;}
.pr25{padding-right: 25px;}
.pr30{padding-right: 30px;}
.pr35{padding-right: 35px;}
.pr40{padding-right: 40px;}
.pr50{padding-right: 50px;}
.pr80{padding-right: 80px;}
.pr100{padding-right: 100px;}
.over_hidden{overflow: hidden;}
/*=== 文本溢出隐藏 单行 ===*/
.text-over-el {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
/*=== 文本溢出隐藏 多行 ===*/
.text-over-el2{
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 2;
}
.text-over-el3{
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 3;
}
.text-over-el4{
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 4;
}
/*== 动画 ==*/
.trans{/* 过度动画 */
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.scale:hover{/* 鼠标划上放大效果 */
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
}

.upward:hover{/* 鼠标划上上升效果 */
    -webkit-transform:translate(0,-10px);
    -moz-transform:translate(0,-10px);
    -ms-transform:translate(0,-10px);
    -o-transform:translate(0,-10px);
    transform:translate(0,-10px);
}

.fix_t {
    position: fixed;
    top: 0;
}

.fix_b {
    position: fixed;
    bottom: 0;
}

a {
    text-decoration: none
}

li {
    list-style: none;
}

.height_center {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.width_center {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.w_h_center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
}

.el-container {
    height: 100vh;
}

.block {
    float: right;
    padding: 20px 0 10px 0;
}
// 滚动条美化
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgb(150, 149, 149);
    background-color: #a8a8a8;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgb(150, 149, 149);
    border-radius: 5px;
    background-color: #f1f1f1;
}

标签：scss,style,color,text,padding,left,margin,size
From： https://www.cnblogs.com/zhaoliang1997/p/16889337.html

相关文章

  • style标签上添加scoped后父组件影响了子组件样式
    style标签上添加scoped之后，只会作用于当前组件，组件之间样式不相互影响，父子组件之间也不影响，但子组件根元素样式会受到父组件样式影响；解决VueLoader里面有一句使用scop......
  • 在 scss 中使用变量
    问题之前二次封装了一个树形组件MenuTree，自定义了节点名。后来优化为：节点名超过一定宽度就显示toolTip样式，即：以省略号显示超出部分内容，只有在鼠标悬浮时才会显示完整内......
  • checkstyle
    目录是什么如何使用是什么和阿里代码规范一样的东西，默认为sun、google代码规范，可自己扩展，可自由选择。如何使用1：idea插件安装：2：找到公司的自定义代码规范文件：3：使用......
  • Python stylecloud制作酷炫的词云图
    这周参加一个创新培训，结束后有个答辩需要制作ppt，为了更好的展示内容，想到用词云图。本文分享一下如何基于Python的stylecloud制作酷炫的词云图。stylecloud是wordcloud优化改......
  • Vue3在Vite中配置scss并使用
     提出问题单个文件引入时，需要在每个 stylelang="scss"scoped标签下这样引入,每次都要手动引入非常麻烦，因此就想做全局配置@import"@/assets/scss/global.scss"......
  • ubuntu install jsoncpp and demos,StyledWriter,FastWriter,Reader,parse
    1.Installsudoapt-getinstalllibjsoncpp-dev2.Addusingheader.#include<jsoncpp/json/json.h>3.Use#include<algorithm>#include<chrono>#include<ct......
  • Android代码规范利器： Checkstyle
    程序代码向来都不仅仅是用来运行的，写的一手好代码，易读，可维护应该是每个程序员所追求的。每个团队都（应该）有一套优良统一的代码规范，而规范的检查依赖于人工检测就不太现实，好在......
  • 解决Checkstyle File Name 异常的问题
    Checkstyle是一款很棒的工具，用来发现很多编码风格的问题。还不了解的同学可以移步这里​​Android代码规范利器：Checkstyle​​查看。但是在使用Checkstyle时，却出现了一些问......
  • fiori element 和 free style 课程合集
    购买套餐专属福利：以后的小知识点（各种控件介绍等）视频，免费分享大连各世界500强公司和日本高端的内部好职位信息分享适当有偿帮助大家解决学习时遇到的困难优秀同学有机......
  • scss 语法
    scss语法介绍 这里既然是对语法的介绍，那么至于如何安装和编译scss我就不多少了，主要是因为本人在群里认识的小伙伴有的不会用scss，所以就借着放假的机会来对scss语法做......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99