Styling your website has come a long way long. CSS was the canvas for the UI engineers. Although it grew, it grew slowly and had its limitations.
This was answered with the introduction of CSS pre-processors. With the introduction of SCSS and LESS, the limitation for a UI artist is their own imaginations.
So to begin with, here are some SCSS mixins to jumpstart your work.
1. Adding cross-browser mixin
@mixin crossbrowser($property, $value) {
-webkit-#{}:
-moz-#{}:
-ms-#{}:
#{}:
};
Usage
@mixin flex {
@include crossbrowser(display, flex);
}
@mixin flex-direction($direction: row) {
@include crossbrowser(flex-direction, $direction);
}
@mixin justify-content($justify: flex-start) {
@include crossbrowser(justify-content, $justify);
}
@mixin box-shadow($left: 5px, $top: 8px, $radius: 32px, $color: rgba(3,3,3,0.2)) {
@include crossbrowser(box-shadow, $left $top $radius $color);
}
2. Opacity
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie);
}
3. Icons
@mixin icons (
$position: before,
$icon: false,
$icon-size: 14px,
$icon-line-height: 18px,
$icon-color: $primary-color) {
@if $position == "before" {
&:before {
content: $icon;
font-family: 'icomoon';
font-size: $icon-size;
line-height: $icon-line-height;
color: $icon-color;
margin-right: 8px;
}
}
@else if $position == "after" {
&:after {
content: $icon;
font-family: 'icomoon';
font-size: $icon-size;
line-height: $icon-line-height;
color: $icon-color;
margin-left: 8px;
}
}
}
4. Media Queries
$tablet-width: 768px;
$desktop-width: 1024px;
@mixin mobile {
@media (max-width: #{$tablet-width - 1}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$tablet-width}) {
@content;
}
}
@mixin tablet-only {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$desktop-width}) {
@content;
}
}
5. Buttons
@mixin button($class: primary) {
border: 1.5px solid $primary-color;
border-radius: 3px;
text-transform: uppercase;
@include transition();
background: none;
text-rendering: optimizeLegibility;
cursor: pointer;
text-align: center;
@if $class == primary {
height: 20px;
line-height: 17px;
font-size: 10px;
@include letter-spacing(160, 10px);
}
@else if $class == big {
font-size: 14px;
@include flex();
@include justify-content();
@include align-items();
width: fit-content;
margin: 0 auto;
line-height: 20px;
min-height: 28px;
padding: 0 10px;
}
&:hover {
background: $primary-color;
color: $white;
}
}
There you go, I constantly reuse these to jumpstart my projects.
SCSS watch files
Here’s something I found relevant when watching files inside subfolders and compiling to the root.
sass --watch scss:.
As the above code, it will watch the and compile the files inside scss to the root.
Leave a comment