使用scss自定义函数解决样式达到不写一行样式代码提升开发效率

manixchenyang

于 2024-05-10 15:30:00 发布

阅读量191

点赞数 3

文章标签： scss 前端 css

本文链接：https://blog.csdn.net/manixchenyang/article/details/138657224

版权

layout: post
title:  scss使用的常用方法
tags: css scss
categories: scss

**** scss的技巧 ***
一. for的使用
@for
在制作网格系统的时候，大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写，但在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式：

@for $i from through
@for $i from to


/* 字体大小全局样式   */
@for $i from 10 through 32 {
	.f-s-#{$i} {
		font-size: #{$i}px !important;
	}
}
使用如下:
<span class="f-s-14"></span>


/* 字体大小、行高、字体的font-weight 全局样式   */
$minFontSize : 0 !default;
$maxFontSize : 50 !default;
$fontSizeList: 100,200,300,400,500,600 !default;
@for $num from $minFontSize through $maxFontSize {
    .f-s-#{$num}{
        font-size:#{$num}px;
    }
    .l-h-#{$num}{
        line-height:#{$num}px;
    }
}
@each $num in $fontSizeList{
    .f-w-#{$num}{
        font-weight:#{$num};
    }
}

/* 外边距、内边距全局样式  */
$minMarginPadding : 0 !default;
$maxMarginPadding : 32 !default;
$marginPaddingList : 40,50,60,70,80,90,100,110,120,125,130,140,150 !default;

@for $num from $minMarginPadding through $maxMarginPadding {
    .m-t-#{$num}{
        margin-top:#{$num}px;
    }
    .m-b-#{$num}{
        margin-bottom:#{$num}px;
    }
    .m-l-#{$num}{
        margin-left:#{$num}px;
    }
    .m-r-#{$num}{
        margin-right:#{$num}px;
    }
    .m-#{$num}{
        margin:#{$num}px;
    }

    .p-t-#{$num}{
        padding-top:#{$num}px;
    }
    .p-b-#{$num}{
        padding-bottom:#{$num}px;
    }
    .p-l-#{$num}{
        padding-left:#{$num}px;
    }
    .p-r-#{$num}{
        padding-right:#{$num}px;
    }
    .p-#{$num}{
        padding:#{$num}px;
    }
}

@each $num in $marginPaddingList{
    .m-t-#{$num}{
        margin-top:#{$num}px;
    }
    .m-b-#{$num}{
        margin-bottom:#{$num}px;
    }
    .m-l-#{$num}{
        margin-left:#{$num}px;
    }
    .m-r-#{$num}{
        margin-right:#{$num}px;
    }
    .m-#{$num}{
        margin:#{$num}px;
    }

    .p-t-#{$num}{
        padding-top:#{$num}px;
    }
    .p-b-#{$num}{
        padding-bottom:#{$num}px;
    }
    .p-l-#{$num}{
        padding-left:#{$num}px;
    }
    .p-r-#{$num}{
        padding-right:#{$num}px;
    }
    .p-#{$num}{
        padding:#{$num}px;
    }
  }

.m-l-a {
    margin-left: auto;
}
.m-a {
    margin: 0 auto;
}
.t-c{
    text-align: center;
}


/* 元素的定位  */
$minPosition: 0 !default;
$maxPosition: 50 !default;
$positionList: 60, 70, 80, 90, 100 !default;

.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.fixed {
	position: fixed;
}
.absolute-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
@for $num from $minPosition through $maxPosition {
	.t-#{$num} {
		top: #{$num}px;
	}
	.r-#{$num} {
		right: #{$num}px;
	}
	.l-#{$num} {
		left: #{$num}px;
	}
	.b-#{$num} {
		bottom: #{$num}px;
	}
}

@each $num in $positionList {
	.t-#{$num} {
		top: #{$num}px;
	}
	.r-#{$num} {
		right: #{$num}px;
	}
	.l-#{$num} {
		left: #{$num}px;
	}
	.b-#{$num} {
		bottom: #{$num}px;
	}
}


//flex定位问题

$minFlex: 0 !default;
$maxFlex: 10 !default;
.flex {
  display: flex;
}
.flex-1{
  flex:1
}
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-stretch {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.flex-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-space-b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-space-a {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex-end {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}
.align-center {
  align-items: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-right {
  justify-content: right;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

@for $num from $minFlex through $maxFlex {
  .flex#{$num} {
    flex: #{$num};
  }
}


/***边框圆角 */
$minBrs : 0 !default;
$maxBrs : 150 !default;
$brsList : 50,60 !default;

@for $num from $minBrs through $maxBrs {
    .brs#{$num}{
        border-radius: #{$num}px;
    }
    .brs-t-l#{$num}{
        border-top-left-radius: #{$num}px;
    }
    .brs-t-r#{$num}{
        border-top-right-radius: #{$num}px;
    }
    .brs-b-l#{$num}{
        border-bottom-left-radius: #{$num}px;
    }
    .brs-b-r#{$num}{
        border-bottom-right-radius: #{$num}px;
    }
}

@each $num in $heightWidthList{
    .brs#{$num}{
        border-radius: #{$num}px;
    }
    .brs-t-l#{$num}{
        border-top-left-radius: #{$num}px;
    }
    .brs-t-r#{$num}{
        border-top-right-radius: #{$num}px;
    }
    .brs-b-l#{$num}{
        border-bottom-left-radius: #{$num}px;
    }
    .brs-b-r#{$num}{
        border-bottom-right-radius: #{$num}px;
    }
}

.brs-percent-50{
    border-radius: 50%;
}

@for应用在网格系统生成各个格子的代码：

//SCSS 
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}
编译出来的 CSS:

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.span1 {
  width: 60px;
}
.span2 {
  width: 140px;
}
.span3 {
  width: 220px;
}
.span4 {
  width: 300px;
}
.span5 {
  width: 380px;
}
.span6 {
  width: 460px;
}
.span7 {
  width: 540px;
}
.span8 {
  width: 620px;
}
.span9 {
  width: 700px;
}
.span10 {
  width: 780px;
}
.span11 {
  width: 860px;
}
.span12 {
  width: 940px;
}
将上面的示例稍做修改，将 @for through 方式换成 @for to:：

//SCSS
@for $i from 1 to 13 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}