hi I"m working in one project, and i have create media condition for my column in Sass.
this the code
// for Mobile media - 320px width
#mixin mobile{
#media only screen and (max-width:767px){
width: 300px;
}
}
and this my loop for my column
#for $col from 1 through $grid-cols{
.col-#{$col}{
#include mobile;
}
}
and my $grid-cols = 12
so this my css output
#media only screen and (max-width: 767px) {
.col-1 {
width: 300px; } }
#media only screen and (max-width: 767px) {
.col-2 {
width: 300px; } }
etc... till .co-12
i need my output like this
#media only screen and (max-width: 767px) {
.col-1, .col-2 {width:300px;}
please, any hint
I think you will need to use a SASS placeholder in order to achieve that output. Replace your mixin:
#mixin mobile{
#media only screen and (max-width:767px){
width: 300px;
}
}
with a placeholder:
%mobile {
#media only screen and (max-width:767px){
width: 300px;
}
}
and call it with the #extend %mobile; instead of #include mobile; in your loop.
See this article for a very nice explanation on differences between mixins and placeholders.
Related
I have done a project with a lot of code duplicity, so the problem occurs because I have to write the class in each query.
I'm trying to improve performance here. In order to do that, I want to use dynamic values for styling.
For example, the way CSS is being used here, but in ten different places using the same animation.
$center : 590px;
.container {
width: $center;
}
#media only screen and (max-width: 1660px){
//here I want to change $center to 490px;
// =================================================
// but the way that I found is to duplicate it
$center: 490px;
.container {
width: $center;
}
/*note : if I don't call the '.container' everytime that I'm changing the $center variable it does not work,
I have some animations that must use the variables .
*/
}
You can make use of #mixin and #include to avoid duplication.
#mixin media-container($center) {
#media only screen and (max-width: 1660px) {
.container {
width: $center;
}
}
}
In order to use the #mixin in any classes you want, you can add the following to the class you want to use this in:
.container-class {
#include media-container(540px);
}
Note that the 540px above can be replaced with any configuration you want for $center variable, which would change the width for your container.
Documentation: https://sass-lang.com/documentation/at-rules/mixin
SCSS variables are static (compile time) to do what you want you need to use CSSVariables that are dynamic (run time) - something like this
.container {
width: var(--width, 590px); /* default */
}
#media only screen and (max-width: 1660px){
.container {
--width: 490px;
}
}
If you need to set multiple values - you can use Sass nesting
to make it a little easier to type
.container {
width: var(--width, 50px);
#media (min-width: 100px) { --width: 100px; }
#media (min-width: 200px) { --width: 200px; }
#media (min-width: 300px) { --width: 300px; }
...
}
// output
.container {
width: var(--width, 50px);
}
#media (min-width: 100px) {
.container { --width: 100px; }
}
#media (min-width: 200px) {
.container { --width: 200px; }
}
#media (min-width: 300px) {
.container { --width: 300px; }
}
I want to achieve if the screen is pc user width:880px; if it is mobile use width: inherit;, how do i get this using the #media query.
#media all and (width: 880px) {
.colm_6_container {
width: inherit;
}
}
My div class is 'colm_6_container'.
//ipad and desktop
#media screen and (min-width: 768px) {
.colm_6_container{
width: 880px;
}
}
We have recently changed to Bootstrap 4, and I'm looking into all the new ways to set widths, breakpoints etc.
I want to make a div have a max-width of the current breakpoint's container width, but I can't find the standard SASS variable name for that specific width.
Note that I can't use classes (e.g. .col-xl-) for this, since I don't have access to this specific part of the HTML.
Have a look at this built-in mixin:
// For each breakpoint, define the maximum width of the container in a media query
#mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
#each $breakpoint, $container-max-width in $max-widths {
#include media-breakpoint-up($breakpoint, $breakpoints) {
width: $container-max-width;
max-width: 100%;
}
}
}
You can create a similar one to your needs like:
#mixin make-max-widths-container-width($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
#each $breakpoint, $container-max-width in $max-widths {
#include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
}
}
}
and use it:
.my-custom-class{
#include make-max-widths-container-width();
}
"Compiled" CSS produced (with default values on breakpoints and container widths):
#media (min-width: 576px) {
.my-custom-class {
max-width: 540px;
}
}
#media (min-width: 768px) {
.my-custom-class {
max-width: 720px;
}
}
#media (min-width: 992px) {
.my-custom-class {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.my-custom-class {
max-width: 1140px;
}
}
So I am trying to make my website responsive, but when I target screens larger than 1600px the css is not working. Do I have any typo in my css code? Thank you.
#media (max-width:900px) and (min-width:600px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
#media (max-width:1250px) and (min-width:900px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
/* THIS ONE IS NOT WORKING */
#media only screen and (min-width: 1600px) and (max-width: 2600px) {
ul.news li {
width: 100%!important;
color: red!important;
}
}
You can refer to this Media Query and write your css in this media query dimensions
/*=====Media Query Css Start======*/
#media all and (max-width:1920px){
}
#media all and (max-width:1600px){
}
#media all and (max-width:1366px){
}
#media all and (max-width:1280px){
}
#media all and (max-width:1024px){
}
#media all and (max-width:960px){
}
#media screen and (max-width:767px){
}
#media screen and (max-width:480px){
}
/*=====Media Query Css End======*/
This is the first time I'm using LESS, and I am trying to get some elements to scale based on a media query.
So I figured I'd make a .scale mixin to do this for me.
.scale(#rules) {
#scale-ratio: 1;
#media screen and (min-width: (#page-width)) { #rules(); }
#scale-ratio: 0.8;
#media screen and (min-width: (#page-width * 0.6), max-width(#page-width - 1)) { #rules(); }
#scale-ratio: 0.6;
#media screen and (max-width: (#page-width * 0.6 - 1)) { #rules(); }
}
// Using like
header {
.scale({
width: #page-width * #scale-ratio;
});
}
Is there any way to make it work? Or through another method? I just don't want to fall back to having to write the properties for each media query.
On request the expected output:
#media screen and (min-width: 1280px) {
header {
width: 1280px;
}
}
#media screen and (min-width: 768px, max-width: 1279px) {
header {
width: 1024px;
}
}
#media screen and (max-width: 767px) {
header {
width: 768px;
}
}
With this input that's the expected output, but it's just a stripped example.
The variable's scope is limited to the blocks (they behave like constants and the order doesn't affect them). One way to restrict the scope so you can redefine variables is to declare them in &{} blocks.
The mixin below generates the CSS you expect:
.scale(#rules) {
&{
#scale-ratio: 1;
#media screen and (min-width: (#page-width)) { #rules(); }
}
&{
#scale-ratio: 0.8;
#min-width: (#page-width * 0.6);
#max-width: (#page-width - 1);
#media screen and (min-width: (#min-width), ~'max-width: #{max-width}') { #rules(); }
}
&{
#scale-ratio: 0.6;
#media screen and (max-width: (#page-width * 0.6 - 1)) { #rules(); }
}
}
I had to place the max-width part within apostrophes since it was causing an error (I don't really know why).
Using:
#page-width: 1280px;
the result is:
#media screen and (min-width: 1280px) {
header {
width: 1280px;
}
}
#media screen and (min-width: 768px, max-width: 1279px) {
header {
width: 1024px;
}
}
#media screen and (max-width: 767px) {
header {
width: 768px;
}
}