There are three ways to use common variables in Sass. Here are some examples.
$var: value
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| @import "sass-maps-plus"; | |
| $general-spacing: ( | |
| vertical: ( | |
| floor: 0, | |
| median: 6px, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| $colors: ( | |
| black: rgb(45, 45, 45), | |
| yellow: rgb(247, 214, 25) | |
| ) !default; | |
| $black: rgb(45, 45, 45) !default; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // 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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // 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 |
blackfalcon
/ better-sass-variables.md
Last active
September 16, 2015 18:28
How to better make use of variables in your Sass
blackfalcon
/ countCSSRules.js
Last active
August 29, 2015 14:27
— forked from psebborn/countCSSRules.js
Count the number of rules and selectors for CSS files on the page. Flags up the >4096 threshold that confuses IE
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) { |
blackfalcon
/ SassMeister-input-HTML.haml
Last active
February 28, 2016 00:36
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .standard | |
| %ul | |
| %li.xsmall | |
| xsmall 12px | |
| %li.small | |
| small 14px | |
| %li | |
| medium 16px | |
| %li.large | |
| large 18px |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.2.4) | |
| // ---- | |
| @import "sass-list-maps"; | |
| $carousel: ( | |
| color ( | |
| header ( | |
| border gray, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.13) | |
| // Compass (v1.0.3) | |
| // ---- | |
| .parent { | |
| width: 100%; | |
| @at-root .child#{&} { | |
| width: 50%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |