Sass variables
There are variables we use in our Sass stylesheets to make sure things like color and spacing are consistent throughout the stylesheet. Variables make it so you don’t have to repeat the same HEX or pixel value over and over, which cuts down on development time and leaves less room for human error. Variables are essentially the same as mixins but include single values instead of chunks of code.
Variables are designated by a $ before the variable name. Learn how to use Sass variables.
Stylesheet location: /_source/styles/base/_variables.scss
Jump to a component:
Borders, border-radius, and box-shadow
Many components on the pcc.edu website have rounded corners and shadows. If you use these elements in inline styles, use the corresponding values below.
$border-width: 0.125rem // 2px$border-radius: 0.25rem // 4px$box-shadow: 0.1875rem // 3px
Breakpoints
The layout and design of the website change based on the screen size. The widths where these changes happen are below:
- Extra small
$x-small-max: 20em; // 320px
- Small
$small-min: 20.0625em; // 321px$small-max: 39.9375em; // 639px
- Medium
$medium-min: 40em; // 640px$medium-max: 63.9375em; // 1023px
- Large
$large-min: 64em; // 1024px$large-max: 74.9375em; // 1199px
- Extra large
$xlarge-min: 75em; // 1200px
Color
For more information, see the color page. These variables are only used in Sass files. Use their HEX equivalents in any inline styles – don’t invent your own colors or HEX values.
For a full list of color variables (many use the main color variables, such as $link:$dark-teal;), see the variables partial stylesheet at /_source/styles/base/_variables.scss.
Text size
The custom Sass em() function calculates text sizes using the $text-base variable. $text-base is equal to 16px and em($text-base) is equal to 1em. See a full explanation of how to use this function and variable at the top of the typography basics page under “development info”.
em($text-base) = 1em
Transition time
Some components on the website have subtle animations. Use the variable to keep timing consistent (0.2s).
$transition-time: 0.2s;