scss for循环,$变量，全局样式

已于 2024-03-06 17:09:55 修改
阅读量677 收藏 8
点赞数 11
文章标签： scss 前端 css
于 2024-03-06 17:09:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ndkfa/article/details/136511823
版权

$fonWeight: 这段代码是一个 SCSS（Sassy CSS）代码片段，用于生成一系列字体加粗的类。让我解释一下其中的含义：

  1. $fonWeight：这是一个变量，包含了一系列字体加粗的值。它包括数字（100 到 900）、关键字（bold 和 bolder），这些值用于控制文本的粗细。

  2. @for $i from 1 through length($fonWeight) { ... }：这是一个 SCSS 循环，会迭代$fonWeight变量中的每个值。

  3. 生成一系列类，类名包含了字体加粗的值。例如，对于每个字体加粗值，会生成如下类：

    • .fontWeight100：对应字体加粗值为 100 的类。
    • .fontWeight200：对应字体加粗值为 200 的类。
    • .fontWeight300：对应字体加粗值为 300 的类。
    • .fontWeight400：对应字体加粗值为 400 的类。
    • .fontWeight500：对应字体加粗值为 500 的类。
    • .fontWeight600：对应字体加粗值为 600 的类。
    • .fontWeight700：对应字体加粗值为 700 的类。
    • .fontWeight800：对应字体加粗值为 800 的类。
    • .fontWeight900：对应字体加粗值为 900 的类。
    • .fontWeightbold：对应字体加粗值为 bold 的类。
    • .fontWeightbolder：对应字体加粗值为 bolder 的类。

通过这些类，可以轻松地在 HTML 元素中设置不同粗细的字体。

/* 边距 */
$boxSize: 0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60;

@for $i from 1 through length($boxSize) {
  $size_: 0;

  @if nth($boxSize, $i) !=0 {
    $size_: calc(nth($boxSize, $i) * 1px);
  }

  // padding
  .common-p-#{nth($boxSize, $i)} {
    padding: $size_;
  }

  .common-p-tb-#{nth($boxSize, $i)} {
    padding-top: $size_;
    padding-bottom: $size_;
  }

  .common-p-lr-#{nth($boxSize, $i)} {
    padding-left: $size_;
    padding-right: $size_;
  }

  .common-p-l-#{nth($boxSize, $i)} {
    padding-left: $size_;
  }

  .common-p-b-#{nth($boxSize, $i)} {
    padding-bottom: $size_;
  }

  .common-p-r-#{nth($boxSize, $i)} {
    padding-right: $size_;
  }

  .common-p-t-#{nth($boxSize, $i)} {
    padding-top: $size_;
  }

  /* margin */
  .common-m-#{nth($boxSize, $i)} {
    margin: $size_;
  }

  .common-m-tb-#{nth($boxSize, $i)} {
    margin-top: $size_;
    margin-bottom: $size_;
  }

  .common-m-lr-#{nth($boxSize, $i)} {
    margin-left: $size_;
    margin-right: $size_;
  }

  .common-m-l-#{nth($boxSize, $i)} {
    margin-left: $size_;
  }

  .common-m-b-#{nth($boxSize, $i)} {
    margin-bottom: $size_;
  }

  .common-m-r-#{nth($boxSize, $i)} {
    margin-right: $size_;
  }

  .common-m-t-#{nth($boxSize, $i)} {
    margin-top: $size_;
  }
}


/* 文字大小 */
$fontSize: 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40;

@for $j from 1 through length($fontSize) {
  .fontSize#{nth($fontSize, $j)} {
    font-size: calc(nth($fontSize, $j) * 1px);
  }
}

/* 字体加粗 */
$fonWeight: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder;

@for $i from 1 through length($fonWeight) {
  .fontWeight#{nth($fonWeight, $i)} {
    font-weight: nth($fonWeight, $i);
  }
}
.fontWeight000 {
  font-weight: normal;
}
/* img 大小 方形 */
@for $i from 1 through 160 {
  .common-img-#{$i} {
    display: block;
    width: calc($i * 1px);
    height: calc($i * 1px);
  }
}

/* 圆角 */
@for $i from 1 through 49 {
  .common-radius-#{$i} {
    border-radius: calc($i * 1px);
  }
}

.common-radius--50 {
  border-radius: 50%;
}

