- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello everyone
Here is the Codepen.
Up to this point in working with Sass, I have only ever used the super simple stuff. Basically just nesting and the lighten/darken mixin provided by Bootstrap.
I realise that there are many more mixins I could use, and I now wish to use this breakpoint-next mixin:
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
My final aim is:
I have never worked with Sass bootstrap breakpoints, what is a clean way of achieving what I am after in terms of the responsive mixins given to me by Bootstrap?
If you notice, above width 576px, then my point one is no longer true.
I can do things manually without leveraging any mixin by doing this:
@media (min-width: 576px) {
header .search input {
width: calc(50% - 15px);
&:focus {
width: 100%;
}
}
}
and this works, but is there no better way? I am hardcoding the 576px