主页 / 问题

问题[scss]

Martin Hope
stackoff
Asked: 2022-02-08 05:24:10 +0800 CST
  • 0

如何从 Bootstrap 4 中删除所有断点。

例如，在标准程序集中有“col”、“col-xs”、“col-sm”等类。

其中，我只需要一个"col"。我想删除所有其余的。同样，对于为所有断点创建的其他类。

告诉我怎么做？

scss
Martin Hope
Gleb Pristupa
Asked: 2020-02-26 18:11:45 +0800 CST
  • 0

将此代码从 CSS 转换为 SCSS、使用 mixin 或扩展需要什么？

main > nav, main > div {
  display: inline-block;
}

此选项是否合适，在这种情况下是否正确？

@mixin default {
  display: inline-block;
}
  
main > nav {
  @include default;
}
  
main > div {
  @include default;
}

scss
Martin Hope
BlackStar1991
Asked: 2020-11-29 04:11:04 +0800 CST
  • 0

我正在尝试结合 SCSS 来掌握网格。从循环编译时遇到误解

body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.block_brothers {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f8fff7;
  display: grid;
  grid-template-columns: repeat(100, 1vw);
  grid-template-rows: repeat(30, 1vw);
}

$column1: ( s1: 1, f1: 25, s2: 25, f2: 27, s3: 27, f3: -1);

.bl {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #d00;
  background-color: #fff;
  z-index: 2;
  @for $i from 1 through 3 {
    &:nth-child(#{$i}) {
      grid-column-start: #{map-get($column1,'s'+$i)};
      grid-column-end: #{map-get($column1,'f'+$i)};
      grid-row: 1 / 2;
    }
  }
}

.black{
  background-color: #000;
}
.orange {
  background-color: red;
<div class="block_brothers">
  <img src="element.jpg" alt="">
  <div class="bl orange"></div>
  <div class="bl black"></div>
  <div class="bl orange"></div>
</div>
由于内置沙箱不允许您从 SCSS 下观看代码，因此我给出了 https://jsfiddle.net/skL6ymna/1/的类似物，我无法理解为什么网格系统的单元格出现故障。如何使红色 - 黑色 - 红色？

scss
Martin Hope
pepel_xD
Asked: 2020-06-19 22:20:09 +0800 CST
  • 4

有一个字符串“14px”，如何在SCSS中将其转换为数字？
例如，对于值的字符串表示，有一个函数inspect($value)，为了找出与数字相关联的单位，有unit($number)。可就算type-of(14рх)回来又怎样string，却是必须的namber。
我解释一下：有这么一段代码，看list的值是否有计量单位，如果没有，则追加 

@function chekList($list) {
    $tmp: ();
    @each $key in $list {
        @if(unitless($key)) {
            $key: inspect($key);
            $key: str-insert($key, "px", str-length($key) + 1);
        }
        $tmp: append($tmp, $key);  
    }
    @return $tmp; 
}

现在将接收到的字符串值转换为数字值......
或者建议如何将单位添加到数字中，如果没有的话？

PS 下面我给出了一个关于如何添加度量单位的答案，如果它们不是的话。但仍然对如何将字符串转换为数字感兴趣。
假设输出中的 10 + "px" 将给出字符串 "10px"，但你需要它是一个数字。

scss