mixin length-stay(arrival,departure,path)
div.length-stay
div.date-arrival
p #{arrival}
div.date-arrival__dropdown ДД.ММ.ГГГГ
img.img-row(src=path, alt="Стрелка")
div.date-departure
p #{departure}
div.date-departure__dropdown 19.08.2019
img.img-row(src=path, alt="Стрелка")
- var www= 'row_expand.png';
- var img_row= `../../../components/length-stay/${www}`;
...или так, если у вас с require
- var img_row= `require(../../../components/length-stay/${www})`
и дальше вызов
+length-stay("date Dropdown","date Dropdown",img_row)function grid(done){
smartGrid('path-to-your-folder', options);
done();
}exports.grid = grid
exports.pugToHtml = pugToHtml
exports.scripts = scripts
exports.styles = styles
exports.images = images
exports.deploy = deploy
exports.assets = series(scripts, pugToHtml, styles, images, grid)
exports.build = series(cleandist, scripts, styles, images, grid pugToHtml, buildcopy, buildhtml)
exports.default = series(scripts, styles, pugToHtml, images, grid, parallel(browsersync, startwatch))function styles() {
return src([`app/styles/${preprocessor}/*.*`, `!app/styles/${preprocessor}/_*.*`])
.pipe(eval(`${preprocessor}glob`)())
.pipe(eval(preprocessor)({'include css': true, use: axis()}))
.pipe(dest('app/css'))
.pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'], grid: true }))
.pipe(cleancss({ level: { 1: { specialComments: 0 } },/* format: 'beautify' */ }))
.pipe(rename({ suffix: ".min" }))
.pipe(dest('app/css'))
.pipe(browserSync.stream())
}
Но что делать, если элементов много?
Если есть такая потребность, то скорее всего ты что-то делаешь не так. Лучше попробуй подумать как обработать свой массив иначе.
mixin makeText(makeTextContent, h_title= "title", ...others)
if (makeTextElems && makeTextElems.hasOwnProperty('$div')) ? elDiv= makeTextElems.$div : elDiv= $$div || 'div'
if (makeTextElems && makeTextElems.hasOwnProperty('$h')) ? elH= makeTextElems.$h : elH= $$h ||'h3'
if (makeTextElems && makeTextElems.hasOwnProperty('$p')) ? elP= makeTextElems.$p : elP= $$p ||'p'
- className = makeTextClass || false
- attr_text = makeTextAttr || false
- var div_class = className.div || ''
- var h_class = className.h || ''
- var p_class = className.p || ''
- var attr_div= '' || attr_text.div
- var attr_h = '' || attr_text.h
- var attr_p = '' || attr_text.p
// класссы и атрибуты скрытых элементов
- var f_class = className.f || ''
- var s_class = className.s || ''
- var fo_class = className.fo || ''
- var fv_class = className.fv || ''
- var sx_class = className.sx || ''
- var sv_class = className.sv || ''
- var e_class = className.e || ''
- var n_class = className.n || ''
- var attr_f = '' || attr_text.f
- var attr_s = '' || attr_text.s
- var attr_fo = '' || attr_text.fo
- var attr_fv = '' || attr_text.fv
- var attr_sx = '' || attr_text.sx
- var attr_sv = '' || attr_text.sv
- var attr_e = '' || attr_text.e
- var attr_n = '' || attr_text.n
if makeTextContent
#{elDiv}&attributes(attr_div)(class= div_class || (block='block'))= makeTextContent.$div
ifmakeTextElems
#{$f= makeTextElems.$f || 'div'}&attributes(attr_f)(class= f_class || block +'__'+'f')
#{$s= makeTextElems.$s || 'div'}&attributes(attr_s)(class= s_class || block +'__'+'s')
#{$t= makeTextElems.$t || 'div'}&attributes(attr_t)(class= t_class || block +'__'+'t')
#{elH}&attributes(attr_h)(class= h_class || block +'__'+'title')= makeTextContent.$h
if makeTextElems
#{$fo= makeTextElems.$fo || 'div'}&attributes(attr_fo)(class= fo_class || block +'__'+'fo')
#{$fv= makeTextElems.$fv || 'div'}&attributes(attr_fv)(class= fv_class || block +'__'+'fv')
#{$sx= makeTextElems.$sx || 'div'}&attributes(attr_sx)(class= sx_class || block +'__'+'sx')
#{elP}&attributes(attr_p)(class= p_class || block +'__'+'text')= makeTextContent.$p
if makeTextElems
#{$sv= makeTextElems.$sv || 'div'}&attributes(attr_sv)(class= sv_class || block +'__'+'sv')
#{$e= makeTextElems.$e || 'div'}&attributes(attr_e)(class= e_class || block +'__'+'e')
#{$t= makeTextElems.$n || 'div'}&attributes(attr_n)(class= n_class || block +'__'+'n')
else
#{elDiv}&attributes(attr_div)(class= div_class || $divClass|| (block='block'))
if makeTextElems
#{$f= makeTextElems.$f || 'div'}&attributes(attr_f)(class= f_class || block +'__'+'f')= $fCC || ''
#{$s= makeTextElems.$s || 'div'}&attributes(attr_s)(class= s_class || block +'__'+'s')= $sCC || ''
#{$t= makeTextElems.$t || 'div'}&attributes(attr_t)(class= t_class || block +'__'+'t')= $tCC || ''
#{elH}&attributes(attr_h)(class= h_class || block +'__'+'title')= $title || h_title
if makeTextElems
#{$fo= makeTextElems.fo || 'div'}&attributes(attr_fo)(class= fo_class || block +'__'+'fo')= $foCC || ''
#{$fv= makeTextElems.fv || 'div'}&attributes(attr_fv)(class= fv_class || block +'__'+'fv')= $fvCC || ''
#{$sx= makeTextElems.sx || 'div'}&attributes(attr_sx)(class= sx_class || block +'__'+'sx')= $sxCC || ''
each other in others
#{elP}&attributes(attr_p)(class= p_class || block +'__'+'text')= $text || other
if makeTextElems
#{$pInF= makeTextElems.$pinf || 'span'}&attributes(attr_pinf)(class= pinf_class || block +'__'+'pinf')= $pinfCC || ''
#{$pInS= makeTextElems.$pins || 'span'}&attributes(attr_pins)(class= pins_class || block +'__'+'pins')= $pinsCC || ''
if makeTextElems
#{$sv= makeTextElems.$sv || 'div'}&attributes(attr_sv)(class= sv_class || block +'__'+'sv')= $svCC || ''
#{$e= makeTextElems.$e || 'div'}&attributes(attr_e)(class= e_class || block +'__'+'e')= $eCC || ''
#{$n= makeTextElems.$n || 'div'}&attributes(attr_n)(class= n_class || block +'__'+'n')= $nCC || ''
- makeTextElems= { $h: 'h3', $f: "span", $s}
- makeTextClass = { h: 'title'};
- makeTextAttr = {p: {data: 5}, div: {data: 6, class: 'new'} }вопрос не актуальный, потому что в готовом проекте пага нет.
h1 Hellow World<p>lorem...<p/>span = "1, 2, 3"
position: {x: -1; y: -2}
attach( уникальный номер строки)
...вот -- первый вариант
- var img_row= `../../../components/length-stay/${www}`
и все у вас будет работать -- вместо ${www} подставится 'row_expand.png'
путь будет
src="../../../components/length-stay/row_expand.png"
ведь вы этого результат ждете?