Created
June 22, 2024 14:59
-
-
Save TeamDijon/3acfaf383364a0e190ad3276a525aa62 to your computer and use it in GitHub Desktop.
Explanations regarding CSS variables system using Liquid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% # Inside the liquid file %} | |
{% liquid | |
assign base_selector = '#shopify-section-' | append: section.id | |
assign accent_color = section.settings.accent_color | |
%} | |
<style> | |
{{ base_selector }} { | |
{% if accent_color != 'rgba(0,0,0,0)' and accent_color != '#000000' %} | |
--accent-color: {{ accent_color }}; | |
{% endif %} | |
} | |
</style> | |
{% # Inside the CSS stylesheet %} | |
.my-button { | |
color: var(--accent-color, #000000); | |
} | |
{% comment %} | |
If the section settings accent_color was set to '#ff8000', the following would occur : | |
#shopify-section-my-section-id { | |
--accent-color: #ff8000; | |
} | |
.my-button { | |
/* In this case, button-color variable is set, so the browser will use #ff8000 */ | |
color: var(--accent-color, #000000); | |
} | |
If the section settings accent_color was set to rgba(0,0,0,0)' (equivalent to transparent/default value), the following would occur : | |
#shopify-section-my-section-id { | |
/* Condition is not verified, we do not output CSS variable */ | |
/* Same effect if setting was set to '#000000', no need to declare since style will defaut to same value */ | |
} | |
.my-button { | |
/* In this case, button-color variable is not set, the browser defaults to #000000 */ | |
color: var(--accent-color, #000000); | |
} | |
{% endcomment %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment