I have a function that calculates the value of vw from px depending on the maximum brackpoint. For the mobile version of the page I use a brackpoint of 360, but starting with a screen size of 768px I need to use a brackpoint of 1440.
Below I gave an example of how this works now, but maybe there is some solution to automate this process. In a real project it becomes very difficult to handle all sizes every time.
variables.scss
$bp-large: 1440;
mixins.scss
#mixin _768 {
#media (min-width: 768px) {
#content;
}
}
functions.scss
#function get-vw($target, $base-vw: 360) {
$vw-context: ($base-vw * .01) * 1px;
#return calc($target / $vw-context) * 1vw;
}
page.scss
.square {
width: get-vw(100px);
height: get-vw(100px);
#include _768 {
width: get-vw(200px, $bp-large);
height: get-vw(200px, $bp-large);
}
}
Related
I want to be able to write:
div {
background-size: 100%;
#bgimgfunction('img1.png');
}
and have SASS produce something like:
div {
background-size: 100%;
/* Generated by the call to #bgimgfunction */
background-image:('/img/img1-medium.png');
#media (max-width: 640px) {
background-image:('/img/img1-low.png');
}
#media (min-width: 1600px) {
background-image:('/img/img1-high.png');
}
/* End generated by the call to #bgimgfunction */
}
mixins I think don't work because I can't pass a parameter
functions I think don't work because they are only valid after a selector.
Is there a way to do this?
What you need is a #mixin which does take parameters. Given the structure of your image URLs, I think you need two arguments, one for the image name and one for its extension:
#mixin bgImageFunction($imageName, $imageExt) {
$path: '/img/' + $imageName;
background-image: url("#{$path}-medium.#{$imageExt}");
#media (max-width: 640px) {
background-image: url("#{$path}-low.#{$imageExt}");
}
#media (min-width: 1600px) {
background-image: url("#{$path}-high.#{$imageExt}");
}
}
div {
background-size: 100%;
#include bgImageFunction('img1', 'png');
}
You can also use a default parameter for the extension and only pass the name as argument:
#mixin bgImageFunction($imageName, $imageExt: 'png') {
...
}
I've been trying to write conditional SCSS that sets the height of my device to one value if the device is landscape or another if it is in portrait.
I understand I can use a media query to determine the orientation but I don't believe I'm receiving the correct calculation. Currently this is what I have. How can I check that my condition is written properly?
#function calculateRootHeight ($width, $orientation: landscape)
{
$heightPaddedRatio: 1.0;
$heightToWidth: 2/3;
#if (orientation: portrait) {
$heightToWidth: 3/2;
}
#return $heightPaddedRatio * $heightToWidth * $width;
}
#mixin describeRoot($bodyWidth) {
#root {
background-color: #EAE5E5;
}
#media (orientation: portrait) {
#root {
height: calculateRootHeight($bodyWidth, portrait);
}
}
#media (orientation: landscape) {
#root {
height: calculateRootHeight($bodyWidth, landscape);
}
}
}
I think you only need to change the syntax in your #if statement slightly, the rest seems ok.
Using the #debug directive is helpful if you want to check a value in your Sass functions.
#function calculateRootHeight ($width, $orientation: landscape) {
$heightPaddedRatio: 1.0;
$heightToWidth: 2/3;
#if ($orientation == "portrait") {
$heightToWidth: 3/2;
}
#debug "Orientation is '#{$orientation}'";
#return $heightPaddedRatio * $heightToWidth * $width;
}
.portrait {
height: calculateRootHeight(200px, portrait); /* Orientation is 'portrait' */
}
.landscape {
height: calculateRootHeight(200px); /* Orientation is 'landscape' */
}
It's possible create a function that return value based on screen width.
My idea:
#function vw_pc( $num ) {
#media screen and (max-width: 1920)
{
#return a;
}
#media screen and (max-width: 1200)
{
#return b;
}
}
No, since the Sass compiler is creating a static CSS code regardless of your screen.
I have a variable which is a number and a % eg 10%. How can I use it as a value in my SASS but apply a division on it?
I have this:
$value: 0.1;
$value-percent: $value * 1%;
$value-from-50: (50 - $value) * 1%;
.test {
padding-left: $value-percent;
}
.test2 {
width: $value-from-50;
}
Which outputs this:
.test {
padding-left: 10%;
}
.test2 {
width: 40%;
}
What I now need to do is apply half of the value of $value-percent:
.test3 {
padding-left: $value-percent / 2;
}
So that I can output:
.test3 {
width: 5%;
}
Ive tried various combinations of that example code with normal and curly brackets. I can get the correct number of 10 outputted into the CSS but the % is always missing from it.
If your initial var isn't a percentage and is just a number you may need to try this:
.test {
padding-right: ($var / 2) + 0%
}
Which is better practice as it'll convert the value you pass it into what you're adding it to, in this case a percentage.
This is a hard question, so I am aware that no one may come up with solution, but that's the problem I really need to solve in my framework.
I have a screen() mixin written in SCSS, which takes $size as an argument, to return any #content wrapped in a media query.
The problem occurs when one element #includes multiple screen() mixins, because resulting media queries will overwrite each other in the same order as they were included. How can I make sure the resulting media queries will be rendered in the correct order (biggest screen to smallest), even if I forget to include them in the right order?
http://sassmeister.com/gist/951520fa83d1e1c69c9d
#mixin screen(
$size: null
){
#if $size == md {
#media (max-width: 1024px) {
#content;
}
}
#if $size == sm {
#media (max-width: 768px) {
#content;
}
}
#if $size == xs {
#media (max-width: 320px) {
#content;
}
}
}
/* output should be 1024, 768, 320 */
.screen {
&:before {
// this should be included as the Last one
#include screen(xs){
content: "xs";
}
#include screen(sm){
content: "sm";
}
// this should be included as the First one
#include screen(md){
content: "md";
}
}
}
I tried to solve that issue by creating placeholder selectors in the right order %media-sm{...}, %media-xs {...}..., and #extend them from the mixin, but #content can't be passed through the #extend directive.
Another solution is a hard one - create an array of keys - sizes, and values - #contents and render them from another function.
No. Sass only does exactly what you tell it to do. If you want your styles to appear in a specific order, write them in that specific order.
Might be easier to pass in the media width you are trying to target:
#mixin media($width) {
#media only screen and (max-width: $width) {
#content;
}
}
#include media(320px) {
background: red;
}