This content originally appeared on DEV Community and was authored by Software Developer
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;
}
This content originally appeared on DEV Community and was authored by Software Developer
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Software Developer | Sciencx (2025-10-11T15:09:00+00:00) 50 Most Useful LESS Snippets. Retrieved from https://www.scien.cx/2025/10/11/50-most-useful-less-snippets/
" » 50 Most Useful LESS Snippets." Software Developer | Sciencx - Saturday October 11, 2025, https://www.scien.cx/2025/10/11/50-most-useful-less-snippets/
HARVARDSoftware Developer | Sciencx Saturday October 11, 2025 » 50 Most Useful LESS Snippets., viewed ,<https://www.scien.cx/2025/10/11/50-most-useful-less-snippets/>
VANCOUVERSoftware Developer | Sciencx - » 50 Most Useful LESS Snippets. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/10/11/50-most-useful-less-snippets/
CHICAGO" » 50 Most Useful LESS Snippets." Software Developer | Sciencx - Accessed . https://www.scien.cx/2025/10/11/50-most-useful-less-snippets/
IEEE" » 50 Most Useful LESS Snippets." Software Developer | Sciencx [Online]. Available: https://www.scien.cx/2025/10/11/50-most-useful-less-snippets/. [Accessed: ]
rf:citation » 50 Most Useful LESS Snippets | Software Developer | Sciencx | https://www.scien.cx/2025/10/11/50-most-useful-less-snippets/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.