Sass - 类名称通配符

Question

是否可以使用通配符类名称？

例如我有几个div .div-one，.div-two，.div-three等 有没有办法让我在sass中使用下面的方法来选择具有该名称的所有div，或者最好只提供一个涵盖所有和独特类的类？

.div-*{}

Answer 1

在CSS中，您可以将属性选择器与^：

一起使用

div[class^="div-"] ==＆gt;选择所有div，其class属性值以“div - ”

开头

示例：

div {
  height: 20px;
  margin-bottom: 5px;
  border: 1px solid black;
}

div[class^="div-"] {
  border-color: red;
}

<div class="div-one"></div>
<div class="div-two"></div>
<div class="other"></div>
<div class="div-three"></div>

<强>更新

正如@FreePender所说，如果class不是第一个不起作用，另一个解决方案是使用带有*的属性选择器：

div[class^="div-"] ==＆gt;选择div个class属性值包含“div - ”的所有class。

这样也可以选择名为nodiv-one的{​​{1}}，但这不是正常情况下发生的事情。

div {
  height: 20px;
  margin-bottom: 5px;
  border: 1px solid black;
}

div[class*="div-"] {
  border-color: red;
}

<div class="div-one"></div>
<div class="div-two"></div>
<div class="other"></div>
<div class="myclass div-three"></div>

Answer 2

您可以使用此方法。创建一个mixin：

@mixin myDIV($name, $color, $color-hover) {
    .div-#{$name} {
        a {
            color: #{$color};
            &:focus, &:hover {
                color: #{$color-hover};
            }
        }
    }
}

用法：

@include myDIV('one', $blue, $blue-hover);
@include myDIV('two', $green, $green-hover);
@include myDIV('three', $red, $red-hover);

您可以更改变量（$ blue）和css属性以适合您的样式。

Answer 3

要点很小，但我注意到在将此规则嵌套在Sass中时，需要将“＆”号放在右方括号中。

这不起作用：

var payload,
  battery,
  mode,
  humidity,
  temperature,
  light,
  door,
  vibration,
  magnet,
  alert,
  eventCount,
  firmwareVersion,
  parsedData = [],
  obj = {};

// Byte #0
var byte = parseInt(payload.slice(0, 2), 16).toString(2);
while (byte.length < 8)
  byte = '0' + byte;
battery = ((parseInt(byte.slice(0, 5), 2) * 0.05) + 2.7);
if (battery >= 4.15) {
    battery = 100;
} else if (battery >= 3.8 && battery < 4.15) {
    battery = Math.round((battery - 3.275) * 114);
} else if (battery >= 3.6 && battery < 3.8) {
    battery = Math.round((battery - 3.56) * 250);
} else if (battery > 3 && battery < 3.6) {
    battery = Math.round((battery - 3) * 16);
}
battery = battery < 0 ? 0 : battery;

// Byte #1
var byte = parseInt(payload.slice(2, 4), 16).toString(2);
while (byte.length < 8)
  byte = '0' + byte;

mode = parseInt(byte.slice(0, 5), 2);
switch (mode) {
  case 0:
    mode = 'Standby';
    break;
  case 1:
    mode = 'Temperature & Humidity';
    break;
  case 2:
    mode = 'Light';
    break;
  case 3:
    mode = 'Door';
    break;
  case 4:
    mode = 'Vibration';
    break;
  case 5:
    mode = 'Magnet';
    break;
  default:
    mode = 'Unknown mode {' + mode + '}';
}

alert = Boolean(parseInt(byte.slice(5, 6), 2));


// Standby mode
if (mode === 'Standby') {
  // Byte #2
  var byte = parseInt(payload.slice(4, 6), 16).toString(2);
  while (byte.length < 8)
    byte = '0' + byte;
  firmwareVersion = byte;
  // Byte #3
  var byte = parseInt(payload.slice(6, 8), 16).toString(2);
  while (byte.length < 8)
    byte = '0' + byte;
  firmwareVersion += byte;

  firmwareVersion = parseInt(firmwareVersion.slice(0, 4), 2) + '.' + parseInt(firmwareVersion.slice(4, 10), 2) + '.' + parseInt(firmwareVersion.slice(10, 16), 2);
}

// Temperature & Humidity
if (mode === 'Temperature & Humidity') {
  // Byte #1
  var byte = parseInt(payload.slice(2, 4), 16).toString(2);
  while (byte.length < 8)
    byte = '0' + byte;
  temperature = byte.slice(6, 8);
  // Byte #2
  var byte = parseInt(payload.slice(4, 6), 16).toString(2);
  while (byte.length < 8)
    byte = '0' + byte;
  temperature += byte;

  temperature = ((parseInt(temperature, 2) - 200) / 8).toFixed(2);
  // Byte #3
  humidity = parseInt(payload.slice(6, 8), 16) * 0.5;
}