/* 修改滚动条 */
$scrollSize: 2, 4, 6, 8, 12;

// $scrollBackground: 2, 4, 6, 8;
@for $j from 1 through length($scrollSize) {

  $size: calc(nth($scrollSize, $j) / 2);

  .common-scroll-#{nth($scrollSize, $j)} {
    &::-webkit-scrollbar {
      width: calc(nth($scrollSize, $j) * 1px);
      height: calc(nth($scrollSize, $j) * 1px);
      background-color: transparent;
      border-radius: calc($size * 1px);
    }

    &::-webkit-scrollbar-track {
      border-radius: calc($size * 1px);
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #cacdd1;
      border-radius: calc($size * 1px);
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #a5a5a5;
    }
  }
}

/* 带点* */
$spot: red, black, blue;

@for $j from 1 through length($spot) {
  .spot-#{"" + nth($spot, $j)} {
    position: relative;

    &::before {
      position: absolute;
      content: '*';
      color: nth($spot, $j);
      top: 0;
      left: 0;
    }
  }

}

$sizeColor: #4e86ef, #999999, #faad14, #ff4d4d, #808080, #222222, #333333, #ffffff, #f3c14c;
$sizeName: 'primary', 'info', 'warning', 'danger', '808080', '222', '333', 'ffffff', f3c14c;

@for $i from 1 through length($sizeColor) {
  .color-#{nth($sizeName, $i)} {
    color: nth($sizeColor, $i);
  }

  .back-#{nth($sizeName, $i)} {
    background-color: nth($sizeColor, $i);
  }

}

.common-height {
  height: fit-content;
}

.common-width {
  width: fit-content;
}

// 
.common-column {
  display: flex;
  flex-direction: column;
}

.common-a-c-between {
  display: flex;
  align-content: space-between;
}

.common-a-center {
  display: flex;
  align-items: center;
}

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

.common-a-start {
  display: flex;
  align-content: flex-start;
}

.common-a-baseline {
  display: flex;
  align-items: baseline;
}

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

.common-j-center {
  display: flex;
  justify-content: center;
}

.common-j-between {
  display: flex;
  justify-content: space-between;
}

.common-j-around {
  display: flex;
  justify-content: space-around;
}

.common-j-evenly {
  display: flex;
  justify-content: space-evenly;
}

.common-ac-jbet {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.common-auto {
  overflow: auto;
}

$clamp: 1, 2, 3, 4, 5, 6;

@for $i from 1 through length($clamp) {
  .common-clamp-#{nth($clamp, $i)} {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: nth($clamp, $i);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.init-aBASE-jB {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.word-wrap {
  white-space: pre-wrap;
}

.word-nowrap {
  white-space: nowrap
}

.disabled {
  user-select: none;
}

.common-dailog-f5 {
  .crop-dialog {
    background: #F5F5F5;

    .crop-dialog__header {
      // border-bottom: 1px solid #e5e5e5;
      font-size: 16px !important;
      font-weight: bold;
      color: #333333;
    }

    .crop-dialog__body {
      border-top: 1px solid #e5e5e5;
    }
  }
}

.common-dailog-white .crop-dialog {
  background: #fff;

  .crop-dialog__header {
    // border-bottom: 1px solid #e5e5e5;
    font-size: 16px !important;
    font-weight: bold;
    color: #333333;
  }

  .crop-dialog__body {
    border-top: 1px solid #f3f4f6;
  }
}

.common-dailog-white.common-dailog-whiteHeader .crop-dialog {
  .crop-dialog__header {
    background: #fff;
  }
}

.common-dailog-padding-0 .crop-dialog {
  .crop-dialog__body {
    padding: 0;
  }
}

$fonWeight: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder;

@for $i from 1 through length($fonWeight) {
  .common-dailog-white.common-dailog-header#{nth($fonWeight, $i)} .crop-dialog {
    .crop-dialog__header {
      font-weight: nth($fonWeight, $i);
    }
  }
}

// 无定义边距 ***
@for $a from 1 through 100 {
  .init-p-#{$a} {
    padding-left: calc($a * 1px);
    padding-right: calc($a * 1px);
    padding-top: calc($a * 1px);
    padding-bottom: calc($a * 1px);
  }

  .init-p-lr-#{$a} {
    padding-left: calc($a * 1px);
    padding-right: calc($a * 1px);
  }

  .init-p-tb-#{$a} {
    padding-top: calc($a * 1px);
    padding-bottom: calc($a * 1px);
  }

  .init-p-t-#{$a} {
    padding-top: calc($a * 1px);
  }

  .init-p-b-#{$a} {
    padding-bottom: calc($a * 1px);
  }

  .init-p-l-#{$a} {
    padding-left: calc($a * 1px);
  }

  .init-p-r-#{$a} {
    padding-right: calc($a * 1px);
  }

  // margin
  .init-m-#{$a} {
    margin-left: calc($a * 1px);
    margin-right: calc($a * 1px);
    margin-top: calc($a * 1px);
    margin-bottom: calc($a * 1px);
  }

  .init-m-lr-#{$a} {
    margin-left: calc($a * 1px);
    margin-right: calc($a * 1px);
  }

  .init-m-tb-#{$a} {
    margin-top: calc($a * 1px);
    margin-bottom: calc($a * 1px);
  }

  .init-m-t-#{$a} {
    margin-top: calc($a * 1px);
  }

  .init-m-b-#{$a} {
    margin-bottom: calc($a * 1px);
  }

  .init-m-l-#{$a} {
    margin-left: calc($a * 1px);
  }

  .init-m-r-#{$a} {
    margin-right: calc($a * 1px);
  }
}

.fontColor {
  color: var(--color);
}

