Comments (4)
I have the same issue.
from compass-mixins.
I don't know if this project is still active or abandoned? But I had the same problem as above, as I tried to port my Ruby-powered Compass over to this, while keeping some of my vertical rhythm code in the theme. By hacking over the _vertical_rhythm.scss code from my original Compass project into this, I got it working again. (and stopped that error message)
from compass-mixins.
I think it's not mainained. I use another stylus mixin lib for VR.
from compass-mixins.
/*
// Vertical Rhythm
// -------------------------------------------------- */
/* Variables
* -------------------------------------------
* Put your custom variables here. If you use bootstrap, use those
* and add your own for vertical rhythm
*/
$font-size-base = $base-font-size; //это из variables.styl
$line-height-base = $base-line-height; //это из variables.styl
/* TYPOGRAPHY BASE
* -------------------------------------------
* First, we establish a baseline to normalize typography.
* Credit: this BASE section is based on Twitter Bootstrap's type.less
* but with everything that isn't related to rhythm removed.
*/
/* Headings
* -------------------------------------------
* normalize baselines for headings, remove
* this block if you use Twitter Bootstrap
*/
h1, h2, h3, h4, h5, h6 {
margin: ($line-height-base / 2) 0;
line-height: $line-height-base;
small {
line-height: 1;
}
}
h1, h2 {
margin-top: $line-height-base;
margin-bottom: ($line-height-base / 2);
line-height: ($line-height-base * 2);
}
h3, h4, h5, h6 {
margin-top: ($line-height-base / 2);
margin-bottom: ($line-height-base / 2);
}
h1 { font-size: $font-size-base * 2.75; font-size: 4rem; } // ~38px
h2 { font-size: $font-size-base * 2.25; font-size: 3rem; } // ~32px
h3 { font-size: $font-size-base * 1.75; font-size: 2.5rem; } // ~24px
h4 { font-size: $font-size-base * 1.25; font-size: 2rem; } // ~18px
h5 { font-size: $font-size-base; font-size: 1.6rem; }
h6 { font-size: $font-size-base * 0.85; font-size: 1.2rem; } // ~12px
h1 small { font-size: $font-size-base * 1.75; } // ~24px
h2 small { font-size: $font-size-base * 1.25; } // ~18px
h3 small { font-size: $font-size-base; }
h4 small { font-size: $font-size-base; }
/* Lists
* -------------------------------------------
*/
// Unordered and Ordered lists
ul, ol {
padding: 0;
margin: 0 0 ($line-height-base / 2) 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
li {
line-height: $line-height-base;
}
// Description Lists
dl {
margin-bottom: $line-height-base;
}
dt, dd {
line-height: $line-height-base;
}
dd {
margin-left: ($line-height-base / 2);
}
// MISC
// ----
// Horizontal rules
hr {
margin: $line-height-base 0;
border: 0;
border-top: 1px solid $hr-border;
border-bottom: 1px solid #fff;
}
/* VERTICAL RHYTHM
* -------------------------------------------
* Add .rhythm to parent elements when you
* wish to apply vertical rhythm to child elements
*/
/* Body text & Misc
* -------------------------------------------
*/
.rhythm {
p, ul, ol, blockquote, address, pre, form {
margin-bottom: $line-height-base;
// And remove margin from last element
&:last-child {
margin-bottom: 0;
}
}
}
/* Headings & paragraphs
* -------------------------------------------
* Here we apply special spacing to certain
* typographical patterns. It is impossible to
* predict the patterns you require for your
* project, so this is only a starting point.
*/
.rhythm {
h1, h2, h3 {
margin-bottom: ($line-height-base / 4);
}
h1 + h2 {
margin-top: $line-height-base;
}
h4 {
margin-bottom: ($line-height-base / 6);
}
h1 + p,
p + h4 {
margin-top: ($line-height-base * 1.5);
}
h2 + h3,
h2 + h4 {
margin-top: $line-height-base;
}
h2 + p,
h3 + p {
margin-top: ($line-height-base / 2);
}
p + h2 {
margin-top: ($line-height-base * 3);
}
h3 + h4 {
margin-top: ($line-height-base * 2);
}
}
/* Lists
* -------------------------------------------
* Special classes for numbered, bulleted,
* and alpha lists.
*/
.rhythm {
//
h3 + ul.bullet-list,
h3 + ul.numbered-list,
h3 + ul.alpha-list,
h3 + ol.numbered-list {
margin-top: ($line-height-base / 2);
}
ul.bullet-list + h3,
ul.numbered-list + h3,
ul.alpha-list + h3 {
margin-top: ($line-height-base * 2);
}
h4 + ul.bullet-list,
h4 + ul.numbered-list,
h4 + ul.alpha-list,
h4 + ol.numbered-list {
margin-top: ($line-height-base / 2);
}
.bullet-list {
list-style-type: disc; // bullets
padding-left: 1.25em;
}
.numbered-list {
list-style-type: decimal; // numbers
padding-left: 1.5em;
}
.alpha-list {
list-style-type: lower-alpha; // letters
padding-left: 1.5em;
}
.bullet-list li,
.numbered-list li,
.alpha-list li {
margin-bottom: ($line-height-base / 2);
}
.condensed-list li {
margin-bottom: 0;
}
.flush-list li {
padding-left: 0;
}
}
/* Blockquotes
* -------------------------------------------
*/
.rhythm blockquote {
padding: $line-height-base $line-height-base 0;
}
from compass-mixins.
Related Issues (20)
- File to import not found or unreadable: compass HOT 1
- @elseif instead of @else if HOT 6
- mixins transition output compact function HOT 3
- font-face and font-files
- compass-mixins not translating background-image property correctly in browser
- Error while compiling with webpack HOT 1
- Undefined operation: times HOT 1
- Please publish v0.12.11 on npm HOT 1
- it throws a deprecation warning : Slash as Division
- it throws a deprecation warning : Slash as Division HOT 8
- Please publish v0.12.12 on npm HOT 4
- New release..? HOT 3
- Broken on node-sass@^3.5.0 HOT 34
- Invalid Sass HOT 4
- How to configurate sprites using compass-mixins? HOT 4
- Missing `rhythm-padding` mixin
- @background-image mixin not accepting value HOT 1
- Gradient has outdated direction syntax. HOT 3
- 1.0.2 version in maven central - missing files
- Bower update from "latest" returns older version (0.12.3) HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from compass-mixins.