ну на скриншоте это есть, да

Я хочу их быстро вставлять в код без прописывание @include

Слишком геморно это

ну вот вверху пример синтаксиса sass для создания и испоользования миксина

только то, что у тебя на скриншоте — скорее, наследование, а не миксины

ну вот вверху пример синтаксиса sass для создания и испоользования миксина

А как его прописывать? с плюса?

Нет. Когда я пишу @inclide block, у меня вставляются все свойства и значения

https://sass-scss.ru/guide/ изучи

https://sass-scss.ru/guide/ изучи

Изучал

не вижу

Не понимаю как

Сначала задаю название после «=»?

А зачем мне еще переменную в скобки кидать?

Ааа

Зачем все усложнять, если можно вот так вот для моих целей?) =red color: green div +red

про это я тебе и кидал

про это я тебе и кидал

Спасибо)

Спасибо (+1) для @nutcase принято! Текущая карма +24

Я просто хз зачем все это, если есть автопрефиксер)

это просто ПРИМЕР синтаксиса

Зачем все усложнять, если можно вот так вот для моих целей?) =red color: green div +red

звучит тор как. =красный. цвет: зеленый :)

звучит тор как. =красный. цвет: зеленый :)

Не везде нужна логика)

Зачем все усложнять, если можно вот так вот для моих целей?) =red color: green div +red

все верно. Миксины бывают как с аргументами так и без них. Просто задаешь миксин =some_mixin разные свойства и потом просто там где нужно вставить некоторые стили, которые ты добавил в миксин, вставляешь его как свойство .your-selector +some_mixin porp: val porp: val porp: val

если же тебе нужно делать какие-то блоки, но которые будут отличаться скажем цветом фона, то задаешь миксину аргумент

все верно. Миксины бывают как с аргументами так и без них. Просто задаешь миксин =some_mixin разные свойства и потом просто там где нужно вставить некоторые стили, которые ты добавил в миксин, вставляешь его как свойство .your-selector +some_mixin porp: val porp: val porp: val

Спасибо большое! Зачем тогда в документации расписывается, что миксины задаются так: @mixin block width:10px height: 10px

Спасибо (+1) для @GriNAME принято! Текущая карма +36

если же тебе нужно делать какие-то блоки, но которые будут отличаться скажем цветом фона, то задаешь миксину аргумент

Это как?) И почему бы просто не перенаследовать стили?)

Спасибо большое! Зачем тогда в документации расписывается, что миксины задаются так: @mixin block width:10px height: 10px

есть просто два способа создать и использовать миксин. Обычный и сокращенный

есть просто два способа создать и использовать миксин. Обычный и сокращенный

Убрать бы обычный способ и доков и не парить тупым новичкам как я мозги :)

Это как?) И почему бы просто не перенаследовать стили?)

потому что наследование это не так удобно. Вот пример: =button($color) bacground-color: $color prop: val prop: val это микси который оформляет твою кнопку и в скобках ты просто передаешь цвет, какого цвета она будет

так, просто напомню, что помимо вводного гайда на русском, на этом сайте есть и какая-никакая документация... тоже на русском :)

https://sass-scss.ru/documentation/

https://sass-scss.ru/documentation/miksini/argumenti.html Оно?

да

Пройдите этот тест от Google, чтобы узнать идеальное оформление для своего смартфона: https://goo.gl/wM3Usu

потому что наследование это не так удобно. Вот пример: =button($color) bacground-color: $color prop: val prop: val это микси который оформляет твою кнопку и в скобках ты просто передаешь цвет, какого цвета она будет

А как сделать, чтобы bgc у меня был всегда red, но потом я могу его заменить?)

