Delete-key friendly SCSS boilerplate.
- Install the package.
npm install @odopod/odo-sassplate --save
styles.scssto your scss directory in your project (probably somewhere like
- Change all the
@imports to reference the files in
node_modules, similar to how
- Install the node-sass-json-importer and integrate it into your build.
npm install node-sass-json-importer --save-dev
At this point, you should be able to compile your SCSS without any issues.
- You will want your own project variables, typography, and ui components, so copy
extensions/component-definitions.jsoninto your source CSS.
- Copy the
_imports.scssfile from Sassplate into your source CSS.
- Edit your new
_imports.scssto make sure the
@importpaths are correct.
- Update the path for
_imports.scssin your new
styles.scssto reference the new file.
- Make a change in one of the
.jsonfiles and recompile your CSS. You should see the change.
To make changes to styles from the Sassplate, you can add styles which override the existing ones, or replace the
.scss file with your own copy.
All variables in
extensions/_variables.scss are declared with
!default, meaning it will assign the variable if it is not already assigned. This allows you to overwrite the variables without duplicating the file.
Sassplate adds mixins as well. For details and method signatures, check out
_mixins.scss. Here's a list of them:
Writing CSS with JSON
The basic structure for each json file looks like this:
The above JSON would generate the following CSS:
Some properties are treated differently than others.
Properties which expect a length (like
padding-top, etc.) will append
px if the unit is left off.
Properties which expect a color (like
border-color, etc.) will use the
get-color function to find the color you have defined in
active states, supply a new object with those styles:
To display a demo of your component in Odo Style Guide, use the
Other boolean options you may add to
To style the selector at breakpoints, add the
Target children of the current selector with
children. Notice the selector is wrapped in single quotes so that it remains a valid string when converted to SCSS.
Qualifiers are for overriding properties based on a class on the element.
Modifiers are variants of a class, with only a few attributes that are different. For example, a
.btn with an icon in it might need styles applied to the icon within it.
Allow any selector to be appended to the main selector.
Visit the Odo component directory for demos, code examples, and documentation.