https://github.com/laoer536/style-to-dom

Fast create dom by less or sass or css.
https://github.com/laoer536/style-to-dom

Last synced: about 1 month ago
JSON representation

Fast create dom by less or sass or css.

• Host: GitHub
• URL: https://github.com/laoer536/style-to-dom
• Owner: laoer536
• Created: 2023-06-30T19:46:23.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-16T12:59:47.000Z (11 months ago)
• Last Synced: 2024-02-16T13:48:34.444Z (11 months ago)
• Language: TypeScript
• Size: 418 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# style-to-dom

Fast create dom file by less or scss or css file.

## Install

npm

```js

npm install style-to-dom -D

```

pnpm

```js

pnpm add style-to-dom -D

```

yarn

```js

yarn add style-to-dom -D

```

## Use

Execute the following command in the project root directory

```js

create-style-dom 

```

Such as './src/pages/list/card/style/index.module.less'

`` is relative to the root directory of your project.

Then will create dom file for this style file. This file may be Vue, tsx, jsx, or HTML, depending on what framework your project uses and whether your project has typescript. If your project does not use React or Vue, an HTML file will be generated for you.

## Pay attention to the following points

For the case where the class is labeled at this level, you need to write it as follows

```less

.home {

  width: 100%;

  height: 100vh;

  text-align: center;

  .title {

    font-size: 18px;

    font-weight: bold;

    //&.active{

    //  color: red;

    //}

    &.self-active{  // Mark this level with 'self'

      color: red;

    }

    & > img {

      width: 32px;

      height: 32px;

      transition: transform 0.3s ease-in-out;

      &:hover {

        transform: scale(1.2);

      }

    }

    h2 {

      //&.sub-title {

      //  font-size: 14px;

      //  .sss {

      //    font-size: 57px;

      //  }

      //}

      &.self-sub-title {  // Mark this level with 'self'

        font-size: 14px;

        .sss {

          font-size: 57px;

        }

      }

    }

  }

  input[type='text'] {

    background-color: aqua;

  }

}

```

If in `vue3-ts` project, will create a `vue` file

```vue

  


    


      


        

        


      

      


      

    

  


  @import './index.scss';

```

If in `react-ts` project, will create a `tsx` file

```tsx

import React from "react";

import Style from "./index.module.scss";

export default function index() {

  return (

    


      


        


          

          


            


          

        

        


        

      

    

  );

}

```


> react-js | vue2-js | vue3-js are also supported, so I won't give an example here.

Additionally, since class selectors only generate 'div' tags, if you want to specify which tags to generate, please use tag selectors when writing style selectors.