/* Based on this : https://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/ */
@mixin columnandmargin($numPerRow, $margin) {
width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
&:nth-of-type(n) {
// Required reset if columnandmargin mixin used in mediaQs;
clear:none;
margin-bottom: $margin;
margin-right: $margin;
}
&:nth-of-type(#{$numPerRow}n) {
margin-right: 0;
// margin-bottom: 0;
}
&:nth-of-type(#{$numPerRow}n+1) {
clear:both;
}
}
Based on this : https://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/
Used like this :
$listing-cols: 3 !default;
$listing-cols-margin: 2% !default;
.listing-element{
@include columnandmargin($listing-cols,$listing-cols-margin);
}
@media (max-width:576px){
.listing-element{
@include columnandmargin(2,$listing-cols-margin);
}
}
Used like this :
$listing-cols: 3 !default;
$listing-cols-margin: 2% !default;
.listing-element{
@include columnandmargin($listing-cols,$listing-cols-margin);
}
@media (max-width:576px){
.listing-element{
@include columnandmargin(2,$listing-cols-margin);
}
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.