``=button($color) bacground-color: red/$color prop: val prop: val`

ты хочешь поменять красный на другой, потом?

Что-то типа этого

задать аргументу занчение по умолчанию

ты хочешь поменять красный на другой, потом?

Ага

задать аргументу занчение по умолчанию

Как?)

а ну Гри уже ответил ☺️

=button($color: red)

=button($color: red)

Ааааа, спасибо большо, то, что нужно!!!)

Спасибо (+1) для @GriNAME принято! Текущая карма +37

и если в скобки аргумент не передавать, то тогда будет всегда красный

и если в скобки аргумент не передавать, то тогда будет всегда красный

Нашел

и если в скобки аргумент не передавать, то тогда будет всегда красный

И еще одно, как сделать так, чтобы не указывать в свойствах элемента первый аргумент? Чтобы считывался только второй.

Т е как править поочередность использования аргументов?)

никак

можно в миксин добавить условие =mixin($color: red, $shadow: value) @if $color == 0 $color: red prop: val prop: val

и тогда если над пропустить свойство, ставишь нолик

или то что определишь

Т е как править поочередность использования аргументов?)

ну можно написать свой препроцессор :)

Т е как править поочередность использования аргументов?)

никак, можно поставить запятую (не помню скомпилится ли, но вроде да)

можно в миксин добавить условие =mixin($color: red, $shadow: value) @if $color == 0 $color: red prop: val prop: val

Но тогда если я не буду включать потом аргументы, у меня не будет этого свойства

А если так пишу, то все ок div.button +block(0, 10px, red)

О, а если @else

Ого, а я ведь не умел им пользоваться

Как-то интуитивно понял)

=block($width: 100px, $height: 100px, $background: black) @if $width == 0 width: 100px @else width: $width height: $height background-color: $background

А если так пишу, то все ок div.button +block(0, 10px, red)

ну так я и говорю, что пропустить аргумент нельзя, можно просто придумать какой-то значек который будет вставлять свойство по умолчанию если тебе надо поменять второй аргумент

ERROR: S client not available

ну так я и говорю, что пропустить аргумент нельзя, можно просто придумать какой-то значек который будет вставлять свойство по умолчанию если тебе надо поменять второй аргумент

@else решило проблему))

=block($width: 100px, $height: 100px, $background: black) @if $width == 0 width: 100px @else width: $width @if $height == 0 height: 100px @else height: $height @if $background == 0 background-color: black @else background-color: $background

div.button +block(100px, 30px, red)

а раз у тебя ширина и высота одинаковые то объедини их

Теперь я могу быстро вставлять блоки) Круто)

а раз у тебя ширина и высота одинаковые то объедини их

Подскажи плиз как :)

Примерно понял, сейчас попробую

в if else?

=block($size: 100px, $background: black) height: $size width: $size другие свойства

это получается миксин квадрата, даешь размер и он задается для ширины и высоты

это получается миксин квадрата, даешь размер и он задается для ширины и высоты

Так?

@if $width == 0, $height == 0 width: 100px height: 100px @else width: $width height: $height

у тебя ширина и высота может быть разными?

=block($size: 100px, $background: black) height: $size width: $size другие свойства

Ну а если я буду задавать разную высоту или ширину?

у тебя ширина и высота может быть разными?

Иногда да

=block($size: 100px, $background: black) height: $size width: $size другие свойства

Тут не подходит их объеденить (вроде)

@if $width == 0, $height == 0 width: 100px height: 100px @else width: $width height: $height

Можно только тут

вообще миксины так не делают, когда есть аргумент для каждого свойства

для таких случаев не надо усложнять и просто писать свойства без миксинов

обычно у тебя несколько свойст и парочка из них может меньяться. Вот так да, миксин нужен. А для твоего примера проще писать свойства без миксинов

обычно у тебя несколько свойст и парочка из них может меньяться. Вот так да, миксин нужен. А для твоего примера проще писать свойства без миксинов

Блин, не работает… А как объеденять if? @if $width == 0, $height == 0

обычно у тебя несколько свойст и парочка из них может меньяться. Вот так да, миксин нужен. А для твоего примера проще писать свойства без миксинов

Запятая не помогает

там не запятые а or и and

там не запятые а or и and

http://stackoverflow.com/questions/17225229/using-multiple-conditions-and-in-sass-if-statement Уже нашел, но спасиб :)

Спасибо (+1) для @GriNAME принято! Текущая карма +38

там не запятые а or и and

Но тогда не работает прикол, если вставить 0 и будет изначальное значение

=block($width: 100px, $height: 100px, $background: black) @if $width == 0 width: 100px @else width: $width @if $height == 0 height: 100px @else height: $height @if $background == 0 background-color: black @else background-color: $background

Походу можно только так

else не обязательно вставлять там

Но тогда не работает прикол, если вставить 0 и будет изначальное значение

А, ну да, это ж логично

else не обязательно вставлять там

Тогда не будет работать(

будет, у меня же работает)