108 lines
3.4 KiB
YAML
108 lines
3.4 KiB
YAML
uuid:
|
|
- value: 018bf894-2d3e-4130-b0bd-43450ef5753a
|
|
langcode:
|
|
- value: en
|
|
type:
|
|
- target_id: daily_email
|
|
target_type: node_type
|
|
target_uuid: 8bde1f2f-eef9-4f2d-ae9c-96921f8193d7
|
|
revision_timestamp:
|
|
- value: '2025-05-11T09:00:00+00:00'
|
|
revision_uid:
|
|
- target_type: user
|
|
target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
|
|
revision_log: { }
|
|
status:
|
|
- value: true
|
|
uid:
|
|
- target_type: user
|
|
target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
|
|
title:
|
|
- value: 'Do we still need CSS preprocessors?'
|
|
created:
|
|
- value: '2025-02-28T00:00:00+00:00'
|
|
changed:
|
|
- value: '2025-05-11T09:00:00+00:00'
|
|
promote:
|
|
- value: false
|
|
sticky:
|
|
- value: false
|
|
default_langcode:
|
|
- value: true
|
|
revision_translation_affected:
|
|
- value: true
|
|
path:
|
|
- alias: /daily/2025/02/28/preprocessors
|
|
langcode: en
|
|
body:
|
|
- value: |
|
|
<p>Before I started to use [Tailwind CSS][0], I used CSS preprocessors like Less and Sass to add features like variables and nesting to my CSS files.</p>
|
|
|
|
<p>Stylesheets would be written in .scss, .sass or .less files and processed to create the stylesheets that would be used by browsers.</p>
|
|
|
|
<p>But, with the recent improvements to CSS, do we still need these preprocessors?</p>
|
|
|
|
<p>Here's a very small example of some CSS that just works:</p>
|
|
|
|
<pre><code class="css">:root {
|
|
--color-primary: red;
|
|
--color-secondary: green;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
|
|
&:hover, &:focus {
|
|
color: var(--color-secondary);
|
|
}
|
|
}
|
|
</code></pre>
|
|
|
|
<p>It looks like a Sass file, but it's native CSS.</p>
|
|
|
|
<p>It has variables (a.k.a. custom properties) and nesting, which I think are the most used features from preprocessors.</p>
|
|
|
|
<p>But there's no additional build step to generate the end stylesheet. I can use this stylesheet as it is - making it easier to work on and less confusing for new Developers.</p>
|
|
|
|
<p>If I'm not using Tailwind CSS or atomic styles, writing plain CSS files is the approach I'd use.</p>
|
|
|
|
<p>No preprocessors needed.</p>
|
|
|
|
|
|
format: full_html
|
|
processed: |
|
|
<p>Before I started to use [Tailwind CSS][0], I used CSS preprocessors like Less and Sass to add features like variables and nesting to my CSS files.</p>
|
|
|
|
<p>Stylesheets would be written in .scss, .sass or .less files and processed to create the stylesheets that would be used by browsers.</p>
|
|
|
|
<p>But, with the recent improvements to CSS, do we still need these preprocessors?</p>
|
|
|
|
<p>Here's a very small example of some CSS that just works:</p>
|
|
|
|
<pre><code class="css">:root {
|
|
--color-primary: red;
|
|
--color-secondary: green;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
|
|
&:hover, &:focus {
|
|
color: var(--color-secondary);
|
|
}
|
|
}
|
|
</code></pre>
|
|
|
|
<p>It looks like a Sass file, but it's native CSS.</p>
|
|
|
|
<p>It has variables (a.k.a. custom properties) and nesting, which I think are the most used features from preprocessors.</p>
|
|
|
|
<p>But there's no additional build step to generate the end stylesheet. I can use this stylesheet as it is - making it easier to work on and less confusing for new Developers.</p>
|
|
|
|
<p>If I'm not using Tailwind CSS or atomic styles, writing plain CSS files is the approach I'd use.</p>
|
|
|
|
<p>No preprocessors needed.</p>
|
|
|
|
|
|
summary: null
|
|
field_daily_email_cta: { }
|