Adlandırılmış CSS kılavuz çizgileri SCSS ile

Question

codepen.io numaralı yeni CSS Grid Layout system ile deneme yapıyorum. Bu sütunlar ve satırlar arasındaki ızgara çizgileri için özel isimleri tanımlayan named grid lines10 adlı ilginç bir özelliği vardır. Maalesef, SCSS'nin [line-name] sözdizimini onaylamaması nedeniyle bu özelliği çalışma özelliği göremiyorum.

#container.named { 
    grid-template-columns: [main-start] 100px [content-start] 1fr [content-end] 100px [main-end]; // Will not pass SCSS validation :(

    .one { 
    grid-column: content-start/content-end; 
    } 
} 

yukarıdaki kod merkezinde eleman genişliğinin kalan dolduran bir kolon ile yan tarafında bulunan iki 100px sütunları olan bir CSS ızgara oluşturmak gerekir. Bu bölüm iyi çalışıyor. Sonra Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..."

mi söyleyerek, ızgara çizgileri özel isim vermek ve .one orta sütunda elemanı ama Codepen en SCSS önişlemci (yanı sıra denedim tüm diğer derleyiciler) her şeyi derlemeye reddeder yerleştirmeye çalışmalıdır SCSS'i, bu stili, ayrıştırmadan olduğu gibi (ya da bunu derleyen başka bir şekilde ifade etmeden) derlemeyi zorlamak için bir yol var mı yoksa denememi normal CSS ile yeniden yazmak zorunda mıyım?

Answer 1

dizeye CSS hattı bütün koyarak deneyin:

$gridTplCols: "[main-start] 100px [content-start] 1fr [content-end] 100px [main-end]"; 

grid-template-columns: #{$gridTplCols};