椿天在哪里
关注
Scss 基本使用 （ @extend、 @mixin、@import、@if、@for、@while、@each ）
wjianwei666的专栏
05-27 281
如：_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。注意： Scss 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin basis-text{ } 与 @mixin basis-text{ } 是一样的混入。从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。如果不希望将一个 Scss 的代码文件编译到一个 CSS 文件，可在文件名的开头添加一个下划线。
Element Plus 组件库相关技术揭秘,深入理解组件库中SCSS和CSS变量的架构应用和实践
xxxzzzqqq_的博客
03-14 3416
封装、继承、多态，并且 CSS 变量的加入使用，使得多态这一特性的实现更加丝滑。整个 Element Plus 的 CSS 架构核心思想就是，首先将那些公共的UI 样式进行提取封装成公共 CSS 变量，相当于基础类，然后每个组件又基于公共的 CSS 变量进行继承封装属于每个组件独立的 CSS 变量，相当于子类。这样一旦修改基础类的 CSS 变量，所有继承基础类的组件的样式都会发生改变，这个就是使用 CSS 变量进行封装继承的好处。
scss中使用 for 循环
weixin_42909758的博客
05-10 2216
@for $i from 1 through 30 { .color#{$i} { color:#fff!important; background: rgba(random(255), random(255), random(255), 0.8) !important; } }
scss语法，使用for循环批量设置class类
qq_17335549的博客
03-08 2603
scss语法，使用for循环批量设置class类
scss概念及使用
m0_74293254的博客
07-10 2131
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
scss @for 循环
南京小龙虾的博客
08-20 3354
在实现样式过程中碰到了一个隔一定时间右滑出来的效果，一开始一个个写，感觉太麻烦了，搜了一下scss有个@for方法，效果很强大 使用scss @for循环 注意一下在选择器调用循环项 $i 和样式里调用是有区别的，选择器里是用插值 #{} ，可以网上找点资料细看一下，然后看网上说还有 from 1 to 16 是不包含结束值16的循环， from 1 through 16包含结...
scss-@for 指令
banchousuo6747的博客
10-29 441
　　此指令用于循环输出，具有两种循环方式，下面分别做一下介绍。 　　（1）.@for $var from <start> through <end>: 　　此种方式的遍历索引区间是[start,end]，scss代码实例如下: @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } ...
scss使用for循环遍历，动态赋值类名并配置不同颜色
weixin_42674490的博客
01-03 1266
需求：后端要传入不同的等级，前端通过等级展示不同的字体颜色，通过scss遍历更有利于动态修改颜色或者增删等级
scss 导入重复执行多次_关于如何在Vue中使用scss
weixin_39761491的博客
11-21 1288
习惯了使用 scss 或 less 来编写样式，再使用 CSS 会觉得很麻烦，Vue 默认允许在 .vue文件中插入CSS，但如何在 Vue 中使用 scss 来定义样式呢？下面示例的环境是用 vue-cli 搭建、 npm 进行包管理，因此目录结构会与其他方式搭建的项目目录结构有所区别。在 Vue 中使用 Sass安装相关依赖 Vue 的 webpack 项目中需要安装上 node-sass、s...
sass/scss学习笔记
poorguy_aos的博客
12-05 557
简介 scss/sass是css的超集，类似与typescript和JavaScript的关系，最终将转换为css上线,其语法格式有scss和sass(使用“缩进”代替“花括号”)两种 本笔记仅参考了中文网中的快速入门和中文文档两个部分，更详细的请参考英文版api 注释 多行注释/* */会被编译到css中，单行注释//则不会 带!号的多行注释 /*! 版权信息 */ 通常用于加入版权信息，在处于压缩模式的css下也不会被删除 变量 变量以美元符号开头，赋值方法与 CSS 属性的写法一样 $width
scss for循环
包磊磊的博客
08-09 3288
@for $i from 1 through 10 { .icon#{$i} { background: url('../../../assets/images/sprites/icon/0#{$i}.png') } }
scss的高级用法——循环
xinTianou123的博客
11-18 2382
周末愉快呀！一起来学一点简单但非常有用的css小知识。 最近在一个项目中看到以下css class写法。
scss循环
m0_46356495的博客
12-27 635
scss、css
scss中循环的妙用
swallowblank的博客
09-08 6018
文章目录1 @each in 循环2 @for... from... to 循环 1 @each in 循环 使用一个变量： #{$变量名} $colors: ( p1: rgb(255, 113, 61), p2: lightblue, p3: lightseagreen ); @each $key, $color in $colors { &.#{$key} { background-color: $color; } } 2 @for
scss基本语法---嵌套、循环、条件（@for,@if），混入@mixin，继承@extend，导入@import，
最新发布
I_am_shy的博客
07-22 732
scss是css预编译器，可以简化css代码的书写，并可以编译成css文件使用；
scss循环生成样式
qq_43585229的博客
09-23 2446
其实循环生成css都是定义一个数组，然后遍历生成，主要在于各个语言的调用方式不一样. 这里使用的rem作为基准单位，也可以用px或者其他 _variable.scss文件 // 文件名以下划线开头表示被引用文件，引用时不用加下划线和后缀名 //定义颜色 $colors:(primary: #db9e3f, info: #4b67af, danger: #791a16, blue-1: #1f3695, 'blue': #4394e4, "white": #fff, //当键名与变量名
【高端】几个关于SCSS中for循环的高级玩法
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-06 8053
编译后的CSS代码如图。
css预处理器scss的使用&&如何全局引入
Mr.小灰狼_随笔
03-21 4651
css预处理器scss的使用&&如何全局引入 目录 scss 基本功能 1、嵌套 2、变量 $ 3、@mixin 和 @include 4、@extend 5、@import scss 在项目中的使用 1、存放 scss 文件 2、引入 variables 和mixins 2-1、局部引入 2-2、全局引入 3、入口文件中引入其他文件
scss全局变量 css全局变量
08-31
SCSS（Sassy CSS）和CSS（Cascading Style Sheets）都支持全局变量的概念，但它们在语法和用法上有一些区别。 在SCSS中，你可以使用$符号定义全局变量，例如： $primary-color: #ff0000; $secondary-color: #00ff00; 然后，在整个SCSS文件中都可以使用这些变量： .element { color: $primary-color; background-color: $secondary-color; } 这样，如果你需要更改颜色，只需更新变量的值即可，而不需要在整个文件中逐个修改。 而在CSS中，没有内置的全局变量机制。不过，你可以使用CSS预处理器（例如Sass或Less）来实现类似的效果。使用预处理器，你可以定义变量，并在编译过程中将其转换为普通的CSS代码。 例如，在Sass中，你可以定义全局变量： $primary-color: #ff0000; $secondary-color: #00ff00; 然后，通过Sass编译器将其转换为CSS代码： .element { color: $primary-color; background-color: $secondary-color; } 这样，在生成的CSS文件中，所有的变量引用都会被替换为其对应的值。 总结起来，SCSS和CSS都支持全局变量的概念，但SCSS直接内置了全局变量的语法，而CSS需要使用预处理器来实现类似的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值