Digital Marketplace uses the SCSS of Sass.
Support for older versions of Internet Explorer is made possible by the use of the mixins in _conditionals.scss.
@include ie(8) {
/* Block of IE8-specific SCSS */
}
This works by using the sass-ie method which generates a separate stylesheet for each version of Internet Explorer that you need to target. Currently IE8 is the only version of Internet Explorer that we both support and requires targeting.
An example of this can be seen on the
forms/summary.html
page. In gh-pages/data/forms/summary.yml you
can see that forms/index.css
has a variant for IE8. The links to the
stylesheets are wrapped in conditional comments to ensure that:
- each version of Internet Explorer only gets its variant
- other browsers don't request the Internet-Explorer-specific stylesheets
The SCSS file for IE8 just includes forms/index.scss
while setting a
few variables. The mixins from _conditionals.scss
use these variables
to determine whether or not to insert the block of browser-specific CSS.
$is-ie: true;
$ie-version: 8;
@import "index.scss";
The naming of classes and ids normally follows one of these patterns:
For example .question
.
Thing | Type |
---|---|
.button | save |
For example .button-save
.
All types should be built using @extend to extend a placeholder tied to the block for the base 'Thing'. This block appears in the final CSS but with a selector built from those of all types.
For example:
%summary-item-field {
white-space: nowrap;
vertical-align: middle;
text-align: left;
}
.summary-item-field-name {
@extend %summary-item-field;
width: 50%;
padding-right: 25px;
}
In cases where the placeholder block is used in more than one file it should be kept in the shared_placeholders
folder.
Thing | Type |
---|---|
.page-heading | no-breadcrumb |
For example .page-heading-no-breadcrumb
.
Variations should use @extend to extend the base class (which will appear as a class in the final CSS).
.question,
%question {
margin: 15px 0 0 0;
clear: both;
}
.question-first {
@extend %question;
margin-top: 0;
}
Thing | Type |
---|---|
.question | heading |
For example .question-heading
.