[SCSS] Write similar classes with the SCSS @for Control Directive
for The with Control Write directive classes Scss
2023-09-14 08:59:18 时间
Writing similar classes with minor variations, like utility classes, can be a pain to write and update. Sometimes just a single character is the only difference between classes and updating the defining parameter means we need to change it for every class name and value. We can write a class one time and the @for directive can write all the minor variations for us. If the similar classes need to be updated, with the help of the @for directive, they only need to be updated once. In this lesson we learn how to leverage the power of the SCSS @for control directive to relieve the pain.
Basic @for-to loop in SCSS:
// doesn't include 10 @for $i from 1 to 10 { .order { order: $i; } }
output:
.order { order: 1; } .order { order: 2; } ... .order { order: 9; }
@for-through:
// includes 5 @for $x from 1 through 5 { .level { z-index: $x; } }
output:
.level { z-index: 1; } ... .level { z-index: 5; }
@for with 'if' condition:
@for $i from 0 through 10 { $value: .5 * $i; $has-decimal: floor($value) != $value; $class-name: if( $has-decimal, #{$value - 0.5}pt5, // if true $value // if false ); .mt-#{$class-name} { margin-top: #{$value}rem; } }
output:
.mt-0 { margin-top: 0rem; } .mt-0pt5 { margin-top: 0.5rem; } .mt-1 { margin-top: 1rem; } .mt-1pt5 { margin-top: 1.5rem; } .. .mt-5 { margin-top: 5rem; }
Using attr selector:
@for $i from 0 through 10 { $value: .5 * $i; [class~="mt-#{$value}"] { margin-top: #{$value}rem; } }
output:
[class~="mt-0"] { margin-top: 0rem; } [class~="mt-0.5"] { margin-top: 0.5rem; } [class~="mt-1"] { margin-top: 1rem; } .. [class~="mt-5"] { margin-top: 5rem; }
@for with @mixin
@mixin light-color-class($color, $color-name,$i) { $color-value: if($i == 0, $color, lighten($color, 5% * $i)); .#{$color-name}#{$i} { color: $color-value; } } @for $i from 0 through 5 { @include light-color-class(red, 'passion', $i); @include light-color-class(green, 'natural', $i); @include light-color-class(blue, 'cool', $i); }
output:
.passion0 { color: red; } .natural0 { color: green; } .cool0 { color: blue; } .passion1 { color: #ff1a1a; } .natural1 { color: #009a00; } .cool1 { color: #1a1aff; } ...
相关文章
- 安卓 android studio 报错 The specified Android SDK Build Tools version (27.0.3) is ignored, as it is below the minimum supported version (28.0.3) for Android Gradle
- Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details.
- SQL SERVER 2005删除维护作业报错:The DELETE statement conflicted with the REFERENCE constraint "FK_subplan_job_id"
- [Javascript Crocks] Compose Functions for Reusability with the Maybe Type
- [Javascript] Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()
- [Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript
- [AngularJS] Using the LocalForage library for offline storage with Angular
- 【25】报错PluginlibFactory: The plugin for class‘rviz_imu_plugin/Imu’ failed to load. Error: According
- AndroidStudio3.0 注解报错Annotation processors must be explicitly declared now. The following dependencies on the compile classpath are found to contain annotation processor.
- SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍
- Mark task complete in checkbox S2 Resource not found for the segment Tasks
- Cloud for Customer的前台请求是怎么发送到后台的
- SAP Cloud for Customer里的ticket回复UI的实现
- SAP Cloud for Customer Service Control工作中心介绍
- git push报错 fatal: The current branch master has no upstream branch. To push the current
- 成功解决The following specifications were found to be incompatible with the existing python installation
- 成功解决OpenVideoCall(不可用)以及MSB8020 The build tools for v141 (Platform Toolset = ‘v141‘) cannot be found
- 【第45篇】YOLOv7: Trainable bag-of-freebies sets new state-of-the-art for real-time object detectors
- The size of tensor a (4) must match the size of tensor b (3) at non-singleton dimension 0
- Job for rh-nginx116-nginx.service failed because the control process exited with error code.
- DB2 “The transaction log for the database is full” 存在的问题及解决方案
- table for little vGL
- Aspose.Diagram for .NET 22.11.0 Crack
- 最暖最美丽流程图:yWorks yFiles for WPF 3.4.X
- Sentinel采用SphO方式定义资源,报错:The order of entry exit can‘t be paired with the order of entry
- 【异常】IDEA报错There is insufficient memory for the Java Runtime Environment to continue.
- 【多模态】Multi-modal chemical information reconstruction from images and texts for exploring the