// Light
if (mode === 'Light') {
  // Byte #2
  var byte = parseInt(payload.slice(4, 6), 16).toString(2);
  while (byte.length < 8)
    byte = '0' + byte;
  light = byte;
  // Byte #3
  var byte = parseInt(payload.slice(6, 8), 16).toString(2);
  while (byte.length < 8)
    byte = '0' + byte;
  light += byte;

  light = (parseInt(light, 2) / 96).toFixed(2);
}



// Door
if (mode === 'Door') {
  // Byte #1
  var byte = parseInt(payload.slice(2, 4), 16).toString(2);
  while (byte.length < 8)
    byte = '0' + byte;
  door = parseInt(byte.slice(6, 8), 2);
  switch (door) {
    case 0:
      door = 'The calibration of the Door mode has not been done';
      break;
    case 1:
      door = 'Unused value';
      break;
    case 2:
      door = 'Door is closed';
      break;
    case 3:
      door = 'Door is open';
      break;
    default:
      door = 'Unknown door status {' + door + '}';
  }
}


// Vibration
if (mode === 'Vibration') {
  // Byte #1
  var byte = parseInt(payload.slice(2, 4), 16).toString(2);
  while (byte.length < 8)
    byte = '0' + byte;
  vibration = parseInt(byte.slice(6, 8), 2);
  switch (vibration) {
    case 0:
      vibration = 'No vibration detected';
      break;
    case 1:
      vibration = 'A vibration is detected';
      break;
    case 2:
      vibration = 'Unused value';
      break;
    case 3:
      vibration = 'Unused value';
      break;
    default:
      vibration = 'Unknown vibration status {' + vibration + '}';
  }
}


// Magnet
if (mode === 'Magnet') {
  // Byte #1
  var byte = parseInt(payload.slice(2, 4), 16).toString(2);
  while (byte.length < 8)
    byte = '0' + byte;
  magnet = parseInt(byte.slice(6, 8), 2);
  switch (magnet) {
    case 0:
      magnet = 'No magnet detected';
      break;
    case 1:
      magnet = 'A magnet is detected';
      break;
    case 2:
      magnet = 'Unused value';
      break;
    case 3:
      magnet = 'Unused value';
      break;
    default:
      magnet = 'Unknown magnet status {' + magnet + '}';
  }
}


// Event count (Door - Vibration - Magnet)
if (mode === 'Door' || mode === 'Vibration' || mode === 'Magnet') {
  // Byte #2
  var byte = parseInt(payload.slice(4, 6), 16).toString(2);
  while (byte.length < 8)
    byte = '0' + byte;
  eventCount = byte;
  // Byte #3
  var byte = parseInt(payload.slice(6, 8), 16).toString(2);
  while (byte.length < 8)
    byte = '0' + byte;
  eventCount += byte;
  eventCount = parseInt(eventCount, 2);
}



// Store objects in parsedData array
obj = {};
obj.key = 'mode';
obj.value = mode;
obj.type = 'string';
obj.unit = '';
parsedData.push(obj);
obj = {};
obj.key = 'firmwareVersion';
obj.value = firmwareVersion;
obj.type = 'string';
obj.unit = '';
parsedData.push(obj);
obj = {};
obj.key = 'temperature';
obj.value = temperature;
obj.type = 'number';
obj.unit = '°C';
parsedData.push(obj);
obj = {};
obj.key = 'humidity';
obj.value = humidity;
obj.type = 'number';
obj.unit = '%';
parsedData.push(obj);
obj = {};
obj.key = 'light';
obj.value = light;
obj.type = 'number';
obj.unit = 'lux';
parsedData.push(obj);
obj = {};
obj.key = 'alert';
obj.value = alert;
obj.type = 'boolean';
obj.unit = '';
parsedData.push(obj);
obj = {};
obj.key = 'door';
obj.value = door;
obj.type = 'string';
obj.unit = '';
parsedData.push(obj);
obj = {};
obj.key = 'vibration';
obj.value = vibration;
obj.type = 'string';
obj.unit = '';
parsedData.push(obj);
obj = {};
obj.key = 'magnet';
obj.value = magnet;
obj.type = 'string';
obj.unit = '';
parsedData.push(obj);
obj = {};
obj.key = 'eventCount';
obj.value = eventCount;
obj.type = 'number';
obj.unit = '';
parsedData.push(obj);
obj = {};
obj.key = 'battery';
obj.value = battery;
obj.type = 'number';
obj.unit = '%';
parsedData.push(obj);

//console.log(parsedData);
return parsedData;

但是这样做：

.zoomed {
  & [class*=" aspect-"] {
    margin-bottom: $spacer * 4.0;
  }
}

请注意“＆”号的位置。

Answer 4

理论上接受的答案很酷，但是截至今天的最新版Chrome：

对于CSS规则：

[class^="div-"]

标记

class="div-something other-class"

匹配，而：

class="other-class div-something"

不符合

_（ツ）_ /¯