前端scss使用

  1. scss文件可以定义变量函数，公共类
// 全局变量
/* 颜色 */
$color_white: #FFFFFF;
$color_pink: #FE5C82;
$color_gray: gray;
$color_3: #333333;
$color_6: #666666;
$color_9: #999999;


/* letter-space */
.letter-space-29{
    letter-spacing: 29rpx;
}
.font-30-4-6{
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.font-30-5-3{
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 500;
    color: #333333;
}
.hui-bg-white{
    background-color: $color_white;
}

.gui-bg-gray{
    background-color: $color_gray;
}

.hui-bg-FE5C82{
    background-color: $color_pink;
}
/* 次要说明文字/图标颜色 */
.hui-color-999{
    color: $color_9;
}
/* 标准文字用色 */
.han-color-666{
    color: $color_6;
}
/* 标题/重要文字/输入文字 */
.han-color-333{
    color: $color_3;
}
.hui-color-white {
    color: $color_white;
}
.hui-color-FE5C82 {
    color: $color_pink;
}


/* 宽 */
.hui-width-750{
    width: 750rpx;
}
.hui-margin-top-26{
    margin-top: 26rpx;
}
.hui-mar-right-100{
    margin-right: 100rpx;
}
.hui-mar-right-68{
    margin-right: 68rpx;
}
.hui-mar-bottom-24{
    margin-bottom: 24rpx;
}
.hui-padding-left-40{
    padding-left: 40rpx;
}
.hui-padding-left-68{
    padding-left: 68rpx;
}
.hui-dis-lineblock{
    display: inline-block;
}

/* 定位 */
.hui-pos-rel{
    position: relative;
}

.hui-pos-abs{
    position: absolute;
}
.hui-line-D9D9D9{
    border-bottom: 1px solid #D9D9D9;
}
.hui-form-label {
    height: 105rpx;
    font-size: 30rpx;
    line-height: 96rpx;
    overflow: hidden;
}
.hui-form-body{
    width: 200rpx;
    overflow: hidden;
    flex: 1;
}
.hui-form-input{
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
}
.hui-text {
    font-size: 30rpx;
    font-weight: 400;
    color: #666666;
    line-height: 42rpx;
}

.hui-sbutton{
    width: 614rpx;
        height: 88rpx;
        background: linear-gradient(90deg, #FF8D70 0%, #FE5485 100%);
        border-radius: 49rpx;
}
.hui-horizontal-line{
    display: inline-block;
    width: 128rpx;
    border: 1px solid #D5D5D5;
}
.hui-sbutton {
    width: 100%;
    height: 80rpx;
    border-radius: 8rpx;
    padding: 0;
    margin: 0;
}

.hui-letter-spacing{
        letter-spacing: 7rpx;
}

/* flex布局 水平方向*/
.hui-flex-row-center-center{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.hui-flex-row-start-center{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.hui-flex-row-start-start{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.hui-flex-row-between-center{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


/* flex布局 垂直方向*/
.hui-flex-column-center-center{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.hui-flex-column-between-center{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


/* 
    字号26+自重+颜色
 */
.hui-font-26-4-3{
    font-size: 26rpx;
    font-weight: 400; 
    font-family: PingFangSC-Medium, PingFang SC;
    color: #333333;
}
.hui-font-26-4-6{
    font-size: 26rpx;
    font-weight: 400; 
    font-family: PingFangSC-Medium, PingFang SC;
    color: #666666;
}
.hui-font-26-4-9{
    font-size: 26rpx;
    font-weight: 400; 
    font-family: PingFangSC-Medium, PingFang SC;
    color: #999999;
}
/* 
    字号28+自重400+颜色
 */
.hui-font-28-4-3{
    font-size: 28rpx;
    font-weight: 400; 
    font-family: PingFangSC-Medium, PingFang SC;
    color: #333333;
}

.hui-font-28-4-6{
    font-size: 28rpx;
    font-weight: 400; 
    font-family: PingFangSC-Medium, PingFang SC;
    color: #666666;
}
.hui-font-28-4-9{
    font-size: 28rpx;
    font-weight: 400; 
    font-family: PingFangSC-Medium, PingFang SC;
    color: #999999;
}
/* 
    字号30+自重500+颜色
 */
.hui-font-30-5-3{
    font-size: 30rpx;
    font-weight: 500; 
    font-family: PingFangSC-Medium, PingFang SC;
    color: #333333;
}
/* 
    字号32+自重400+颜色
 */
.hui-font-32-5-3{
    font-size: 32rpx;
    font-weight: 500; 
    font-family: PingFangSC-Medium, PingFang SC;
    color: #333333;
}
/* 
    字号34+自重500+颜色
 */
.hui-font-34-5-3{
    font-size: 34rpx;
    font-weight: 500; 
    font-family: PingFangSC-Medium, PingFang SC;
    color: #333333;
}
/* 
    字号36+自重500+颜色
 */
.hui-font-36-5-3{
    font-size: 36rpx;
    font-weight: 500; 
    font-family: PingFangSC-Medium, PingFang SC;
    color: #333333;
}







/* 
    flex
 */
.hui-flex-row-flex-end-center{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
}
.hui-flex-row-start-center{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
}
.hui-flex{
    display: flex;
}
.hui-flex-direction-row{
    flex-direction: row;
}
.hui-flex-direction-column{
    flex-direction: column;
}
.hui-justify-content-space{
    justify-content: space-around;
} 
.hui-justify-content-between{
    justify-content: space-between;
} 
.hui-justify-content-center{
    justify-content: center;
}
.hui-align-items-center{
    align-items: center;
}
.hui-flex-nowrap{
    flex-wrap: nowrap;
}
.hui-flex-basis-100{
    flex-basis: 100rpx;
}



$linearGradient: linear-gradient(90deg, #FF8D70 0%, #FE5485 100%);
@mixin width($width: 0rpx) {
    width: $width;
}
@mixin height($height: 0rpx) {
    height: $height;
}
@mixin lineHeight($line-height: 0rpx){
    line-height: $line-height;
}

/* flex */
@mixin flex-row-center() {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
/* 定位 */
@mixin positionlt($position: relative, $left: 0rpx, $top: 0rpx){
    position: $position;
    left: $left;
    top: $top;
}
/* 和模型属性 */
@mixin contentbox ($box-sizing: border-box, $width: 0rpx, $height: 0rpx, $padding-t: 0rpx, $padding-r: 0rpx, $padding-b: 0rpx, $padding-l: 0rpx, $background: $color_white, $border-radious: 0rpx, $margin-t: 0rpx, $margin-r: 0rpx, $margin-b: 0rpx, $margin-l: 0rpx){
    box-sizing: $box-sizing;
    width: $width;
    height: $height;
    padding-top: $padding-t;
    padding-right: $padding-r;
    padding-bottom: $padding-b;
    padding-left: $padding-l;
    background: $background;
    border-radius: $border-radious;
    margin-top: $margin-t;
    margin-right: $margin-r;
    margin-bottom: $margin-b;
    margin-left: $margin-l;
}
/* 和模型属性 */
@mixin box ($box-sizing: border-box, $width: 0rpx, $height: 0rpx, $background: $color_white){
    box-sizing: $box-sizing;
    width: $width;
    height: $height;
    background: $background;
}
@mixin boxing ($width: 0rpx, $height: 0rpx, $background: $color_white){
    width: $width;
    height: $height;
    background: $background;
}
/* padding */
@mixin padding($box-sizing: border-box, $padding-t: 0rpx, $padding-r: 0rpx, $padding-b: 0rpx, $padding-l: 0rpx){
    box-sizing: $box-sizing;
    padding-top: $padding-t;
    padding-right: $padding-r;
    padding-bottom: $padding-b;
    padding-left: $padding-l;
}
@mixin padding-l($padding-l: 0rpx) {
    padding-left: $padding-l;
}
@mixin padding-r($padding-r: 0rpx) {
    padding-right: $padding-r;
}
/* padding */
@mixin paddingAll($box-sizing: border-box, $padding: 0rpx){
    box-sizing: $box-sizing;
    padding: $padding;
}
/* margin */
@mixin margin($margin-t: 0rpx, $margin-r: 0rpx, $margin-b: 0rpx, $margin-l: 0rpx){
    margin-top: $margin-t;
    margin-right: $margin-r;
    margin-bottom: $margin-b;
    margin-left: $margin-l;
}
/* 字体属性 */
@mixin font ($font-size: 28rpx, $font-weight: 400, $font-family: 'PingFangSC-Medium, PingFang SC', $color: #333333){
    font-size: $font-size;
    font-weight: $font-weight; 
    font-family: PingFangSC-Medium, PingFang SC;
    color: $color;
}
/* flex布局 */
@mixin flex-direction-align($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}
@mixin flex-item($flex-grow: 0, $flex-shrink: 1, $flex-basis: auto) {
    flex-grow: $flex-grow;
    flex-shrink: $flex-shrink;
    flex-basis: $flex-basis;
}
/* 多行溢出省略号 */
@mixin ellipsis($webkit-line-clamp: 0) {
    display: -webkit-box;
    overflow: hidden;  
    -webkit-line-clamp: $webkit-line-clamp;
    -webkit-box-orient: vertical;
    text-overflow:ellipsis;
}
  1. 使用方式
<style lang="scss" scoped>
    .card-setting {
        & .studio-img {
            @include positionlt($position: relative, $left: 0rpx, $top: 0rpx) & .userinfo {
                @include positionlt($position: absolute, $left: -2rpx, $top: 570rpx) @include flex-direction-align($direction: column, $justify: center, $align: flex-start) @include contentbox($width: 750rpx, $height: 157rpx, $background: rgba(0, 0, 0, 0.4)) & .name-sex {
                    @include font($font-size: 34rpx, $font-weight: 500, $color: #FFFFFF);
                    @include margin($margin-l: 40rpx, $margin-b: 6rpx)
                }

                & .department {
                    @include margin($margin-l: 40rpx) @include font($font-size: 26rpx, $color: #FFFFFF);
                }
            }
        }
</style>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容