Как понять и пользоваться этим миксином?

Question

[lavezzi1]

Здравствуйте. Объясните как пользоваться

@media (min-width: $media-screen-lg)
		if $media-enable-debug
			body:before
				content 'min-width: $media-screen-lg'

Что в самом сss указывать?

Answer 1

[Nash]

Все просто, у вас есть переменная $media-screen-lg, которая должна быть примерно 1170px ну или как вам удобнее. Есть также переменная $media-enable-debug, которая отвечает за вывод значения текущей переменной перед body.

Создайте эти две переменные, можете даже в файле с миксином, если по другому не знаете как, и увидите что получится.

Comments

[lavezzi1]

Спасибо это понятно. Не понятно как в практике пользовать?
.section_block {
width: 500px;
media (min-width: $media-screen-lg) {
width: 1000px;
}
}

так?

[Nash]

миксин у вас должен иметь название, например mq() и принимать два параметра $media-screen-lg и $media-enable-debug, то есть вы получите

.your-css-prop
mq(prop1, prop2)

а затем он сгенерирует css код

[Nash]

посмотрел внимательнее - то что у вас в заголовке - не миксин, а просто кусок кода из проекта, чтобы быть миксином его надо определить как миксин https://learnboost.github.io/stylus/docs/mixins.html

[Nash]

в целом вы верно описали практический пример, да, вот так
.css-selector
media (max-width: $media-screen-lg)
width: 1000px

[Nash]

табуляция съехала