DEV Community

Software Developer
Software Developer

Posted on

50 Most Useful LESS Snippets

#design #ui #css #uxdesign

I. Variables & Basic Usage

1. Defining and Using Variables 

@primary-color: #3498db;
@padding: 15px;

.container {
  color: @primary-color;
  padding: @padding;
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Color Fade with Opacity 

@overlay-bg: fade(@primary-color, 40%);

.overlay {
  background-color: @overlay-bg;
}
Enter fullscreen mode Exit fullscreen mode

II. Mixins Basics

4. Basic Radius Mixin 

.border-radius(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
Enter fullscreen mode Exit fullscreen mode

5. Applying Mixins with Arguments 

.box {
  .border-radius(10px);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

8. Nested Mixins Example 

.button {
  .border-radius(6px);
  &:hover {
    background: lighten(@primary-color, 15%);
  }
}
Enter fullscreen mode Exit fullscreen mode

III. Functions and Operations

9. Mathematical Operations with Units 

@base-padding: 10px;
.container {
  padding: @base-padding * 2;
  margin: (@base-padding / 2);
}
Enter fullscreen mode Exit fullscreen mode

10. Mixing Colors 

@mixed-color: mix(#3498db, #e74c3c, 50%);
.button {
  background-color: @mixed-color;
}
Enter fullscreen mode Exit fullscreen mode

11. Complex Color Adjustment 

@btn-bg: #27ae60;
.btn {
  background-color: lighten(@btn-bg, 20%);
  border-color: darken(@btn-bg, 10%);
}
Enter fullscreen mode Exit fullscreen mode

IV. Nesting & Parent Selector Usage

12. Nested Selectors 

nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
      padding: 0 10px;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

13. Using Parent Selector & 

.btn {
  color: white;
  &.active {
    background-color: @primary-color;
  }
}
Enter fullscreen mode Exit fullscreen mode

14. Pseudo-class and Pseudo-element Nesting 

input {
  &:focus {
    outline: none;
    border-color: @primary-color;
  }
  &::placeholder {
    color: #999;
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

16. Loop Example for Padding 

.loop-padding(@i) when (@i > 0) {
  .p-@{i} {
    padding: @i * 5px;
  }
  .loop-padding(@i - 1);
}

.loop-padding(5);
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

18. Responsive Widths Guard 

.responsive-width(@size) when (@size <= 600px) {
  width: 100%;
}
.responsive-width(@size) when (@size > 600px) {
  width: 600px;
}

.container {
  .responsive-width(500px);
}
Enter fullscreen mode Exit fullscreen mode

VII. Useful Mixins & Snippets for Common UI

19. Clearfix Mixin 

.clearfix() {
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}
Enter fullscreen mode Exit fullscreen mode

20. Center Element Horizontally & Vertically 

.center-flex() {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

21. Text Ellipsis for Overflow 

.text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

VIII. Responsive Utilities

24. Media Query in Mixin 

.respond-to(@device) when (@device = phone) {
  @media(max-width: 600px) { 
    @arguments; 
  }
}
Enter fullscreen mode Exit fullscreen mode

25. Usage of Responsive Mixin 

.container {
  .respond-to(phone) {
    width: 100%;
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

27. Focus Outline Mixin 

.focus-outline(@color: #5b9dd9) {
  outline: 2px solid @color;
  outline-offset: 2px;
}
Enter fullscreen mode Exit fullscreen mode

28. Transition Mixin 

.transition(@props: all, @duration: 0.3s, @ease: ease-in-out) {
  transition: @props @duration @ease;
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

XII. Utility Mixins and Common Patterns

32. Vertical Center with Absolute Positioning 

.vertical-center() {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

35. Text Stroke (for headings) 

.text-stroke(@color: black, @width: 1px) {
  -webkit-text-stroke: @width @color;
  text-stroke: @width @color;
}
Enter fullscreen mode Exit fullscreen mode

36. Clearfix Mixin (Alternative) 

.clearfix() {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}
Enter fullscreen mode Exit fullscreen mode

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); }
}
Enter fullscreen mode Exit fullscreen mode

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%);
  }
}
Enter fullscreen mode Exit fullscreen mode

39. Text with Contrast Color 

.contrast-text(@bg-color) {
  color: if(lightness(@bg-color) > 50%, black, white);
}
Enter fullscreen mode Exit fullscreen mode

XV. Flexbox Utilities

40. Flex Center Horizontal & Vertical 

.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

41. Flex Space Between 

.flex-space-between() {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

XVIII. Programmer Favorites & Helpful Patterns

44. SVG Icon Size Mixin 

.icon-size(@size: 24px) {
  width: @size;
  height: @size;
  fill: currentColor;
}
Enter fullscreen mode Exit fullscreen mode

45. Scrollbar Styling (Webkit Browsers) 

.scrollbar-custom() {
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: darken(@primary-color, 20%);
    border-radius: 10px;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

47. Overlay Centered Absolute Layer 

.overlay-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

49. Responsive Hide/Show Utility 

.hide-on-mobile() {
  @media (max-width: 600px) {
    display: none !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

50. Box Sizing Border Box Mixin 

.border-box() {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)