Skip to content

Commit 627206c

Browse files
ajay-dhangarajay-dhangar
committed
Started modern css tools
1 parent 46c617b commit 627206c

File tree

2 files changed

+394
-2
lines changed

2 files changed

+394
-2
lines changed

‎docs/css/modern-css-tools/preprocessors/less.mdx‎

Lines changed: 199 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,199 @@
1-
<ComingSoon />
1+
---
2+
title: "Less (Leaner Style Sheets)"
3+
description: "Explore Less, a dynamic stylesheet language that extends CSS with features like variables, nesting, mixins, and operations, offering an efficient way to manage large CSS projects."
4+
keywords: [Less CSS, CSS preprocessor, variables, mixins, nesting, functions, CSS language extension]
5+
tags: [Less CSS, CSS preprocessor, variables, mixins, nesting, functions, CSS language extension]
6+
sidebar_label: Less
7+
---
8+
9+
**Less (Leaner Style Sheets)** is a powerful dynamic stylesheet language that serves as a robust **CSS preprocessor**. Developed earlier than Sass's widespread adoption of the SCSS syntax, Less is distinct because it is written in JavaScript and can be compiled in two ways:
10+
11+
1. **Client-side:** Via a JavaScript file included in the browser (convenient for development).
12+
2. **Server-side/Build Tool:** Compiled into pure CSS using Node.js or task runners (standard for production).
13+
14+
Less shares many core concepts with Sass (variables, mixins, nesting) but often uses slightly different syntax and features, making it a strong alternative, especially in environments where JavaScript integration is preferred.
15+
16+
<AdsComponent />
17+
<br />
18+
19+
## 1. Core Features of Less
20+
21+
Less aims to improve CSS efficiency and maintainability by introducing programming features into the styling layer.
22+
23+
### A. Variables (`@`)
24+
25+
In Less, variables are declared using the **`@`** symbol. They allow you to define common values for colors, dimensions, and other properties, ensuring consistency across your stylesheet.
26+
27+
```less title="styles.less"
28+
// Define variables using @
29+
@base-color: #3b82f6; // Blue
30+
@link-color: darken(@base-color, 10%);
31+
@spacing-large: 20px;
32+
33+
.header {
34+
background-color: @base-color;
35+
padding: @spacing-large;
36+
}
37+
38+
.nav-link {
39+
color: @link-color;
40+
}
41+
```
42+
43+
### B. Nesting and Parent Selector (`&`)
44+
45+
Less supports nesting selectors to reflect the HTML structure, which helps organize CSS and reduces the repetition of parent selectors.
46+
47+
The **`&`** parent selector is crucial for referring back to the parent selector, often used for pseudo-classes or modifying classes (similar to BEM modifiers).
48+
49+
```less title="styles.less"
50+
.card-module {
51+
background: white;
52+
border-radius: 4px;
53+
padding: 15px;
54+
55+
h3 { // Nested element
56+
color: @base-color;
57+
margin-bottom: 10px;
58+
}
59+
60+
// Using the parent selector for pseudo-class (hover)
61+
&:hover {
62+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
63+
}
64+
}
65+
```
66+
67+
<AdsComponent />
68+
<br />
69+
70+
### C. Mixins
71+
72+
Mixins allow you to embed all the properties of one class into another. Unlike Sass's `@include`, Less allows you to use any defined class name as a mixin.
73+
74+
Mixins can also accept parameters, making them highly flexible for reusing style logic.
75+
76+
#### Basic Mixin Example
77+
78+
```less title="styles.less"
79+
// Define a class that will act as a mixin
80+
.clearfix {
81+
&:after {
82+
content: "";
83+
display: table;
84+
clear: both;
85+
}
86+
}
87+
88+
.container {
89+
.clearfix(); // Include all properties from .clearfix
90+
max-width: 1200px;
91+
}
92+
```
93+
94+
#### Parametric Mixin Example
95+
96+
```less title="styles.less"
97+
// Mixin with arguments and default values
98+
.border-radius(@radius: 5px) {
99+
-webkit-border-radius: @radius;
100+
-moz-border-radius: @radius;
101+
border-radius: @radius;
102+
}
103+
104+
.button {
105+
// Call the mixin, overriding the default 5px radius
106+
.border-radius(10px);
107+
border: 1px solid gray;
108+
}
109+
```
110+
111+
### D. Operations (Math)
112+
113+
Less allows you to perform mathematical operations (`+`, `-`, `*`, `/`) directly on numerical values, including units. This is particularly useful for calculating responsive grid widths, spacing, or component dimensions based on a single variable.
114+
115+
```less title="styles.less"
116+
@columns: 12;
117+
@gutter: 1.5%;
118+
@base-font-size: 16px;
119+
120+
.col-4 {
121+
// Calculate width dynamically
122+
width: (4 / @columns * 100%) - @gutter;
123+
}
124+
125+
.text-small {
126+
// Calculate font size relative to the base
127+
font-size: @base-font-size * 0.85;
128+
}
129+
```
130+
131+
<AdsComponent />
132+
<br />
133+
134+
## 2. Advanced Less Features
135+
136+
### A. Functions
137+
138+
Less includes a variety of built-in functions, especially for manipulating colors. These functions allow for dynamic adjustments to your palette, ensuring color harmony.
139+
140+
| Function | Purpose | Example |
141+
| :--- | :--- | :--- |
142+
| `lighten()` | Makes a color lighter. | `lighten(@base-color, 10%)` |
143+
| `darken()` | Makes a color darker. | `darken(@base-color, 20%)` |
144+
| `saturate()` | Makes a color more vivid. | `saturate(@base-color, 15%)` |
145+
| `fade()` | Changes the opacity of a color. | `fade(@base-color, 50%)` |
146+
147+
### B. Namespaces and Accessors
148+
149+
Less provides a way to logically group styles or variables under a **namespace**, similar to a module. This prevents conflicts and makes code organized.
150+
151+
```less title="styles.less"
152+
// 1. Define the namespace as a set of rules
153+
#themes {
154+
.dark-mode() {
155+
background: #333;
156+
color: white;
157+
}
158+
}
159+
160+
.app-container {
161+
// 2. Access the mixin inside the namespace
162+
#themes > .dark-mode();
163+
}
164+
```
165+
166+
### C. Importation (`@import`)
167+
168+
Like Sass, Less supports the `@import` directive to break stylesheets into smaller, more manageable files. By default, Less treats imported files as Less files and merges them before compilation.
169+
170+
```less title="styles.less"
171+
// Imports and processes the content of _variables.less
172+
@import "variables.less";
173+
// Imports and processes the content of _buttons.less
174+
@import "components/buttons";
175+
```
176+
177+
<AdsComponent />
178+
<br />
179+
180+
## Try It Yourself: CodePen Example
181+
182+
Now that you've seen the core features of Less, try modifying and experimenting with the code in this CodePen example to see how Less can streamline your CSS development process.
183+
184+
<CodePenEmbed
185+
title="CodeHarborHub Less Demo"
186+
penId="PwNxaPO"
187+
/>
188+
189+
## 3. Resources for Further Learning
190+
191+
To effectively use Less in your projects, the official documentation is the primary resource.
192+
193+
### Official Documentation
194+
195+
The Less official site offers comprehensive guides, installation instructions (for Node.js), and detailed examples of all its features.
196+
197+
* **Less Official Website:** [http://lesscss.org/](http://lesscss.org/)
198+
* **Functions Documentation:** Explore all the built-in color manipulation and mathematical functions. [http://lesscss.org/functions/](http://lesscss.org/functions/)
199+
* **Mixins Documentation:** Essential guide for mastering parametric mixins. [http://lesscss.org/features/\#mixins-feature](https://www.google.com/search?q=http://lesscss.org/features/%23mixins-feature)

0 commit comments

Comments
 (0)