Stylus snippets for Platframe | editor: VS Code

stylus.json

{
  "Set size: 2D (equilateral | [width, height])":{
    "prefix":[
      "Platframe | size (both [w, h])",
      "size"
    ],
    "body":[
      "size($0px)"
    ],
    "description":"Set the width and height of an element"
  },
  "Unit conversion: px ⟶ rem":{
    "prefix":[
      "Platframe | px ⟶ rem",
      "rem"
    ],
    "body":[
      "rem($0px)"
    ],
    "description":"For fixed-width pixels to root relative em conversion"
  },
  "@media: min-width":{
    "prefix":[
      "Platframe | @media: min-width",
      "min"
    ],
    "body":[
      "+min($1)",
      "$0"
    ],
    "description":"Define a min-width @media selector"
  },
  "@media: max-width":{
    "prefix":[
      "Platframe | @media: max-width",
      "max"
    ],
    "body":[
      "+max($1)",
      "$0"
    ],
    "description":"Define a max-width @media selector"
  },
  "@media: range":{
    "prefix":[
      "Platframe | @media: between",
      "between"
    ],
    "body":[
      "+between($1)",
      "$0"
    ],
    "description":"Define a composite width-based @media selector with a minimum and maxium range"
  },
  "@media: min-resolution":{
    "prefix":[
      "Platframe | @media: min-resolution",
      "min-res"
    ],
    "body":[
      "+min-res($1dppx)",
      "$0"
    ],
    "description":"Define a min-resolution @media selector"
  },
  "@media: max-resolution":{
    "prefix":[
      "Platframe | @media: max-resolution",
      "max-res"
    ],
    "body":[
      "+max-res($1dppx)",
      "$0"
    ],
    "description":"Define a max-resolution @media selector"
  }
}