Giter Club home page Giter Club logo

css-converter's Introduction

CSS to SASS and Stylus converter for Sublime Text 3

5k

STOP WASTING YOUR TIME removing brackets, semicolons and formating any css inserted from your browser to Sublime Text.

![Example usage] (https://habrastorage.org/files/1cc/aa6/0bb/1ccaa60bb0924c8b8976b99acf0e5fd9.gif)

You could also copy something like this:

{
  display: block;
  color: #ffffff;
}

And plugin will transform it to:

display: block
color: #ffffff

Features

  • works without any gems or npm packages
  • supports nested selectors
  • unprefixing (comming soon)

Installation

via Package Control

  • Open the Command Pallete (ctrl+shift+P or cmd+shift+P);
  • Type "Install Package"
  • Type "css to sass converter" and hit return.

Configuration options

colon

Default: true. Add semicolon after property name or not. Makes sense only for stylus.

Default key bindings

Ctrl+V on Windows/Linux

Cmd+V on OS X

css-converter's People

Contributors

faergeek avatar lnikell avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

css-converter's Issues

@keyframes and @media conversion bug

keyframes

This code

@keyframes remodal-opening-keyframes {
  from {
    transform: scale(1.05);

    opacity: 0;
  }
  to {
    transform: none;

    opacity: 1;
  }
}

@keyframes remodal-closing-keyframes {
  from {
    transform: scale(1);

    opacity: 1;
  }
  to {
    transform: scale(0.95);

    opacity: 0;
  }
}

@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

Converts to

    to
        transform none
        opacity 1
        transform scale(0.95)
        opacity 0
        opacity 1
        opacity 0

    @keyframes
        remodal-opening-keyframes
            from {
    transform scale(1.05)
            opacity 0

    }
        @keyframes
            remodal-overlay-closing-keyframes
                from {
    opacity 1
            remodal-closing-keyframes
                from {
    transform scale(1)
                opacity 1
            remodal-overlay-opening-keyframes
                from {
    opacity 0

Media

This code

@media only screen and (min-width: 641px) {
  .remodal {
    max-width: 700px;
  }
}

Converts to

    @media
        only
            screen
                and
                    (min-width
                        &:
                            641px)
                                .remodal {
    max-width 700px

My config, system, sublime

{
    "colon": false
}

Windows 7 x64

Sublime Text 3 build 3103 x64

Option for leaving away colons (not semicolons)

In stylus, you don't even need the colons in between the key and values. So

body
  background red
  padding 30px

would be valid code. It would be nice if you could add an option to turn them of in the converted code.

Colon issue

Is there a known bug for the colon: false user setting?

I'm not a Stylus author so this plugin ends up being a net time consumer after I restore the semi colons

Configuration

Few points:

  • I think it doesn't make sense to remove/replace colon at all if it's sass file.
  • Setting custom string to replace colon is weird, so it should be boolean.
  • Also it's spelled incorrectly, it's colon, not semicolon.
  • Ideally we should get indentation and eol from view.
  • And finally I guess there's no need for option prefixing as they are in separate file (not so sure, though).

So I think config should look something like this:

{
  "stylus_colon": true
}

What do you think about it?

base 64encode bag

copy

cursor url('data:image/png;base64,iVBORw0KGg...')

result paste

cursor url('data:image/pngbase64,iVBORw0KGg...')

bag: png;base64
-----------โ†‘

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.