FSCSS Shared Properties - Shorthand Syntax

Introduction to Shared Properties

FSCSS shared properties allow you to apply the same value to multiple CSS properties with a single, concise declaration. This powerful feature eliminates repetitive code and makes your stylesheets more maintainable.

Efficient Coding

Write less code while achieving the same results

Consistent Values

Ensure consistent spacing and sizing across your design

Clean Syntax

Intuitive shorthand that's easy to read and maintain

Syntax Overview

Shared Property Syntax

FSCSS provides shorthand properties from %1 to %6, plus %i for unlimited properties:

FSCSS Syntax	Properties	Description
`%1(prop[: value;])`	1 property	Single property assignment (rarely used)
`%2(prop1, prop2[: value;])`	2 properties	Apply value to two properties
`%3(prop1, prop2, prop3[: value;])`	3 properties	Apply value to three properties
`%4(prop1, prop2, prop3, prop4[: value;])`	4 properties	Apply value to four properties
`%5(prop1, prop2, prop3, prop4, prop5[: value;])`	5 properties	Apply value to five properties
`%i(prop1, prop2, ...[: value;])`	Unlimited	Assigns a single value to any number of properties. This feature was deprecated after FSCSS expanded the `%n()` method to support unlimited properties (e.g., %7, %8, and beyond). It now functions identically to `%6`.

%2 - Two Properties

Applying Values to Two Properties

%2

Use %2 when you need to apply the same value to exactly two properties. Perfect for setting width and height together.

FSCSS

.square {
  %2(width, height[: 150px;])
  background: #3b82f6;
  border-radius: 8px;
}

Compiled CSS

.square {
  width: 150px;
  height: 150px;
  background: #3b82f6;
  border-radius: 8px;
}

Square

%3 - Three Properties

Applying Values to Three Properties

%3

Use %3 when you need to apply the same value to three related properties. Great for consistent border sizing.

FSCSS

.bordered-box {
  %3(border-width, outline-width, border-radius[: 4px;])
  border-style: solid;
  border-color: #3b82f6;
  outline-style: solid;
  outline-color: rgba(59, 130, 246, 0.3);
  padding: 1rem;
}

.circle {
  %3(width, height, border-radius[: 100px;])
  background: #ec4899;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

Compiled CSS

.bordered-box {
  border-width: 4px;
  outline-width: 4px;
  border-radius: 4px;
  border-style: solid;
  border-color: #3b82f6;
  outline-style: solid;
  outline-color: rgba(59, 130, 246, 0.3);
  padding: 1rem;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: #ec4899;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

Bordered Box

Circle

%4 - Four Properties

Applying Values to Four Properties

%4

Use %4 when you need consistent spacing across multiple properties. Perfect for margin and padding setups.

FSCSS

.spaced-element {
  %4(margin, padding, gap, border-width[: 1rem;])
  background: #f59e0b;
  border-style: solid;
  border-color: #d97706;
  display: flex;
  flex-direction: column;
}

.centered-box {
  %4(top, right, bottom, left[: 0;])
  background: #10b981;
  position: absolute;
  margin: auto;
  width: 80%;
  height: 80%;
}

Compiled CSS

.spaced-element {
  margin: 1rem;
  padding: 1rem;
  gap: 1rem;
  border-width: 1rem;
  background: #f59e0b;
  border-style: solid;
  border-color: #d97706;
  display: flex;
  flex-direction: column;
}

.centered-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #10b981;
  position: absolute;
  margin: auto;
  width: 80%;
  height: 80%;
}

Spaced Element

Centered

%5 and %6 - Five & Six Properties

%5 - Five Properties

%5

Use %5 for complex typography or detailed spacing configurations.

FSCSS

.typography {
  %5(font-size, line-height, letter-spacing, word-spacing, text-indent[: 1rem;])
  color: #1e293b;
  font-weight: 600;
}

Typography Example

%6 - Six Properties

%6

Use %6 for comprehensive grid systems or complex layout configurations.

FSCSS

.grid-system {
  %6(grid-gap, row-gap, column-gap, padding, margin, border-spacing[: 0.5rem;])
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f8fafc;
}

%i - Unlimited Properties

Applying Values to Any Number of Properties

%i

Use %i when you need to apply the same value to more than six properties or when the number of properties is dynamic.

FSCSS

.complex-element {
  %i(width, height, min-width, min-height, max-width, max-height, padding, margin[: 2rem;])
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

Compiled CSS

.complex-element {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  max-width: 2rem;
  max-height: 2rem;
  padding: 2rem;
  margin: 2rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

Complex Element

Real World Examples

Practical Applications

Here are some practical examples of how shared properties can be used in real projects:

Button Styling

.btn {
  %4(padding, margin, border-radius, gap[: 0.75rem;])
  background: #3b82f6;
  color: white;
  border: none;
  display: flex;
  align-items: center;
}

Action Button

Card Layout

.card {
  %3(padding, border-radius, box-shadow[: 1rem 8px 20px;])
  background: white;
  border: 1px solid #e2e8f0;
}

Card Content

Form Controls

.input {
  %4(padding, border-width, border-radius, font-size[: 0.5rem 2px 4px 14px;])
  border-style: solid;
  border-color: #cbd5e1;
}

Input Field

Best Practices

Using Shared Properties Effectively

Group Related Properties

Only use shared properties for properties that logically should have the same value

Maintain Readability

Use shared properties when they improve code clarity, not just to save space

Consistent Values

Perfect for design systems where consistent spacing is important

Good Example

/* Good - related properties with same value */
.container {
  %4(margin, padding, gap, border-radius[: 1rem;])
  background: white;
  border: 1px solid #e2e8f0;
}

Avoid This

/* Avoid - unrelated properties forced to same value */
.element {
  %3(width, font-size, line-height[: 2rem;])
  /* This creates confusing relationships between properties */
}