I would like to have 1/4 size gutter widths in smaller breakpoints, then in larger breakpoints and above, I'd like the gutters to be set to 1/2.
How can I globally set this in a _variables.scss file instead of having to declare it in every susy-breakpoint() (there's a ton of those)?
Seems like something like below should work, but it's throwing an error.
$susy: (gutters: 1/4);
#include susy-breakpoint($large-width, $large-columns) {
$susy: (gutters: 1/2);
}
[17:56:33] DEPRECATION WARNING on line 50 of _variables.scss:
Assigning to global variable "$susy" by default is deprecated. In
future versions of Sass, this will create a new local variable. If you
want to assign to the global variable, use "$susy: (gutters: 1 / 2)
!global" instead. Note that this will be incompatible with Sass 3.2.
Using $susy: (gutters: 1/2) !global; doesn't work -- it just ignores the 1/2 in larger breakpoints and uses 1/4 instead.
Just watched a Sass Bites episode featuring Eric M. Suzanne and figured it out based on one of his examples:
$susy: (gutters: 1/4);
$large-width: 960px;
$large-settings: (gutters: 1/2);
#include susy-breakpoint($large-width, $large-settings) {
}
Related
We know the advantages of using CSS4 variables but what if we need to get these values from a SASS function like so?:
:root {
--gap-l: toRem(10);
}
toRem is a Sass function that I call to get the sizes dynamically:
$fontSize: 16;
#function toRem($val) {
#return $val / $fontSize * 1.6 + 0rem;
}
This won't fail but won't work either. To have this working we can just have the value directly on --gap-l or keep using SASS vars.
If I try something like --gap-l: #{toRem(10)}; this is the error I get:
It doesn't call the SASS function
You can definitely do that: what you're missing is simply using string interpolation, i.e.:
:root {
--gap-l: #{toRem(10)};
}
The reason is highlighted in their "breaking changes" documentation with regards to CSS variables:
To provide maximum compatibility with plain CSS, more recent versions of Sass require SassScript expressions in custom property values to be written within interpolation. Interpolation will also work for older Sass versions, and so is recommended for all stylesheets.
Try this --gap-l: #{toRem(10)};, the #{} syntax is called interpolation. In the experience of heading bugs myself, when you want to use a SASS expression's raw value along with normal CSS, if you can't use the concise syntax like just toRem(10), try adding interpolation to see if it works.
Another example:
$padding: 5px;
.element {
width: calc(100% - $padding); // will not work, it must be:
width: calc(100% - #{$padding});
}
Here is the code with the updated question: https://jsfiddle.net/bcw763en/.
Notice that if you put :root above the #function, it'll not work.
I am trying to learn media query in css and I have few questions about some of the examples that I have come across. The queries are mentioned below:
I have seen a variable was declared in the following format in a .scss file which is used in a react component:
$screen-xs-max: ($screen-sm-min - 1);
Why is -1 used here?
The second question that I have is about this:
$large-screens-up: "(min-width: #{$screen-lg-min})";
I have 2 questions about these lines of code:
Why is the variable declared within the " ", doesn't that make the variable a string?
Why is # used here? I guess it is to find the variable $screen-lg-min in the path from where it is imported, but I am not sure if its correct. I just want to confirm if that's the correct thing or correct me if I am wrong.
Can anyone please help me with these doubts? I am sorry if this is too simple. I tried getting the answers myself, but couldn't find it.
In SCSS
Consider $screen-sm-min:546px; which will be declared in scss variables file in your project or the node modules folder.
$screen-xs-max: ($screen-sm-min - 1); means that the value of $screen-xs-max will be 1 less than $screen-sm-min that is 545px.
$large-screens-up: "(min-width: #{$screen-lg-min})";
Varible in scss can be used directly using $varible-name ,
But when you want to use the same variable inside a string in scss u will have to follow this
#{$variable-name} method
Why -1
Consider extra small devices width to be 0 to 545px(maxvalue).
Consider small devices width to be 546px(minvalue) to 768px(maxvalue)
Therefore the max width of the extra small devices will be
(min value of small devices) - 1
This method is used to avoid harcoded values in scss file,
For example if you decide to change the values of the width, you can change it in only one place and let the formulae handle the remaining calculation of the widths
I have been going through the Stylus docs and looking at examples, but I can't seem to get a simple calculation to work when using a variable. For example:
Works
margin-right: (1200 / 2)px;
Doesn't work
$siteWidth = 1200;
margin-right: ($siteWidth / 2)px;
I've seen many examples about using variables inside calc and using % before the variable name, or {..} around the variable, but I've tried both and neither works. Am I missing something obvious here?
Update
I failed to mention that I am storing my variables in a separate stylus file. If I create the variable in the same file as I am using it within the calculation, it works fine, however if I try to call the variable when it is imported from another file, it doesn't work. The variables file is the FIRST thing that is included in my main styles.styl file, and I can use the variables site wide without issue - just not when using it in a division calculation for some reason.
Codepen
UPDATE:
Try this instead of parenthesis:
#{$site-width / 2}px;
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_
This was a bit of a tricky one, but I solved my problem using the below:
margin-right: 'calc(-%s / 2)' % $sitewidth;
I have actually changed my code a bit to include a new variable to get half the width of the site, as I might use it again:
$halfsitewidth = $sitewidth / 2;
margin-right: '-%s' % $halfsitewidth;
I'm trying to integrate Neat 2.0 into an existing code base (which in itself is basically from Web Starter Kit). For some reason, when I turn on grid-visual I'm seeing 13 columns instead of 12.
Is there any particular reason why this might occur? Pulling hair out trying to debug.
It also seems that the columns and gutters are reversed somehow.
To replicate, I've downloaded a fresh Google Web Starter Kit and it gives me the same weird results. Perhaps I'm implementing Neat incorrectly?
All I did was add node-neat with npm i -D node-neat and updated my gulpfile.babel.js within the styles gulp task:
.pipe($.sass({
precision: 10,
includePaths: require('node-neat').includePaths
}).on('error', $.sass.logError))
Then added the following to my 'main.scss' :
#import 'neat';
.container {
#include grid-container;
#include grid-visual;
> .col {
#include grid-column(2);
}
}
Here's an example of what's happening
looks like your mistaking the guttering (blue columns between the actual columns) for the actual columns (White) I've doctored your screen capture to illustrate - columns are numbered in red.
Regarding reversal of columns there is a direction property in custom grids that maybe of use? It allows you to select between ltr (left to right) and rtl. It defaults to ltr which is what your example appears to be doing.
I'm receiving the following error when compiling scss file to css:
Error: src/scss/_custom.scss
Error: Incompatible units: 'rem' and 'px'.
So I put #debug directives above the line causing the error with offending variables calculation.
The #debug directive however prints two values by variable like this
src/scss/_custom.scss:346 DEBUG: $font-size-base `1rem`
src/scss/_custom.scss:348 DEBUG: $input-padding-y `0.5rem`
src/scss/_custom.scss:346 DEBUG: $font-size-base `13px`
src/scss/_custom.scss:348 DEBUG: $input-padding-y `0.5rem`
I have two separate files which are imported like this:
#import "variables" // $font-size-base: 13px;
#import "custom" // $font-size-base: 1rem !default;
As I understand it the problem comes from the second printed value that is used in calculation not the fist one.
How it is possible one variable to hold two separate values at one moment?
And how could I be sure that the second imported file overrides the variable value from the first.
Edit:
The full text of the error is:
Error: src/scss/_custom.scss
Error: Incompatible units: 'rem' and 'px'.
on line 350 of src/scss/_custom.scss
>> $input-height: (($font-size-base * $line-height-base) + ($in
-----------------------------------^
And the full line is:
$input-height:(($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
#debug of $line-height-base
src/scss/_custom.scss:347 DEBUG: $line-height-base `1.42857`
Here's what is happening from your code
($input-padding-y * 2)
$input-padding-y is 0.5rem
($font-size-base * $line-height-base)
$line-height-base is 1.42857
Now you've declared $font-size-base twice and one of the declarations uses the !default keyword. This simply means use this !default value for a variable as long as it is not reassigned somewhere else in the stylesheet. Simply put if a variable is defined twice, the one with the !default keyword is not used
So $font-size-base returns 13px
Therefore the equation is evaluated as
$input-height: ( ( 13px * 1.42857 ) + ( 0.5rem * 2 ) )
This is why the error complains about rem and px
I am not sure exactly the importance and intention for each of those values but the problem can be fixed by either
adding to !default to the $height: 13px, that way it uses the one with rem units,
removing the !default keyword all together and the later declared variable will overwrite the previous one
using the same unit of measurement for both variables declared
If the same variable is defined twice in two different files, #debug can print two different values of the variable if it has not yet come across the second declaration or reassignment of the variable