Giter Club home page Giter Club logo

css-extended's Introduction

CSS Extended Completions

###Sublime Text 2/3


####Issue Reporting

Please include the following information when submitting a ticket

  • Sublime Text version
  • OS
  • any related error that you can find in the Sublime Text console (ctrl+`) if no related error is found please state that you saw no errors in the console.

This plug-in is beta quality so please file any issues you run into here: https://github.com/subhaze/CSS-Extended/issues?state=open


###Features

  • CSS class completions within HTML class attributes (class="|") and CSS files
  • ID completions within HTML id attributes (id="|") and CSS files
  • LESS variable and mixin completions (with parametric tab-stops)
  • SCSS variable and mixin completions (with parametric tab-stops)
  • element completions within CSS files
  • pseudo selector completions within CSS files
  • font stack completions within the font-family: property
  • a more up-to-date property/value completion list within CSS files
  • parse linked style sheets in HTML files, can be disabled via index_linked_style_sheets setting

###Usage

Load Files From Side Bar Menu

You can add files from the side bar, just right click on a folder and select the type of files you'd like to load via CSS Extended Completions > [file type(s)]

This is not a recursive process, so, only the immediate files in the folder are processed, the subfolders are not processed.


####Cache On Save

Caches completions on document save.

  • If the document is a .css file (stand alone file) it will add any symbols that are found to the main project index.

  • If the document is a .html/.php/etc... it will parse that file and extract any classes/IDs found within style tags and only show you those completions within that file, plus any from the main project cache.


####Loading External Files

You can eager load files from folders outside of your project via load_external_files setting.

Example: "load_external_files": ["/abs/path/to/css/*.css", "/abs/path/to/less/*.less"]


####Deleting Cache File

You can delete the cache via the command palette CSS Completions: Delete Cache


####Pruning Cache File

You can remove missing/moved files from the cache via the command palette CSS Completions: Prune Cache


####Property/Value Completions

property/value completions such as box-sizing, additional font names for font-family, animation, flex-box, etc...


Emmet Support

Emmet support is enabled by default, you just need to add the following to your User Settings:

"auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin, text.html.basic"

Don't have Emmet? No problem, you won't have any problems with it being enable by default.
Still want to disable Emmet support? Just set "use_emmet": false in the user's package settings or use the Use Emmet toggle from the menu Preferences > Package Settings > CSS Extended Completions


CSS Completion Examples


####Pseudo Selector Completions


Extended Property Value Completions


Class Completions Within Class Attribute


Class Completions Within CSS Scope

LESS Completion Examples


####Mixin Completions, with Parametric Mixin Tab Order

SCSS Completion Examples


####Mixin Completions, with Parametric Mixin Tab Order

css-extended's People

Contributors

justmaier avatar mrusselltombras avatar subhaze avatar

Watchers

 avatar  avatar

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.