grapesjs/docs/api/css_rule.md

getAtRule

Return the at-rule statement when exists, eg. '@media (...)', '@keyframes'

Examples

const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)'
});
cssRule.getAtRule(); // "@media (min-width: 500px)"

Returns String

selectorsToString

Return selectors of the rule as a string

Parameters

• opts Object? Options (optional, default {})

  • opts.skipState Boolean? Skip state from the result

Examples

const cssRule = editor.Css.setRule('.class1:hover', { color: 'red' });
cssRule.selectorsToString(); // ".class1:hover"
cssRule.selectorsToString({ skipState: true }); // ".class1"

Returns String

getDeclaration

Get declaration block (without the at-rule statement)

Parameters

• opts Object Options (same as in selectorsToString) (optional, default {})

Examples

const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)'
});
cssRule.getDeclaration() // ".class1{color:red;}"

Returns String

toCSS

Return the CSS string of the rule

Parameters

• opts Object Options (same as in getDeclaration) (optional, default {})

Examples

const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
 atRuleType: 'media',
 atRuleParams: '(min-width: 500px)'
});
cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}"

Returns String CSS string