├── .bowerrc ├── .editorconfig ├── .gitignore ├── README.md ├── bower.json ├── index.html └── src ├── my-element.css ├── my-element.html └── my-element.less /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "components" 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # http://editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | # Change these settings to your own preference 9 | indent_style = space 10 | indent_size = 4 11 | 12 | # We recommend you to keep these unchanged 13 | end_of_line = lf 14 | charset = utf-8 15 | trim_trailing_whitespace = true 16 | insert_final_newline = true 17 | 18 | [*.md] 19 | trim_trailing_whitespace = false 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | components/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Less](http://lesscss.org/) + [Polymer](http://www.polymer-project.org/) 2 | 3 | ![Less + Polymer](https://cloud.githubusercontent.com/assets/398893/3542417/b6c0e0ae-0856-11e4-97e4-eca788ad9729.jpg) 4 | 5 | > A demo of interoperability between [Less](http://lesscss.org/) and [Polymer](http://www.polymer-project.org/). 6 | 7 | ## Getting started 8 | 9 | In order to run it locally you'll need to fetch some dependencies using [npm](https://www.npmjs.org/). 10 | 11 | * Install [Bower](http://bower.io/): 12 | 13 | ```sh 14 | $ [sudo] npm install -g bower 15 | ``` 16 | 17 | * Install [Less](http://lesscss.org//): 18 | 19 | ```sh 20 | $ [sudo] npm install -g less 21 | ``` 22 | 23 | * Install local dependencies: 24 | 25 | ```sh 26 | $ bower install 27 | ``` 28 | 29 | * Invoke the compiler to output the CSS file: 30 | 31 | ```sh 32 | $ lessc src/my-element.less > src/my-element.css 33 | ``` 34 | 35 | ## Contributing 36 | 37 | 1. Fork it! 38 | 2. Create your feature branch: `git checkout -b my-new-feature` 39 | 3. Commit your changes: `git commit -m 'Add some feature'` 40 | 4. Push to the branch: `git push origin my-new-feature` 41 | 5. Submit a pull request :D 42 | 43 | ## History 44 | 45 | For detailed changelog, check [Releases](https://github.com/webcomponents/less-interop/releases). 46 | 47 | ## License 48 | 49 | [MIT License](http://webcomponentsorg.mit-license.org/) © WebComponents.org 50 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "less-interop", 4 | "dependencies": { 5 | "polymer": "Polymer/polymer#^1.0.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Less + Polymer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Polymer Less

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/my-element.css: -------------------------------------------------------------------------------- 1 | :host { 2 | color: red; 3 | font-size: 1.5em; 4 | -webkit-transform: scale(0.9); 5 | -moz-transform: scale(0.9); 6 | -ms-transform: scale(0.9); 7 | -o-transform: scale(0.9); 8 | transform: scale(0.9); 9 | -webkit-animation: pulse 0.5s 0 infinite alternate-reverse; 10 | -moz-animation: pulse 0.5s 0 infinite alternate-reverse; 11 | -ms-animation: pulse 0.5s 0 infinite alternate-reverse; 12 | -o-animation: pulse 0.5s 0 infinite alternate-reverse; 13 | animation: pulse 0.5s 0 infinite alternate-reverse; 14 | } 15 | @-webkit-keyframes pulse { 16 | to { 17 | -webkit-transform: scale(1.4); 18 | -moz-transform: scale(1.4); 19 | -ms-transform: scale(1.4); 20 | -o-transform: scale(1.4); 21 | transform: scale(1.4); 22 | } 23 | } 24 | @-moz-keyframes pulse { 25 | to { 26 | -webkit-transform: scale(1.4); 27 | -moz-transform: scale(1.4); 28 | -ms-transform: scale(1.4); 29 | -o-transform: scale(1.4); 30 | transform: scale(1.4); 31 | } 32 | } 33 | @-ms-keyframes pulse { 34 | to { 35 | -webkit-transform: scale(1.4); 36 | -moz-transform: scale(1.4); 37 | -ms-transform: scale(1.4); 38 | -o-transform: scale(1.4); 39 | transform: scale(1.4); 40 | } 41 | } 42 | @-o-keyframes pulse { 43 | to { 44 | -webkit-transform: scale(1.4); 45 | -moz-transform: scale(1.4); 46 | -ms-transform: scale(1.4); 47 | -o-transform: scale(1.4); 48 | transform: scale(1.4); 49 | } 50 | } 51 | @keyframes pulse { 52 | to { 53 | -webkit-transform: scale(1.4); 54 | -moz-transform: scale(1.4); 55 | -ms-transform: scale(1.4); 56 | -o-transform: scale(1.4); 57 | transform: scale(1.4); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/my-element.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /src/my-element.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | 3 | .animation (@name, @duration: 300ms, @delay: 0, @ease: ease) { 4 | -webkit-animation: @name @duration @delay @ease; 5 | -moz-animation: @name @duration @delay @ease; 6 | -ms-animation: @name @duration @delay @ease; 7 | -o-animation: @name @duration @delay @ease; 8 | animation: @name @duration @delay @ease; 9 | } 10 | 11 | .scale (@factor) { 12 | -webkit-transform: scale(@factor); 13 | -moz-transform: scale(@factor); 14 | -ms-transform: scale(@factor); 15 | -o-transform: scale(@factor); 16 | transform: scale(@factor); 17 | } 18 | 19 | .scale-anim () { 20 | to { .scale(1.4); } 21 | } 22 | 23 | // Definitions 24 | 25 | :host { 26 | color: red; 27 | font-size: 1.5em; 28 | .scale(0.9); 29 | .animation(pulse, 0.5s, 0, infinite alternate-reverse); 30 | } 31 | 32 | @-webkit-keyframes pulse { .scale-anim; } 33 | @-moz-keyframes pulse { .scale-anim; } 34 | @-ms-keyframes pulse { .scale-anim; } 35 | @-o-keyframes pulse { .scale-anim; } 36 | @keyframes pulse { .scale-anim; } 37 | --------------------------------------------------------------------------------