Using:
susy (2.0.0.alpha.6)
sass (3.3.0.rc.2)
compass (1.0.0.alpha.17)
with the following SCSS:
$susy: (
columns: 12,
column-width: 5em,
gutter-width: 1em,
gutter-position: after,
grid-padding: gutter-width,
);
$small: 36em;
$medium: 50em;
$large: 65em;
.hlt-container{
#include at-breakpoint($small) {
#include span(6);
#include nth-omega(2n);
margin-bottom: gutter(12);
}
#include at-breakpoint($small $large) {
&:last-child:nth-child(odd){
float: none;
clear: both;
margin-right: auto;
margin-left: auto;
}
}
#include at-breakpoint($large) {
#include span(4);
#include remove-nth-omega(2n,12);
#include nth-omega(3n);
margin-bottom: 0;
}
}
I first get the error:
error source/scss/style.scss (Line 10 of source/scss/01-molecules/02-blocks/_00-highlight-block.scss: Undefined mixin 'at-breakpoint'.)
If I remove the at-breakpoint styles, It moves on and chokes again on remove-nth-omega:
error source/scss/style.scss (Line 26 of source/scss/01-molecules/02-blocks/_00-highlight-block.scss: Undefined mixin 'remove-nth-omega'.)
I've searched through docs and Googled everything I could think of, but can't seem to find issues, like perhaps at-breakpoint and remove-nth-omega being deprecated with Susy Next.
EDIT:
If I change back to
compass (0.12.2)
sass (3.2.12)
susy (1.0.9)
(thank goodness for RVM & gemsets)
and revert the .scss to reflect older Susy syntax:
$columns: 12;
$column-width: 5em;
$gutter-width: 1em;
$gutter-position: after;
$grid-padding: $gutter-width;
$small: 36em;
$medium: 50em;
$large: 65em;
.hlt-container{
#include at-breakpoint($small) {
#include span-columns(6,12);
#include nth-omega(2n);
margin-bottom: gutter(12);
}
#include at-breakpoint($small $large) {
&:last-child:nth-child(odd){
float: none;
clear: both;
margin-right: auto;
margin-left: auto;
}
}
#include at-breakpoint($large) {
#include span-columns(4,12);
#include remove-nth-omega(2n);
#include nth-omega(3n);
margin-bottom: 0;
}
}
everything works fine.
if you want to use the old susy syntax then write:
// With Susy 2 installed...
#import "susyone";
instead of
// With Susy 2 installed...
#import "susy";
I had this same problem with at-breakpoint and once I switched over it was fine. > susy documentation
Yes, both of those mixins are being deprecated in Susy 2.0, so neither is available in alpha. We haven't built a clean upgrade path yet, but I promise there's one on the way.
Related
Is there any way to import the content of a scss file into another scss file using mixins?
Something like this:
// media.scss
#mixin media($width, $url) {
#media (min-width:$width) {
#import url($url);
}
};
#mixin small($url) {
#include media(576, $url);
};
//main.scss
#import '../../styles/media.scss';
#include small('./styles/small.scss');
.menu {
height: 4rem;
border-bottom-left-radius: 10px;
background-color: #202020;
}
//small.scss
.menu {
background-color: aqua;
}
In order to use a #mixin in SCSS, you have to use #include in the class selector in which you prefer to include those changes or those style rules.
For example,
.menu {
height: 4rem;
border-bottom-left-radius: 10px;
background-color: #202020;
#include small($url)
// #include (name of mixin)(arguments)
}
or
.menu {
background-color: aqua;
#include small($url)
}
It depends on the class selector you want to use the mixin with. The
$url will be the actual value in this case.
Usually, it is better practice to create a seperate partial file which will include all mixins you have created. These are named with an underscore in the beginning.
For example, a partial _media.scss file can be imported in the main.scss file as #import './media.scss'; or #import '../../styles/media.scss'; depending on the relative path of the partial file.
I have a scss file with some partial mixins. I want to compile only that mixin, without converting it to CSS. Let me show you the code.
#mixin baseButton() {
position: relative;
display: inline-block;
&:disabled {
background-color: gray;
}
}
#mixin button($classname:".midori-button") {
#{$classname} {
color: gray;
#include baseButton();
}
}
#include button();
Is it possible compile this code into SCSS like the above but not into CSS like:
.midori-button {
color: gray;
position: relative;
display: inline-block;
&:disabled {
background-color: gray;
}
}
Thanks.
P.S: Not native.
Not sure if I'm reading this question right but you can create mixin partials that does not render CSS by adding an underscore to the file name like _button.scss
If you do that you should place the #inclue in the file/files you want to render CSS (using #import to make the mixins available).
// _button.scss => No CSS
#mixin baseButton(){ ... }
#mixin button(){ ...}
// module-1.scss => module-1.css
#import '_button.scss';
#include baseButton;
#include button;
// module-2.scss => module-2.css
#import '_button.scss';
#include baseButton;
#include button;
Singularitygs Grid overlay Not Showing
This is driving me up the wall, i've finally got singularity working but can't seam to show the grid - if someone could help that would be great.
Not bothered about the fancy toggle solution just want to see the grid-overlay desperately!
My HTML
<body data-development-grid="show">
My SASS
#import "singularitygs"
// Singularity 1.2 Syntax
#include add-grid(12)
#include add-gutter(1/3)
.container
#include background-grid
max-width: 940px
margin: 0 auto
min-height: 100%
.one
background-color: black
width: 100px
height: 100px
top: 2px
left: 5px
If it helps i'm using codekit.
Thanks in advance
Finally got it working. The solution is to apply sgs-change ('debug', true).
Here's my Sass code if anyone needs it:
#import "breakpoint"
#import "singularitygs"
//////////////////////
// Set up the grid //
//////////////////////
+add-grid(12)
+add-gutter(1/3)
+add-gutter-style('split')
+sgs-change ('debug', true)
body
#include background-grid
Demo: http://sassmeister.com/gist/fa0ac03b02e604f6bdf6
I'm testing out Bourbon Neat, and I have two columns within an outer-container, and I want the columns to be equal height (so as tall as the tallest column). Using #include fill-parent on the short column doesn't work, it just makes it as wide as the outer-container. I could do it in javascript, but doesn't Neat handle this?
Here's my html:
<section class="blog">
<article>
<h1>How to set up Bourbon Neat</h1>
<h2>Installing and using Bourbon</h2>
<p>Install bourbon by going to your users directory in git bash, and typing: gem install bourbon</p>
<p>Then change directory to your style folder and type in git bash: bourbon install</p>
<p>Then, import the mixins at the top of your stylesheet(s): #import 'bourbon/bourbon'</p>
<h2>Installing and using Neat</h2>
<p>Install neat by going to your users directory in git bash, and typing: gem install neat</p>
<p>Then change directory to your style folder and type in git bash: install neat</p>
<p>Then, import the mixins at the top of your stylesheet(s): #import 'bourbon/bourbon'</p>
</article>
<aside>
<!--<img src="style/images/cupman.gif" alt="It's bidness time">-->
<p>It's bidness time</p>
</aside>
And here's my SASS: `
$visual_grid: true
$visual-grid-color: blue
$visual-grid-index: front
$visual-grid-opacity: 0.1
#import 'bourbon/bourbon'
#import 'neat/neat'
#import 'variables'
///////////////////////////
html
#include linear-gradient(black, gray)
height: 100%
body
background-color: $baseColor
font-family: $type
body *
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
//////////////////////////////
.blog
#include outer-container
aside
#include span-columns(4)
background: $thirdColor
//height: 100%
//#include fill-parent()
article
#include span-columns(8)
background-color: $fourthColor
padding: 5px
margin-top: 40px
background-color: $secondColor
`
Thanks for reading.
EDIT: For now, I'm just using jQuery to manually equalize column size, but let me know if there's a Neater way (haha) to go about this.
One solution to equal column height is making all parents to height:100%.
Using your example:
html, body
height: 100%
.blog
#include outer-container
height: 100%
aside
#include span-columns(4)
background: $thirdColor
height: 100%
article
#include span-columns(8)
background-color: $fourthColor
padding: 5px
height:100%
This should work
To control the height of a child you first need to set its parent's height. Then if you want to have both with the same height, just use the min-height property.
Like the following:
.blog {
height: 100%;
aside {
min-height: 100%;
}
}
and it should work.
fill-parent only makes it full width, not full height of its container. It is equivalent to this:
.element {
width: 100%;
// Also sets box-sizing if global $border-box-sizing is set to 'false'
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Source
Getting my feet wet with Susy/sass/haml etc (using adjusted middleman - with latest susy from master branch)
Have this in grid.css.scss
#import 'susy';
$total-columns : 8;
$column-width : 4em;
$gutter-width : 0em;
$grid-padding : $gutter-width;
$break-max : 12;
$container-style: magic;
// Container
.page {
#include container($total-columns, $break-max);
}
// Layout
.header {
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
.pagenav {
clear: both;
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
.main {
clear: both;
.main-left {
#include span-columns($total-columns omega);
#include at-breakpoint(10) {
#include span-columns(7);
}
}
.main-right {
#include span-columns($total-columns omega);
#include at-breakpoint(10) {
#include span-columns(3 omega);
}
}
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
.footer {
clear: both;
#include at-breakpoint($break-max) {
#include pad(1,1);
}
}
this snippet comes from site.css.scss
.main {
background-color: #eee;
}
.main-left {
background-color: #fff;
}
.main-right {
background-color: #eee;
}
.body background is black...
Now when content in main-left is larger than main-right I see a black square on the bottom right...
Any way I can make that bottom right #eee i.o.w. main-right the same height (dynamic) as main-left - or have the .main background to apply...???
Thanks
Peter
PS Somebody with more credits should make a Susy tag in stackoverflow...
#main {
display: table;
background-color: #eee;
}
.main-left,
.main-right{
display: table-cell;
vertical-align: top;
}
.main-left {
background-color: #fff;
}
.main-right {
background-color: #eee;
}
This will make the two divs match each other as if they were adjacent table cells.
Don't worry, this doesn't qualify as using tables for layout, it's cool for columns, and it's not caused me any problems.
Of course, shitty old browsers don't support it, but you could use a .js script like ie9.js to patch it where necessary.