SCSS: Отправить атрибут и значение для функции

Примечание:SCSS: Отправить атрибут и значение для функции

Я новичок в веб-разработке и объектно-ориентированном программировании. Я новичок в SCSS и еще не понял прочного понимания синтаксиса. У меня есть общее представление о том, как использовать functions in SCSS.

Позвольте мне начать с определения результата, которого я хочу достичь.

_body.scss

body { 

    background-color: red; 

}

Теперь я знаю, что если бы я хотел, чтобы получить этот результат Javascript я мог бы:

Вариант 1: написать строку HTML-кода и заменить существующий HTML тэг.

Не собираюсь кодировать это, поскольку это грязный способ записи Javascript, но по существу используя метод document.write().

Вариант 2: использовать «SetAttribute()» метод

// assuming <head> and <body> are the only tags within <html> 

var bodyTag = document.firstElementChild.lastElementChild; 

bodyTag.setAttribute("bgcolor", "red");

Я знаю, что есть дополнительные способы сделать это в Javascript, но для этого примера, я остановлюсь на этих двух.

Поэтому я хочу создать функцию SCSS, которая может возвращать как атрибут, так и значение.

_body.scss (псевдокод пример строки)

@function makeAttribute($attribute, $value) 

{ 

    @return $attribute + ":" + $value + ";"; 

} 

body { 

    makeAttribute(background-color, red); 

}

Я до сих пор найти встроенную функцию, которая решает эту проблему (по аналогии с «SetAttribute()» метод в JavaScript), или на примере строки выше ,

Я знаю, что функции могут принимать: число, строка, bool, цвет, список, карта или нуль; но я не знаю, является ли атрибут подходящим для любого из этих типов значений (например: строка).

Мне кажется, что статья: Bringing Configuration Objects To Sass может объяснить, что я пытаюсь сделать, но мне трудно понять эту статью (так что это может быть не объяснение для решения).

Моя конечная цель - создать функцию, которая будет писать следующий css. Раньше я не упоминал о поддержке браузера, поскольку он добавляет еще один уровень сложности, который может быть или не быть легко объяснен.

body { 

    background-color: red; 

    -o-background-color: red; 

    -ms-background-color: red; 

    -moz-background-color: red; 

    -webkit-background-color: red; 

}

источник

2016-05-28 Josh Balsillie

Вы вводите в заблуждение CSS, Javascript и HTML - они очень разные языки, а функции setAttribute не имеют большого смысла в CSS, так как «background: red;» _is по существу setAttribute_. Не пытайтесь перевести свой CSS с Javascript или даже наоборот - все будет запутываться быстро. – somethinghere

Да, я просто приводил примеры Javascript и HTML. Я никоим образом не предлагал взять код с одного языка и поместить его в другой. Я пытаюсь выяснить, имеет ли SASS/SCSS либо встроенные методы/функции, либо способ записи пользовательской функции для получения желаемого результата. –

Хорошо, вот хорошая стартовая статья: http://thesassway.com/advanced/pure-sass-functions - и я поддержал ответ ниже, поскольку он также объясняет предпосылку. – somethinghere

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

// Option 1 

@mixin makeRule($value: red, $property: background-color) { 
    #{$property}: $value; 
} 

// Option 2: 

@mixin makeRuleWithPrefixes($value: red, $property: background-color) { 
    #{-ms- + $property}: $value; 
    #{-o- + $property}: $value; 
    #{-moz- + $property}: $value; 
    #{-webkit- + $property}: $value; 
    #{$property}: $value; 
} 


///////// 

body { 
    @include makeRule; 
} 

article { 
    @include makeRule(black); 
} 

p { 
    @include makeRule(2px solid blue, border) 
} 


span { 
    @include makeRuleWithPrefixes; 
}

я изменил название, потому что это не имеет права сказать - makeAttribute, когда вы создаете cssRule (селектор + свойство имя + значение свойства), а это до вас;)

оК первым, you need interpolation to use a variable as a property name. Значение является первым аргументом, так что теперь вы можете использовать свойство по умолчанию, а просто передать различные значения (как в статье :))

или теперь вы можете установить все свойства, которые вы хотите это, просто передать имущество в качестве второго значения (например, р)

body { 
    background-color: red; 
} 

article { 
    background-color: black; 
} 

p { 
    border: 2px solid blue; 
} 

span { 
    -ms-background-color: red; 
    -o-background-color: red; 
    -moz-background-color: red; 
    -webkit-background-color: red; 
    background-color: red; 
}

Я сделал второй вариант, потому что вы спросите его, но я предупреждаю вас, это не хороший подход. Вы можете использовать инструмент построения (webpack, gulp, grunt .. whatever), чем использовать пакет autoprefixer, который делает этот префикс автоматически, таким образом, это боль, потому что вы должны в конечном итоге обновить @mixin.

источник

2016-05-30 08:09:32

Это именно то, что я искал. Просто еще не нашел синтаксис # {}. Документация: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_ Спасибо, Эктор Леон. –

рад помочь вам, продолжайте кодирование;) –

SCSS: Отправить атрибут и значение для функции

ответ

Смежные вопросы