Ak-ram / Scss-Helpers

Scss-helpers makes it easy to maintain the code quality while developing.πŸš€ It contains many useful features like auto-complete, live snippets and much more. Scss features a user-friendly interface and offers tutorials for new users. πŸ’ͺ

Home Page:https://marketplace.visualstudio.com/items?itemName=AkramAshraf.scss-helpers

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SCSS - bunch of useful mixins and functions

Installation

scss-helpers-preview

It's a VS Code snippets that allow you to utilize SSCS functions and mixins that have already been precoded as well as some abbreviations to cut down on development time.

Available Prefixes

All commands were prefixed with underscore "_"

1- @rules

  • _imp ➜ @import 'filePath'

  • _use ➜ @use 'filePath' as *

  • _fw ➜ @forward 'filePath'


2- Responsiveness methods

  • _brpt ➜ creates default breakpoints map

  • _mqm ➜ Inserts default media queries for breakpoints map

  • _rmxs ➜ ResponsiveMax mixin for mobile

  • _rms ➜ ResponsiveMax mixin for tablet Portet

  • _rmm ➜ ResponsiveMax mixin for tablet Landscape

  • _rmh ➜ ResponsiveMax mixin for laptop

  • _rmixs ➜ ResponsiveMin mixin for mobile

  • _rmis ➜ ResponsiveMin mixin for tablet Portet

  • _rmim ➜ ResponsiveMin mixin for tablet Landscape

  • _rmib ➜ ResponsiveMin mixin for laptop

  • _rmih ➜ ResponsiveMin mixin for desktop


3- Functions

  • _clc ➜ calc()
  • _funcrem ➜ function to convert pixels to rem
  • _rem ➜ use function pixels to rem
  • _funcem ➜ function to convert pixels to em
  • _em ➜ use function pixels to em

4- Others

  • _bba ➜ Position absolute cover parent
  • _bgco ➜ Background image size cover
  • _bicn ➜ Background image size contain
  • _apm ➜ Auto prefix mixin
  • _ap ➜ Auto prefix @include

About

Scss-helpers makes it easy to maintain the code quality while developing.πŸš€ It contains many useful features like auto-complete, live snippets and much more. Scss features a user-friendly interface and offers tutorials for new users. πŸ’ͺ

https://marketplace.visualstudio.com/items?itemName=AkramAshraf.scss-helpers


Languages

Language:SCSS 100.0%