Hello everyone, as on the title, I will introduce you the mixins that I like the other Front-end dev most commonly used in a project.
There are many places that recommend mixins to solve prefix problems for older browsers, but I personally find it a bit redundant, because today we often use PostCSS or Autoprefixer to add them ourselves. So I will not mention mixins like that anymore.
Ok, that’s long enough, I’ll get to the main point right away 
1. Responsive
This is the most used mixin with me, used to code responsive websites (Mobile first).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | @mixin responsive($canvas) { @if $canvas == xs { @media only screen and (min-width: 320px) { @content; } } @else if $canvas == sm { @media only screen and (min-width: 576px) { @content; } } @else if $canvas == md { @media only screen and (min-width: 768px) { @content; } } @else if $canvas == lg { @media only screen and (min-width: 992px) { @content; } } @else if $canvas == xl { @media only screen and (min-width: 1200px) { @content; } } @else if $canvas == xxl { @media only screen and (min-width: 1600px) { @content; } } } |
Here I divided the grid of Bootstrap 4, respectively 320, 576, 768, 992, 1200 and improved the 1600 milestone for larger designs. How to use:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | html { font-size: 10px; @include responsive(sm) { font-size: 14px; } @include responsive(md) { font-size: 14px; } @include responsive(lg) { font-size: 16px; } } |
Pretty simple, right Now I’m going to add the second most important thing that almost every project uses
2. Gutter (Only applicable to projects using Bootstrap)
This is the code for you to adjust the distance between the columns in Bootstrap. Suppose you have 1 row of products consisting of 4 products. The default bootstrap is 30px between products. What if you want to be 50px away? Of course you can customize in the core of bootstrap, but that will affect the whole Grid system while you only want this row to be 50px away. So we will need this mixin:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | @mixin gutter( $gutterWidth ) { @if $gutterWidth <= 30 { margin-right: -#{$gutterWidth / 2}px; margin-left: -#{$gutterWidth / 2}px; > .col, > [class^="col-"], > [class^=" col-"] { padding-right: #{$gutterWidth / 2}px; padding-left: #{$gutterWidth / 2}px; } } @else { @include responsive(lg) { margin-right: -#{$gutterWidth / 2}px; margin-left: -#{$gutterWidth / 2}px; > .col, > [class^="col-"], > [class^=" col-"] { padding-right: #{$gutterWidth / 2}px; padding-left: #{$gutterWidth / 2}px; } } } } |
Usage as follows: Assuming you want 50px, we will declare the class in scss to reuse many places.
SCSS
1 2 3 4 | .row.gutter-50 { @include gutter(50); } |
HTML
1 2 3 4 5 6 7 8 | <div class="row gutter-50"> // Thêm class gutter-50 vào khối chứa class row <div class="col-12 col-lg-3"> <article class="post"> ... </article> </div> </div> |
Note: You may wonder why my mixins have the @if and @else paragraphs that look redundant. The reason is because if you notice gutter is greater than 30, when going down to the mobile screen, the total padding 2 on the left and right of the column will be larger than the default of the bootstrap container (30px), resulting in a horizontal scroll bar, which makes the aesthetics less responsive . So, for gutter> 30px, we only apply for large screen
3. Placeholder
This is the code so we can customize the input’s placeholder. Note that this code applies only to SCSS version 3.4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | @mixin optional-at-root($sel) { @at-root #{if(not &, $sel, selector-append(&, $sel))} { @content; } } @mixin placeholder { @include optional-at-root('::-webkit-input-placeholder') { @content; } @include optional-at-root(':-moz-placeholder') { @content; } @include optional-at-root('::-moz-placeholder') { @content; } @include optional-at-root(':-ms-input-placeholder') { @content; } } |
How to use:
1 2 3 4 5 6 7 8 9 10 | .foo { @include placeholder { color: green; } } @include placeholder { color: red; } |
Result:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .foo::-webkit-input-placeholder { color: green; } .foo:-moz-placeholder { color: green; } .foo::-moz-placeholder { color: green; } .foo:-ms-input-placeholder { color: green; } ::-webkit-input-placeholder { color: red; } :-moz-placeholder { color: red; } ::-moz-placeholder { color: red; } :-ms-input-placeholder { color: red; } |
4. Gradient
This is a mixin to add a background gradient to the DOM. We have $ start-color: start color, $ end-color: end color, $ orientation: The direction of the gradient. Orientation can be vertical (vertical), horizontal (horizontal) or left nothing, it will be a circular gradient.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @mixin gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } } |
How to use:
1 2 3 4 | .gradient { @include gradient(#07c, #06f, vertical); } |
Okay, so I introduced 4 Mixins that I see every project I need to use. Thank you for reading, if there are any other useful mixins, you can comment to let me know