Question

我有以下课程：

h-10
h-100
h-170
h-380

是否有一个sass函数可以看到“ h-”，然后获取值，然后执行某些操作？

我希望在容器中增加高度。我们的CMS（AEM）可让我根据下拉值写出类。

Answer 1

我认为//create dt by reading xml string var xmlString = '<DataTables xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="file://C:/FRM/xsd/DataTables.xsd" ><Table name="dt_EdgeCaseHome"><Header><Column name="Username" type="String" /><Column name="Email" type="String" /><Column name="Password" type="String" /></Header><Row><Value>brian</Value><Value>brianf@edge.com</Value><Value>qwerty</Value></Row></Table><Table name="dt_EdgeCaseSpectrum"><Header><Column name="AppHeader" type="String" /><Column name="UserID" type="String" /><Column name="Service" type="String" /><Column name="Clients" type="String" /></Header><Row><Value>Contract</Value><Value>47</Value><Value>Agent</Value><Value>Exodus</Value></Row><Row><Value>Contract</Value><Value>49</Value><Value>Agent</Value><Value>Prometheus</Value></Row></Table></DataTables>', xml, // Create table element table = document.createElement('table'); table.style.width = '100%'; table.setAttribute('border', '1'); tbdy = document.createElement('tbody'); tr = tbdy.insertRow(); tr.id='header'; // Parse the xml if (window.DOMParser){ // Standard browsers var parser = new DOMParser(); xml = parser.parseFromString(xmlString, "text/xml"); } else { // Internet Explorer xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.loadXML(xmlString); } var tables = xml.getElementsByTagName("Table"); // for each table for(var t=0; t<tables.length; t++){ tableName = tables[t].getAttribute("name"); console.log(tableName); var dtName="dt_EdgeCaseSpectrum"; if(dtName.match(tableName)){ // for each table header var headers = tables[t].getElementsByTagName("Header"); var cols = headers[0].childNodes; for(var c=0;c<cols.length;c++){ columnName = cols[c].getAttribute("name"); td = tr.insertCell(); td.id=c; td.setAttribute('name',columnName); td.textContent = columnName; console.log(columnName); } var th = tr.insertCell(); th.id = 'selection'; th.textContent = 'Select'; // for each table row var rows = tables[t].getElementsByTagName("Row"); for(var r=0;r<rows.length;r++){ console.log("row "+r); tr = tbdy.insertRow(); tr.id='iteration_'+r; var vals = rows[r].childNodes; for(var x=0;x<vals.length;x++){ value = vals[x].textContent; console.log(value); td = tr.insertCell(); td.id=x; td.setAttribute('value', value) td.textContent = value; } var select = tr.insertCell(); var checkbox = document.createElement("input"); checkbox.setAttribute('type', 'checkbox'); checkbox.setAttribute('name', tr.id); select.appendChild(checkbox); } tbdy.appendChild(tr); table.appendChild(tbdy); // Append table to the body document.body.appendChild(table); } }应该可以满足您的需求。像这样：

str-slice($string, $start-at, [$end-at])

现在您应该可以像这样使用mixin了：

/* Pass in your classes */ @mixin containerHeights($classes) { /* Loop over each one */ @each $class in $classes { /* Grab everything starting at the 3rd character $height: str-slice($class, 3); /* build your classes from the list */ .#{$class} { height: #{$height}px; } } }

编译结果如下：

@include containerHeights(h-10 h-100 h-170 h-380);

Answer 2

您可以使用list和each directive。

$sizes: 10, 100, 170, 380;

@each $size in $sizes {
  .h-#{$size} {
    height: ($size * 1px);
  }
}

输出

.h-10 {
  height: 10px;
}

.h-100 {
  height: 100px;
}

.h-170 {
  height: 170px;
}

.h-380 {
  height: 380px;
}

Sass函数从类中获取值

2 个答案: