sass-logical-properties
v1.0.1
Published
A Sass package providing logical property mixins and functions.
Downloads
177
Maintainers
Readme
Sass Logical Properties
A Sass package providing logical property mixins and functions. This package allows you to use CSS logical properties easily and provides utilities for working with CSS custom properties.
Features
- Logical property mixins for margin, padding, border, and border-radius.
- Utility functions like
process-value
to work with CSS variables. - Supports both static values and CSS custom properties.
Installation
You can install this package via npm:
npm install sass-logical-properties
Usage
To use the mixins and functions in your project, simply import the package into your Sass file.
Importing the package
@use 'sass-logical-properties' as *;
Examples
Logical Margin
Use the logical-
margin` mixin to apply logical margins based on the flow of the document (left-to-right or right-to-left).
.example {
@include logical-margin(top, 20px); // Output: margin-block-start: 20px;
}
Logical Padding
Use the logical-padding
mixin to apply logical paddings.
.example {
@include logical-padding(left, --spacing); // Output: padding-inline-start: var(--spacing);
}
Border Radius
You can also apply logical border-radius using the logical-border-radius
mixin:
.example {
@include logical-border-radius(top-left, 10px); // Output: border-start-start-radius: 10px;
}
Functions
process-value
This function processes a value and automatically converts CSS custom properties from the format --value
to var(--value)
.
.example {
color: slp-process-value(--primary-color); // Output: color: var(--primary-color);
}
Available Mixins
logical-margin
($side
,$value
): Sets logical margin based on the side.logical-padding
($side
,$value
): Sets logical padding based on the side.logical-border
($side
,$value
): Sets logical border based on the side.logical-border-style
($side
,$value
): Sets logical border style.logical-border-color
($side
,$value
): Sets logical border color.logical-border-width
($side
,$value
): Sets logical border width.logical-border-radius
($corner
,$value
): Sets logical border radius based on the corner.
Development
If you want to work on this package locally, clone the repository and install the dependencies:
git clone https://github.com/sturobson/sass-logical-properties.git
cd sass-logical-properties
npm install
Build the package
To build the Sass files, use the following command:
npm run build
Watch for changes
To watch for changes and automatically rebuild, use the following command:
npm run watch
Contributing
Contributions are welcome! If you’d like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b my-feature-branch
). - Make your changes.
- Commit your changes (
git commit -m 'Add new feature'
). - Push to the branch (
git push origin my-feature-branch
). - Open a pull request.
License
This project is licensed under the MIT License - see the LICENSE file for details.