DEV Community

FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on • Edited on • Originally published at fscss.onrender.com

Assigning one value to multiple properties FSCSS

#fscss

Streamlining Your CSS with FSCSS: Assigning One Value to Multiple Properties
Writing concise and efficient CSS is a goal for many developers. While standard CSS offers some shorthand properties, tools like Figured Shorthand Cascading Style Sheet (FSCSS) take this a step further by providing intuitive methods to assign a single value to multiple properties. This can significantly reduce redundancy and improve readability in your stylesheets.
FSCSS introduces several methods to achieve this, making your CSS more compact and maintainable. Let's explore some of these powerful features.
Core FSCSS Methods for Multi-Property Assignment
FSCSS offers a range of methods, typically distinguished by the number of properties they can target:

  • %N() Methods (e.g., %2(), %3(), %I()): These methods allow you to apply a single value to a specified number of properties. The number in the method name (e.g., 2 in %2()) indicates the maximum number of properties it can handle.

    • Syntax: %N(property1, property2[, ...][:value;])
    • %I() (for "infinite" or multiple properties): This versatile method can handle up to 10 properties.
      • Syntax: %I(property1, property2[, ...][:value;]) Examples:
    • Assigning width and height: %2(WIDTH, HEIGHT[:200PX;])

    Compiles to CSS:
    width: 200px;
    height: 200px;

    In this example, %2() signifies that two properties will receive the same value. WIDTH is the first property, HEIGHT is the second, and 200PX (enclosed in square brackets) is the shared value.

    • Applying a transform: %i(transform: rotateY, transform: skewX[(90deg);])

    Compiles to CSS:
    transform: rotateY(90deg);
    transform: skewX(90deg);

  • mx()/$m() and mxs()/$p() Methods: These provide alternative syntax for assigning values to multiple properties, offering flexibility based on your preference. They can handle up to 6 properties.

    • mxs() or $p() (for specific property-value pairs):
      • Syntax: $P(property1, property2, 'value')
      • Example: $p(max-height, max-width,'500px')

    Compiles to CSS:
    max-height: 500px;
    max-width: 500px;

Enhancing Color Definitions with FSCSS
FSCSS significantly simplifies defining colors by allowing you to share values across color components (RGB, HSL) and even for hexadecimal colors.

  • RGB Colors with %3() and %2():

    • Example 1 (all components the same): rgb(%3([100,])1)

    Compiles to CSS:
    rgb(100,100,100,1)

    Here, %3() cleverly applies 100 to the first three (R, G, B) components, with 1 for the alpha channel.

    • Example 2 (sharing two components): rgb(%2(200[,200]))

    Compiles to CSS:
    rgb(200,200,200)

  • HSL Colors with %2():
    hsl(200%2([,50%]))

Compiles to CSS:
hsl(200,50%,50%)

Similarly, for HSL, %2() efficiently assigns 50% to the saturation and lightness components.

  • Hexadecimal Colors with %6() and %3(): #%6([0])

Compiles to CSS:
#000000

This demonstrates how %6() can generate a full hexadecimal color by repeating a single digit.
#%3(F,D,8[0])

Compiles to CSS:
#F0D080

Here, %3() is used to construct a hex color by repeating the provided digits.
Getting Started with FSCSS
To utilize FSCSS in your projects, simply include the provided script in your HTML:

Then, you can write your FSCSS directly within tags:</p> <style> // Your FSCSS code here

By leveraging FSCSS, you can write cleaner, more maintainable stylesheets, especially when dealing with repetitive property assignments. It's a valuable tool for optimizing your CSS workflow.
File for Copying:

Streamlining Your CSS with FSCSS: Assigning One Value to Multiple Properties

Writing concise and efficient CSS is a goal for many developers. While standard CSS offers some shorthand properties, tools like Figured Shorthand Cascading Style Sheet (FSCSS) take this a step further by providing intuitive methods to assign a single value to multiple properties. This can significantly reduce redundancy and improve readability in your stylesheets.

FSCSS introduces several methods to achieve this, making your CSS more compact and maintainable. Let's explore some of these powerful features.

Core FSCSS Methods for Multi-Property Assignment

FSCSS offers a range of methods, typically distinguished by the number of properties they can target:

  • %N() Methods (e.g., %2(), %3(), %I()): These methods allow you to apply a single value to a specified number of properties. The number in the method name (e.g., 2 in %2()) indicates the maximum number of properties it can handle.

    • Syntax: %N(property1, property2[, ...][:value;])
    • %I() (for "infinite" or multiple properties): This versatile method can handle up to 10 properties.
      • Syntax: %I(property1, property2[, ...][:value;])

    Examples:

    • Assigning width and height:

      %2(WIDTH, HEIGHT[:200PX;])

      Compiles to CSS:

      width: 200px;
height: 200px;

      In this example, %2() signifies that two properties will receive the same value. WIDTH is the first property, HEIGHT is the second, and 200PX (enclosed in square brackets) is the shared value.

    • Applying a transform:

      %i(transform: rotateY, transform: skewX[(90deg);])

      Compiles to CSS:

      transform: rotateY(90deg);
transform: skewX(90deg);

  • mx()/$m() and mxs()/$p() Methods: These provide alternative syntax for assigning values to multiple properties, offering flexibility based on your preference. They can handle up to 6 properties.

    • mxs() or $p() (for specific property-value pairs):

      • Syntax: $P(property1, property2, 'value')

      • Example:

        $p(max-height, max-width,'500px')

        Compiles to CSS:

        max-height: 500px;
max-width: 500px;

Enhancing Color Definitions with FSCSS

FSCSS significantly simplifies defining colors by allowing you to share values across color components (RGB, HSL) and even for hexadecimal colors.

  • RGB Colors with %3() and %2():

    • Example 1 (all components the same):

      rgb(%3([100,])1)

      Compiles to CSS:

      rgb(100,100,100,1)

      Here, %3() cleverly applies 100 to the first three (R, G, B) components, with 1 for the alpha channel.

    • Example 2 (sharing two components):

      rgb(%2(200[,200]))

      Compiles to CSS:

      rgb(200,200,200)

  • HSL Colors with %2():

    hsl(200%2([,50%]))

    Compiles to CSS:

    hsl(200,50%,50%)

    Similarly, for HSL, %2() efficiently assigns 50% to the saturation and lightness components.

  • Hexadecimal Colors with %6() and %3():

    #%6([0])

    Compiles to CSS:

    #000000

    This demonstrates how %6() can generate a full hexadecimal color by repeating a single digit.

    #%3(F,D,8[0])

    Compiles to CSS:

    #F0D080

    Here, %3() is used to construct a hex color by repeating the provided digits.

Getting Started with FSCSS

To utilize FSCSS in your projects, simply include the provided script in your HTML:

<script src='https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.js' async></script>
Enter fullscreen mode Exit fullscreen mode

Then, you can write your FSCSS directly within <style> tags

By leveraging FSCSS, you can write cleaner, more maintainable stylesheets, especially when dealing with repetitive property assignments. It's a valuable tool for optimizing your CSS workflow.
visit the fscss docs for features and latest versions.
Get started with FSCSS

Top comments (0)