Hi!
This might be caused by my lack of understanding of SASS/Compass.
I'm trying to output grid width with the following SASS code:
$total-columns : 4
$column-width : 4em // each column is 4em wide
$gutter-width : $column-width / 2 // 1em gutters between columns
$grid-padding : $gutter-width / 2 // grid-padding equal to gutters
#page
+container
+susy-grid-background
#block-block-3
div.content
p:first-of-type:after
content: columns-width()
Nothing is printed into block 3. :(
I also tried content: columns-width($total-columns), still nothing. If i do content: "foo", "foo" does get printed.
What am i doing wrong? How do i see susy-calculated grid width? Also, can it be printed in compass watch output?
Ok, the solution is using interpolation:
content: "#{columns-width($total-columns)}"
Related
I am getting "Incompatible units: 'rem' and 'px'" when overriding the Bootstrap 4.3.1 variables in a custom override sass file.
I have tried positioning following paths on custom sass file on top of the file and last line of the file as instructed on Bootstrap 4 documentation.
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
Error in terminal
ERROR in ./src/scss/main.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/scss/main.scss)
Module build failed:
$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
^
Incompatible units: 'rem' and 'px'.
Remove <br> from the SCSS file first and this the problem of calc() function not the problem of px or rem.
NOTE
calc() function is the inbuilt function of CSS, so whenever you call calc() in SCSS, you need to use #{} technique to use the variable
height: calc(100% - #{$body_padding})
Now I give you one example
$custom-select-padding-y = 50px;
$custom-select-feedback-icon-padding-right: calc((1em + #{2 * 50px}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
2 * 50px = 100px and so on after that, it cant calculate 1em + {random px} so, its return undefined and compiler give error.
calc() calculates 2 * 5px = 10px or 2 * 1rem = 32px.
calc() cant calculate 2rem + 1em, 1rem + 1px etc.
I want a 1000px wide container with 12 columns seperated by 20px gutters.
So I entered the exact pixels:
$total-columns : 12;
$column-width : 65px;
$gutter-width : 20px;
$grid-padding : 0;
$container-style: static;
I end up with these columns:
width: 6.77966% /*(calculated: 67.7833px)*/
margin-right: margin-right: 1.69492%; /* (calculated: 16.9333px) */
I am totally out of clues what is going wrong here. I got the feeling I am missing something very basic.
Any insight welcome.
Thx
Susy was initially built to manage fluid grids, so that's the default setting. If you want static grids, just change the $container-style variable to static:
$container-style: static;
That should do it!
Ok, I found my mistake.
As mentioned above I am using susy with drupal's omega 4 theme. I created a separate file _grid.scss which contained only the grid definitions:
.grid-1 {
#include span-columns(1, 12);
}
What I did not know was that I had to add the column and width definitions in that file as well. So I always ended up with default settings.
Sorry for the disturbance :)
I can't get a mixin to accept a block:
=my-mixin($some-var)
width: $some-var
#content // Is this correct?
+my-mixin(123px)
height: 100px
This results in a "mixin doesn't accept a content block" error. I'm using the current version of Sass. Thanks for help.
syntax is ok with version 3.2 of SASS, double check that
For me the problem was with SASS indentation.
You can't nest another block within a mixin like this:
.button-cta
+button (transparent, tomato)
&:hover
background-color: tomato
color: #fff
instead:
.button-cta
+button (transparent, tomato)
&:hover
background-color: tomato
color: #fff
hover state must not be nested
I was getting this error too. Turned out that somewhere else in my scss I was using #mixin mobile-only instead of #include mobile-only - aka, I was accidentally redefining the mixin later in the code.
I'm using Susy/Compass/SASS for a simple responsive grid on my current project. However, the Compass compiler won't compile Susy's at-breakpoint mixin. Here's my grid:
+border-box-sizing
$total-columns : 3
$column-width : 4.5em
$gutter-width : 1em
$grid-padding : $gutter-width
$container-style: fluid
$break-1: 6
$break-2: 10
body
+container($total-columns, $break-1, $break-2)
.list
+span-columns(3)
.detail
display: none
+at-breakpoint($break-1) {
.detail
+squish(1)
+span-columns(3)
.list
+span-columns(2 omega)
}
+at-breakpoint($break-2) {
.detail
+squish(1,1)
+span-columns(5)
.list
+span-columns(3 omega)
}
When Compass tries to compile, I get an error: error screen.sass (Line 20 of _grid.sass: Invalid CSS after "($break-1) ": expected expression (e.g. 1px, bold), was "{")
identical screen.css.
If found a previous question similar to mine that suggested the compass-susy-plugin was the culprit. I have removed that (not sure that I had it to begin with) and installed the Susy gem again to be safe, but I still get the error.
Has anyone had this or a similar problem? Thanks in advance for your help!
Susy does support the indented Sass syntax. The problem is you're currently using a hybrid of both syntaxes. Try this:
#import "susy"
+border-box-sizing
$total-columns : 3
$column-width : 4.5em
$gutter-width : 1em
$grid-padding : $gutter-width
$container-style: fluid
$break-1: 6
$break-2: 10
body
+container($total-columns, $break-1, $break-2)
.list
+span-columns(3)
.detail
display: none
+at-breakpoint($break-1)
.detail
+squish(1)
+span-columns(3)
.list
+span-columns(2 omega)
+at-breakpoint($break-2)
.detail
+squish(1,1)
+span-columns(5)
.list
+span-columns(3 omega)
Notice there are not curly brackets after the at-breakpoint() mixins. Just indent.
I found the problem. Susy doesn't support SASS's indented syntax. Boo!
I added in tons of curly braces, semicolons, and #includes to fix it.
UPDATE:
OK, the problem was not support for the SASS syntax. It was my use of the curly braces in the indented syntax! For some reason, my brain decided that the code block would need to be in braces since it would be passed to a mixin. My mistake and my apologies to the devs of Susy.
I'm currently in the process of learning 960gs using sass / compass, but I'm confused as to what the "$n" is in the following code and how to use the arguments.
$ninesixty-gutter-width: 20px !default
$ninesixty-grid-width: 960px !default
$ninesixty-columns: 12 !default
$ninesixty-class-separator: "_" !default
=grid-container
margin-left: auto
margin-right: auto
width: $ninesixty-grid-width
=grid-width($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width)
width: $ninesixty-grid-width / $cols * $n - $gutter-width
According to the docs for that plugin...
"N is the number of grid columns to span as in grid_N or push_N with the original 960 Grid System framework."