There are three ways to use common variables in Sass. Here are some examples.
$var: value
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
@import "sass-maps-plus"; | |
$general-spacing: ( | |
vertical: ( | |
floor: 0, | |
median: 6px, |
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
$colors: ( | |
black: rgb(45, 45, 45), | |
yellow: rgb(247, 214, 25) | |
) !default; | |
$black: rgb(45, 45, 45) !default; |
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
@import "bourbon/bourbon"; | |
@mixin reset-bourbon-prefix-vars { | |
@if type-of-value($prefix-for-webkit) { | |
$prefix-for-webkit: false !global; | |
$prefix-for-mozilla: false !global; |
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
// Global variables | |
$body-type-size: xxsmall 8px, xsmall 10px, small 12px, medium 14px, large 16px, xlarge 18px, xxlarge 20px !default; | |
$title-type-size: xsmall 12px, small 14px, medium 16px, large 18px, xlarge 20px, xxlarge 24px, xxxlarge 28px, xxxxlarge 32px, xxxxxlarge 36px !default; | |
// Utility functions |
function countCSSRules() { | |
var results = '', | |
log = ''; | |
if (!document.styleSheets) { | |
return; | |
} | |
for (var i = 0; i < document.styleSheets.length; i++) { | |
countSheet(document.styleSheets[i]); | |
} | |
function countSheet(sheet) { |
.standard | |
%ul | |
%li.xsmall | |
xsmall 12px | |
%li.small | |
small 14px | |
%li | |
medium 16px | |
%li.large | |
large 18px |
// ---- | |
// libsass (v3.2.4) | |
// ---- | |
@import "sass-list-maps"; | |
$carousel: ( | |
color ( | |
header ( | |
border gray, |
// ---- | |
// Sass (v3.4.13) | |
// Compass (v1.0.3) | |
// ---- | |
.parent { | |
width: 100%; | |
@at-root .child#{&} { | |
width: 50%; | |
} |
<div class="content-block-alpha"> | |
<div class="content-cell"> | |
Words words words words words words | |
</div> | |
<div class="content-cell"> | |
Words words words words words words words words words words words words words words words words words words words words words words words words words words words words | |
</div> | |
<div class="content-cell"> | |
Words words words words words words words words words words words words words words words | |
</div> |