I. Variables & Basic Usage
1. Defining and Using Variables
@primary-color: #3498db;
@padding: 15px;
.container {
color: @primary-color;
padding: @padding;
}
2. Darken and Lighten Colors with Variables
@button-bg: #2980b9;
@button-bg-hover: darken(@button-bg, 10%);
.button {
background-color: @button-bg;
&:hover {
background-color: @button-bg-hover;
}
}
3. Color Fade with Opacity
@overlay-bg: fade(@primary-color, 40%);
.overlay {
background-color: @overlay-bg;
}
II. Mixins Basics
4. Basic Radius Mixin
.border-radius(@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
5. Applying Mixins with Arguments
.box {
.border-radius(10px);
}
6. Mixin with Multiple Parameters
.box-shadow(@x: 0px, @y: 2px, @blur: 5px, @color: rgba(0,0,0,0.2)) {
box-shadow: @x @y @blur @color;
}
7. Using Guards (Conditional Mixins)
.size(@w, @h) when (@w =< 100px) {
width: @w;
height: @h;
}
.size(@w, @h) when (@w > 100px) {
width: 100px;
height: 100px;
}
8. Nested Mixins Example
.button {
.border-radius(6px);
&:hover {
background: lighten(@primary-color, 15%);
}
}
III. Functions and Operations
9. Mathematical Operations with Units
@base-padding: 10px;
.container {
padding: @base-padding * 2;
margin: (@base-padding / 2);
}
10. Mixing Colors
@mixed-color: mix(#3498db, #e74c3c, 50%);
.button {
background-color: @mixed-color;
}
11. Complex Color Adjustment
@btn-bg: #27ae60;
.btn {
background-color: lighten(@btn-bg, 20%);
border-color: darken(@btn-bg, 10%);
}
IV. Nesting & Parent Selector Usage
12. Nested Selectors
nav {
ul {
margin: 0;
li {
display: inline-block;
padding: 0 10px;
}
}
}
13. Using Parent Selector &
.btn {
color: white;
&.active {
background-color: @primary-color;
}
}
14. Pseudo-class and Pseudo-element Nesting
input {
&:focus {
outline: none;
border-color: @primary-color;
}
&::placeholder {
color: #999;
}
}
V. Loops & Iterations
15. Loop Through Numbers
.generate-grid(@columns) when (@columns > 0) {
.col-@{columns} {
width: (100% / @columns);
}
.generate-grid(@columns - 1);
}
.generate-grid(4);
16. Loop Example for Padding
.loop-padding(@i) when (@i > 0) {
.p-@{i} {
padding: @i * 5px;
}
.loop-padding(@i - 1);
}
.loop-padding(5);
VI. Guards (Conditional Logic)
17. Color Based on Condition
.bg-color(@theme) when (@theme = light) {
background-color: white;
}
.bg-color(@theme) when (@theme = dark) {
background-color: black;
}
body {
.bg-color(dark);
}
18. Responsive Widths Guard
.responsive-width(@size) when (@size <= 600px) {
width: 100%;
}
.responsive-width(@size) when (@size > 600px) {
width: 600px;
}
.container {
.responsive-width(500px);
}
VII. Useful Mixins & Snippets for Common UI
19. Clearfix Mixin
.clearfix() {
&::after {
content: "";
display: block;
clear: both;
}
}
20. Center Element Horizontally & Vertically
.center-flex() {
display: flex;
justify-content: center;
align-items: center;
}
21. Text Ellipsis for Overflow
.text-truncate() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
22. Invisible Accessibility Helper
.visually-hidden() {
position:absolute;
width:1px;
height:1px;
padding:0;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
23. Box Shadow Mixin with Defaults
.box-shadow(@x: 0px, @y: 1px, @blur: 3px, @color: rgba(0,0,0,0.12)) {
box-shadow: @x @y @blur @color;
}
VIII. Responsive Utilities
24. Media Query in Mixin
.respond-to(@device) when (@device = phone) {
@media(max-width: 600px) {
@arguments;
}
}
25. Usage of Responsive Mixin
.container {
.respond-to(phone) {
width: 100%;
}
}
IX. Advanced Utilities
26. Vertical Rhythm Mixin for Margin
.vertical-rhythm(@lines, @line-height: 24px) {
margin-top: (@lines * @line-height);
margin-bottom: (@lines * @line-height);
}
27. Focus Outline Mixin
.focus-outline(@color: #5b9dd9) {
outline: 2px solid @color;
outline-offset: 2px;
}
28. Transition Mixin
.transition(@props: all, @duration: 0.3s, @ease: ease-in-out) {
transition: @props @duration @ease;
}
X. Programmer-Favored Handy Snippets
29. Dynamic Font Size with Minimum & Maximum
.font-size-responsive(@min, @max) {
font-size: @min;
@media (min-width: 480px) {
font-size: calc(@min + (@max - @min) * ((100vw - 480px) / 960));
}
@media (min-width: 1440px) {
font-size: @max;
}
}
30. Checkbox Custom Style
.checkbox-style() {
appearance: none;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 4px;
position: relative;
cursor: pointer;
&:checked {
background-color: @primary-color;
border-color: @primary-color;
&::after {
content: '✔';
color: white;
position: absolute;
top: 0;
left: 4px;
}
}
}
XI. Guards with Variable Arguments
31. Responsive Padding Mixin with Guards
.padding-responsive(@size) when (@size = small) {
padding: 5px;
}
.padding-responsive(@size) when (@size = medium) {
padding: 10px;
}
.padding-responsive(@size) when (@size = large) {
padding: 20px;
}
XII. Utility Mixins and Common Patterns
32. Vertical Center with Absolute Positioning
.vertical-center() {
position: relative;
top: 50%;
transform: translateY(-50%);
}
33. Placeholder Color Mixin
.placeholder(@color: #999) {
&::-webkit-input-placeholder {
color: @color;
}
&:-moz-placeholder {
color: @color;
}
&::-moz-placeholder {
color: @color;
}
&:-ms-input-placeholder {
color: @color;
}
}
XIII. Miscellaneous and Productivity
34. Hide Visually But Keep for Screen Readers
.sr-only() {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
35. Text Stroke (for headings)
.text-stroke(@color: black, @width: 1px) {
-webkit-text-stroke: @width @color;
text-stroke: @width @color;
}
36. Clearfix Mixin (Alternative)
.clearfix() {
&::after {
content: "";
display: table;
clear: both;
}
}
37. Loading Spinner (Simple Circle)
.spinner(@size: 40px, @color: @primary-color) {
border: 4px solid lighten(@color, 40%);
border-top: 4px solid @color;
border-radius: 50%;
width: @size;
height: @size;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
XIV. Color Palette Utilities
38. Generate Shades Mixin
.shades(@color) {
background-color: @color;
&:hover {
background-color: darken(@color, 10%);
}
&:active {
background-color: darken(@color, 20%);
}
}
39. Text with Contrast Color
.contrast-text(@bg-color) {
color: if(lightness(@bg-color) > 50%, black, white);
}
XV. Flexbox Utilities
40. Flex Center Horizontal & Vertical
.flex-center() {
display: flex;
justify-content: center;
align-items: center;
}
41. Flex Space Between
.flex-space-between() {
display: flex;
justify-content: space-between;
align-items: center;
}
XVI. Grid Helpers
42. Auto Responsive Grid Mixin
.grid-auto-fit(@min-size: 250px) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(@min-size, 1fr));
grid-gap: 16px;
}
XVII. Typography Utilities
43. Responsive Heading Size
.responsive-heading(@min: 1.5rem, @max: 3rem) {
font-size: @min;
@media (min-width: 768px) {
font-size: calc(@min + (@max - @min) * ((100vw - 768px) / 1024));
}
@media (min-width: 1792px) {
font-size: @max;
}
}
XVIII. Programmer Favorites & Helpful Patterns
44. SVG Icon Size Mixin
.icon-size(@size: 24px) {
width: @size;
height: @size;
fill: currentColor;
}
45. Scrollbar Styling (Webkit Browsers)
.scrollbar-custom() {
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: darken(@primary-color, 20%);
border-radius: 10px;
}
}
46. CSS Triangle Helper
.triangle(@size: 10px, @color: black) {
width: 0;
height: 0;
border-left: @size solid transparent;
border-right: @size solid transparent;
border-bottom: @size solid @color;
}
47. Overlay Centered Absolute Layer
.overlay-center() {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
48. Transition Slide In from Left
.slide-in-left(@duration: 0.3s) {
animation: slideInLeft @duration ease forwards;
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
49. Responsive Hide/Show Utility
.hide-on-mobile() {
@media (max-width: 600px) {
display: none !important;
}
}
50. Box Sizing Border Box Mixin
.border-box() {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}