├── .bowerrc ├── .gitignore ├── .jshintignore ├── .jshintrc ├── CHANGELOG.md ├── Gruntfile.js ├── README.md ├── TODO.md ├── bower.json ├── component.json ├── doc ├── less.md ├── sass.md └── styl.md ├── fragment ├── foot.html └── head.html ├── images ├── 1x.png ├── 2x.png ├── bg.jpg ├── grayscale.jpeg ├── icon.png └── taobao.png ├── index.less ├── index.scss ├── index.styl ├── package.json ├── src ├── x-animation │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-appearance │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-backface-visibility │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-background-clip │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-background-origin │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-background-retina │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-background-size │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-border-radius │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-border-triangle │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-box-shadow │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-box-sizing │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-clearfix │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-font-face │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-grayscale │ ├── example.html │ ├── example.style │ ├── gray.svg │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-hyphens │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-inline-block │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-linear-gradient │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-min-height │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-opacity │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-perspective-origin │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-perspective │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-placeholder │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-radial-gradient │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-text-overflow │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-transform-origin │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-transform-style │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-transform │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── x-transition │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template └── x-user-select │ ├── example.html │ ├── example.style │ ├── mixin.less │ ├── mixin.scss │ ├── mixin.styl │ └── readme.template ├── tasks ├── add │ ├── example.html.handlebars │ ├── example.style.handlebars │ ├── index.js │ ├── mixin.handlebars │ └── readme.handlebars ├── generate │ └── index.js └── version │ └── index.js └── test ├── less ├── demo.css └── demo.html ├── sass ├── demo.css └── demo.html └── styl ├── demo.css └── demo.html /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "analytics": true 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .sass-cache 3 | npm-debug.log 4 | *.swp -------------------------------------------------------------------------------- /.jshintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "asi": false, 3 | "curly": true, 4 | "es3": true, 5 | "latedef": "nofunc", 6 | "eqeqeq": false, 7 | "noarg": true, 8 | "noempty": true, 9 | "undef": true, 10 | "unused": true, 11 | "debug": false, 12 | "evil": false, 13 | "globalstrict": false, 14 | "loopfunc": false, 15 | "proto": false, 16 | "scripturl": true, 17 | "supernew": false, 18 | "freeze": true, 19 | "indent": 4, 20 | "camelcase": true, 21 | "multistr": true, 22 | "sub": true, 23 | "expr": true, 24 | "maxdepth": 3, 25 | "browser": true, 26 | "devel": false, 27 | "node": true, 28 | "globals": { 29 | "KISSY": true, 30 | "JSTracker": true, 31 | "TB": true, 32 | "goldlog": true, 33 | "alert": true 34 | }, 35 | "-W044": true 36 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### v0.5.0 2 | 3 | | mixin name | IE | Chrome | Safari | Firefox | Opera | IOS 4 | |:----:|:----:|:----:|:----:|:----:|:----:|:----:| 5 | |x-backface-visibility | 10+ | √ | √ | √ | √ | X | 6 | |x-perspective | 10+ | √ | √ | √ | √ | √ | 7 | |x-perspective-origin | 10+ | √ | √ | √ | √ | √ | 8 | |x-transform-origin | 9+ | √ | √ | √ | √ | √ | 9 | |x-transform-style | X | √ | √ | √ | √ | √ | 10 | |x-radial-gradient | 10+ | √ | √ | √ | √ | √ | 11 | 12 |
13 | 14 | ### v0.4.0 15 | 16 | | mixin name | IE | Chrome | Safari | Firefox | Opera | IOS 17 | |:----:|:----:|:----:|:----:|:----:|:----:|:----:| 18 | |x-appearance | X | √ | √ | √ | √ | √ | 19 | |x-background-retina | 6+ | √ | √ | √ | √ | √ | 20 | |x-background-clip | 9+ | √ | √ | √ | √ | √ | 21 | |x-background-origin | 9+ | √ | √ | √ | √ | √ | 22 | |x-background-size | 9+ | √ | √ | √ | √ | √ | 23 | |x-hyphens | 6+ | √ | √ | √ | √ | √ | 24 | |x-placeholder | 10+ | √ | √ | √ | √ | √ | 25 | |x-user-select | 10+ | √ | √ | √ | √ | √ | 26 | 27 |
28 | 29 | ### v0.3.0 30 | 31 | | mixin name | IE | Chrome | Safari | Firefox | Opera | IOS 32 | |:----:|:----:|:----:|:----:|:----:|:----:|:----:| 33 | |x-transform | 9+ | √ | √ | √ | √ | √ | 34 | |x-transition | 10+ | √ | √ | √ | √ | √ | 35 | |x-animation | 10+ | √ | √ | √ | √ | √ | 36 | 37 |
38 | 39 | ### v0.2.1 40 | 41 | > note：bugfix for x-linear-gradient mixin in IE6~9 42 | 43 |
44 | 45 | ### v0.2.0 46 | 47 | | mixin name | IE | Chrome | Safari | Firefox | Opera | IOS 48 | |:----:|:----:|:----:|:----:|:----:|:----:|:----:| 49 | |x-grayscale | 6~9 | √ | √ | √ | √ | √ | 50 | 51 |
52 | 53 | ### v0.1.0 54 | 55 | | mixin name | IE | Chrome | Safari | Firefox | Opera | IOS 56 | |:----:|:----:|:----:|:----:|:----:|:----:|:----:| 57 | |x-border-radius | 9+ | √ | √ | √ | √ | √ | 58 | |x-border-triangle | 6+ | √ | √ | √ | √ | √ | 59 | |x-box-shadow | 9+ | √ | √ | √ | √ | √ | 60 | |x-box-sizing | 9+ | √ | √ | √ | √ | √ | 61 | |x-text-overflow | 6+ | √ | √ | √ | √ | √ | 62 | |x-clearfix | 6+ | √ | √ | √ | √ | √ | 63 | |x-min-height | 6+ | √ | √ | √ | √ | √ | 64 | |x-opacity | 6+ | √ | √ | √ | √ | √ | 65 | |x-inline-block | 6+ | √ | √ | √ | √ | √ | 66 | |x-font-face | 6+ | √ | √ | √ | √ | √ | 67 | |x-linear-gradient | 6+ | √ | √ | √ | √ | √ | 68 | 69 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | 'use strict'; 4 | 5 | var address = require('ip').address(); 6 | 7 | grunt.initConfig({ 8 | srcDir: 'src', 9 | docDir: 'doc', 10 | testDir: 'test', 11 | fragmentDir: 'fragment', 12 | 13 | outputFileName: 'index', 14 | outputLessFile: '<%= outputFileName %>.less', 15 | outputSassFile: '<%= outputFileName %>.scss', 16 | outputStylFile: '<%= outputFileName %>.styl', 17 | 18 | headFilePath: '<%= fragmentDir %>/head.html', 19 | footFilePath: '<%= fragmentDir %>/foot.html', 20 | exampleFilePath: '<%= srcDir %>/**/example', 21 | mixinDocFilePath: '<%= srcDir %>/**/readme', 22 | mixinSrcFilePath: '<%= srcDir %>/**/mixin', 23 | 24 | concat: { 25 | // generate doc 26 | doc: { 27 | options: { 28 | separator: '\r\n\r\n
\r\n\r\n' 29 | }, 30 | files: { 31 | '<%= docDir %>/less.md': ['<%= mixinDocFilePath %>.less.tmp'], 32 | '<%= docDir %>/sass.md': ['<%= mixinDocFilePath %>.scss.tmp'], 33 | '<%= docDir %>/styl.md': ['<%= mixinDocFilePath %>.styl.tmp'] 34 | } 35 | }, 36 | // generate the entrance files 37 | mixin: { 38 | options: { 39 | stripBanners: true 40 | }, 41 | files: { 42 | '<%= outputLessFile %>': ['<%= mixinSrcFilePath %>.less'], 43 | '<%= outputSassFile %>': ['<%= mixinSrcFilePath %>.scss'], 44 | '<%= outputStylFile %>': ['<%= mixinSrcFilePath %>.styl'] 45 | } 46 | }, 47 | // generate demo html 48 | demoHtml: { 49 | files: { 50 | '<%= testDir %>/less/demo.html': [ 51 | '<%= headFilePath %>', 52 | '<%= exampleFilePath %>.html', 53 | '<%= footFilePath %>' 54 | ], 55 | '<%= testDir %>/sass/demo.html': [ 56 | '<%= headFilePath %>', 57 | '<%= exampleFilePath %>.html', 58 | '<%= footFilePath %>' 59 | ], 60 | '<%= testDir %>/styl/demo.html': [ 61 | '<%= headFilePath %>', 62 | '<%= exampleFilePath %>.html', 63 | '<%= footFilePath %>' 64 | ] 65 | } 66 | }, 67 | // generate demo style 68 | demoStyle: { 69 | files: { 70 | '<%= testDir %>/less/demo.less': [ 71 | '<%= outputLessFile %>', 72 | '<%= exampleFilePath %>.less.tmp' 73 | ], 74 | '<%= testDir %>/sass/demo.scss': [ 75 | '<%= outputSassFile %>', 76 | '<%= exampleFilePath %>.scss.tmp' 77 | ], 78 | '<%= testDir %>/styl/demo.styl': [ 79 | '<%= outputStylFile %>', 80 | '<%= exampleFilePath %>.styl.tmp' 81 | ] 82 | } 83 | } 84 | }, 85 | less: { 86 | all: { 87 | src: ['<%= testDir %>/less/demo.less'], 88 | dest: '<%= testDir %>/less/demo.css' 89 | } 90 | }, 91 | sass: { 92 | all: { 93 | src: ['<%= testDir %>/sass/demo.scss'], 94 | dest: '<%= testDir %>/sass/demo.css' 95 | } 96 | }, 97 | stylus: { 98 | all: { 99 | options: { 100 | compress: false 101 | }, 102 | files: { 103 | '<%= testDir %>/styl/demo.css': ['<%= testDir %>/styl/demo.styl'] 104 | } 105 | } 106 | }, 107 | clean: { 108 | tmpFiles: [ 109 | '<%= testDir %>/less/demo.less', 110 | '<%= testDir %>/sass/demo.scss', 111 | '<%= testDir %>/styl/demo.styl', 112 | '<%= exampleFilePath %>.*.tmp', 113 | '<%= mixinDocFilePath %>.*.tmp' 114 | ] 115 | }, 116 | concurrent: { 117 | dev: { 118 | tasks: ['connect', 'watch'], 119 | options: { 120 | logConcurrentOutput: true 121 | } 122 | } 123 | }, 124 | connect: { 125 | demo: { 126 | options: { 127 | hostname: address, 128 | directory: 'test', 129 | port: '8001', 130 | debug: true, 131 | open: 'http://' + address + ':8001/test/less/demo.html', 132 | keepalive: true 133 | } 134 | } 135 | }, 136 | watch: { 137 | all: { 138 | files: [ 139 | '<%= srcDir %>/**/*', 140 | '!<%= srcDir %>/**/*.tmp', 141 | '<%= fragmentDir %>/*.html', 142 | 'tasks/*.js' 143 | ], 144 | tasks: ['default'] 145 | } 146 | }, 147 | jshint: { 148 | options: { 149 | jshintrc: true, 150 | reporter: require('jshint-stylish') // beauty jshint output 151 | }, 152 | all: ['tasks/**/*.js'] 153 | } 154 | }); 155 | 156 | require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 157 | 158 | // generate readme and example for mixin module 159 | grunt.task.loadTasks('./tasks/generate'); 160 | 161 | /** 162 | * add module 163 | * @usage grunt add:modName 164 | */ 165 | grunt.task.loadTasks('./tasks/add'); 166 | 167 | /** 168 | * set package version 169 | * @usage grunt version:x.x.x 170 | */ 171 | grunt.task.loadTasks('./tasks/version'); 172 | 173 | grunt.registerTask('default', [ 174 | 'generate', 175 | 'concat', 176 | 'less', 177 | 'sass', 178 | 'stylus', 179 | 'clean' 180 | ]); 181 | 182 | grunt.registerTask('demo', ['concurrent:dev']); 183 | 184 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![XMixins](./images/icon.png) 2 | 3 | # XMixins ![xmixins version](https://badge.fury.io/bo/xmixins.png) 4 | 5 | XMixins is a super CSS mixin library, it has five features: 6 | 7 | 1. Compatible major CSS preprocessor (LESS, SASS and Stylus) . 8 | 9 | 2. Provide the same mixin for different CSS preprocessor . 10 | 11 | 3. Full compliance with CSS3 specification (CSS3 mixins) . 12 | 13 | 4. Compatible with many terminals (desktop, tablet and mobile) . 14 | 15 | 5. Installation is very easy (compared to Compass) . 16 | 17 |
18 | 19 | ### 1. Usage 20 | 21 | (1) install: `bower install xmixins` 22 | 23 | // After installed, can generate the following files in the current directory 24 | bower_components 25 | -- xmixins 26 | -- index.less 27 | -- index.scss 28 | -- index.styl 29 | 30 | (2) import xmixins to your style file 31 | 32 | @import "bower_components/xmixins/index"; 33 | 34 |
35 | 36 | ### 2. Example 37 | 38 | Add linear gradient to the target element: 39 | 40 | // for less 41 | div { 42 | .x-linear-gradient(to bottom, #fff, #666); 43 | } 44 | 45 | // for sass 46 | div { 47 | @include x-linear-gradient(to bottom, #fff, #666); 48 | } 49 | 50 | // for stylus 51 | div { 52 | x-linear-gradient(to bottom, #fff, #666); 53 | } 54 | 55 |
56 | 57 | ### 3. Doc for mixins 58 | 59 | * [doc for less](./doc/less.md) 60 | * [doc for sass](./doc/sass.md) 61 | * [doc for stylus](./doc/styl.md) 62 | 63 |
64 | 65 | ### 4. Released mixins 66 | 67 | **(1) CSS3** 68 | 69 | | mixin name | IE | Chrome | Safari | Firefox | Opera | IOS | Android | 70 | |:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:| 71 | |x-appearance | X | √ | √ | √ | √ | √ | ? | 72 | |x-animation | 10+ | √ | √ | √ | √ | √ | ? | 73 | |x-background-clip | 9+ | √ | √ | √ | √ | √ | ? | 74 | |x-background-origin | 9+ | √ | √ | √ | √ | √ | ? | 75 | |x-background-size | 9+ | √ | √ | √ | √ | √ | ? | 76 | |x-backface-visibility | 10+ | √ | √ | √ | √ | X | ? | 77 | |x-border-radius | 9+ | √ | √ | √ | √ | √ | ? | 78 | |x-box-shadow | 9+ | √ | √ | √ | √ | √ | ? | 79 | |x-box-sizing | 9+ | √ | √ | √ | √ | √ | ? | 80 | |x-text-overflow | 6+ | √ | √ | √ | √ | √ | ? | 81 | |x-min-height | 6+ | √ | √ | √ | √ | √ | ? | 82 | |x-opacity | 6+ | √ | √ | √ | √ | √ | ? | 83 | |x-inline-block | 6+ | √ | √ | √ | √ | √ | ? | 84 | |x-font-face | 6+ | √ | √ | √ | √ | √ | ? | 85 | |x-linear-gradient | 6+ | √ | √ | √ | √ | √ | ? | 86 | |x-radial-gradient | 10+ | √ | √ | √ | √ | √ | ? | 87 | |x-transform | 9+ | √ | √ | √ | √ | √ | ? | 88 | |x-transform-origin | 9+ | √ | √ | √ | √ | √ | ? | 89 | |x-transform-style | X | √ | √ | √ | √ | √ | ? | 90 | |x-transition | 10+ | √ | √ | √ | √ | √ | ? | 91 | |x-hyphens | 6+ | √ | √ | √ | √ | √ | ? | 92 | |x-perspective | 10+ | √ | √ | √ | √ | √ | ? | 93 | |x-perspective-origin | 10+ | √ | √ | √ | √ | √ | ? | 94 | |x-user-select | 10+ | √ | √ | √ | √ | √ | ? | 95 | 96 | 97 | **(2) Utilities** 98 | 99 | | mixin name | IE | Chrome | Safari | Firefox | Opera | IOS | Android | 100 | |:----:|:----:|:----:|:----:|:----:|:----:|:----:|:----:| 101 | |x-background-retina | 6+ | √ | √ | √ | √ | √ | ? | 102 | |x-border-triangle | 6+ | √ | √ | √ | √ | √ | ? | 103 | |x-clearfix | 6+ | √ | √ | √ | √ | √ | ? | 104 | |x-grayscale | 6~9 | √ | √ | √ | √ | √ | ? | 105 | |x-placeholder | 10+ | √ | √ | √ | √ | √ | ? | 106 | 107 | -------------------------------------------------------------------------------- /TODO.md: -------------------------------------------------------------------------------- 1 | ### 0.6.0 2 | 3 | * repeating-linear-gradient 4 | * repeating-radial-gradient 5 | * display-box 6 | * box-orient 7 | * box-pack 8 | * box-align 9 | * box-flex 10 | * columns 11 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xmixins", 3 | "version": "0.5.0", 4 | "homepage": "https://github.com/mytcer/xmixins", 5 | "authors": [ 6 | "mytcer" 7 | ], 8 | "description": "A css mixin library，which compatible with less, sass and stylus ！", 9 | "main": "index.[less|scss|styl]", 10 | "keywords": [ 11 | "stylus", 12 | "less", 13 | "sass", 14 | "mixin", 15 | "css3", 16 | "css", 17 | "compass", 18 | "bower", 19 | "component" 20 | ], 21 | "license": "MIT", 22 | "ignore": [ 23 | "**/.*", 24 | "node_modules", 25 | "bower_components", 26 | "test", 27 | "tests", 28 | "tmp", 29 | "src", 30 | "doc", 31 | "tasks", 32 | "fragment", 33 | "images", 34 | ".bowerrc", 35 | ".jshintrc", 36 | ".jshintignore", 37 | ".gitignore", 38 | ".sass-cache", 39 | "bower.json", 40 | ".bower.json", 41 | "component.json", 42 | "package.json", 43 | "npm-debug.log", 44 | "Gruntfile.js", 45 | "CHANGELOG.md", 46 | "README.md", 47 | "TODO.md" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xmixins", 3 | "repo": "mytcer/xmixins", 4 | "version": "0.5.0", 5 | "styles": [ 6 | "index.less", 7 | "index.scss", 8 | "index.styl" 9 | ], 10 | "keywords": [ 11 | "stylus", 12 | "less", 13 | "sass", 14 | "mixin", 15 | "css3", 16 | "css", 17 | "compass", 18 | "bower", 19 | "component" 20 | ], 21 | "author": "mytcer", 22 | "license": "MIT" 23 | } 24 | -------------------------------------------------------------------------------- /doc/less.md: -------------------------------------------------------------------------------- 1 | ### **x-animation** 2 | 3 | > Description：css3 animation 4 | 5 | **1. usage** 6 | 7 | syntax：.x-animation(@value); 8 | 9 | params： 10 | 11 | * @value --- the composition of the value： 12 | 13 | * animation-name 14 | 15 | * animation-duration 16 | 17 | * animation-timing-function 18 | 19 | * animation-delay 20 | 21 | * animation-iteration-count 22 | 23 | * animation-direction 24 | 25 | note：the default value is "none 0 ease 0 1 normal" 26 | 27 | **2. example** 28 | 29 | div { 30 | .x-animation(test 3s ease); 31 | } 32 | 33 | **3. source** 34 | 35 | * [http://css-tricks.com/almanac/properties/a/animation/](http://css-tricks.com/almanac/properties/a/animation/) 36 | 37 | 38 |
39 | 40 | ### **x-appearance** 41 | 42 | > Description：css3 appearance 43 | 44 | **1. usage** 45 | 46 | syntax：.x-appearance(@value); 47 | 48 | params： 49 | 50 | * @value --- The available value：http://css-tricks.com/almanac/properties/a/appearance/ 51 | 52 | **2. example** 53 | 54 | div { 55 | .x-appearance(button); 56 | } 57 | 58 | **3. source** 59 | 60 | * [http://css-tricks.com/almanac/properties/a/appearance/](http://css-tricks.com/almanac/properties/a/appearance/) 61 | 62 | 63 |
64 | 65 | ### **x-backface-visibility** 66 | 67 | > Description：Hidden the back of the rotating element . 68 | 69 | **1. usage** 70 | 71 | syntax：.x-backface-visibility(@value); 72 | 73 | params： 74 | 75 | * @value --- visible（default value）| hidden 76 | 77 | note：This is useful to avoid flicker when doing 3D effects . 78 | 79 | **2. example** 80 | 81 | div { 82 | .x-backface-visibility(hidden); 83 | } 84 | 85 | **3. source** 86 | 87 | * [http://css-tricks.com/almanac/properties/b/backface-visibility/](http://css-tricks.com/almanac/properties/b/backface-visibility/) 88 | * [http://www.w3school.com.cn/cssref/pr_backface-visibility.asp](http://www.w3school.com.cn/cssref/pr_backface-visibility.asp) 89 | 90 | 91 | 92 |
93 | 94 | ### **x-background-clip** 95 | 96 | > Description：css3 background-clip 97 | 98 | **1. usage** 99 | 100 | syntax：.x-background-clip(@mode); 101 | 102 | params： 103 | 104 | * @mode --- border-box（default value） | padding-box | content-box 105 | 106 | **2. example** 107 | 108 | div { 109 | .x-background-clip(content-box); 110 | } 111 | 112 | **3. source** 113 | 114 | * [http://www.w3school.com.cn/cssref/pr_background-clip.asp](http://www.w3school.com.cn/cssref/pr_background-clip.asp) 115 | * [http://css-tricks.com/transparent-borders-with-background-clip/](http://css-tricks.com/transparent-borders-with-background-clip/) 116 | 117 | 118 |
119 | 120 | ### **x-background-origin** 121 | 122 | > Description：css3 background-origin 123 | 124 | **1. usage** 125 | 126 | syntax：.x-background-origin(@mode); 127 | 128 | params： 129 | 130 | * @mode --- border-box（default value） | padding-box | content-box 131 | 132 | **2. example** 133 | 134 | div { 135 | .x-background-origin(content-box); 136 | } 137 | 138 | **3. source** 139 | 140 | * [http://www.w3school.com.cn/cssref/pr_background-origin.asp](http://www.w3school.com.cn/cssref/pr_background-origin.asp) 141 | 142 | 143 |
144 | 145 | ### **x-background-retina** 146 | 147 | > Description：background image support retina screen . 148 | 149 | **1. usage** 150 | 151 | syntax：.x-background-retina(@img_1x, @img_2x, @width_1x, @height_1x); 152 | 153 | params： 154 | 155 | * @img_1x --- 1x background image url, 156 | 157 | * @img_2x --- 2x background image url, 158 | 159 | * @width_1x --- 1x background image width 160 | 161 | * @height_1x --- 1x background image height 162 | 163 | **2. example** 164 | 165 | div { 166 | .x-background-retina("1x.png", "2x.png", 24px, 24px); 167 | } 168 | 169 | 170 |
171 | 172 | ### **x-background-size** 173 | 174 | > Description：css3 background-size 175 | 176 | **1. usage** 177 | 178 | syntax：.x-background-size(@size); 179 | 180 | params： 181 | 182 | * @size --- auto（default value）| length | percentage | cover | contain 183 | 184 | **2. example** 185 | 186 | div { 187 | .x-background-size(50% 50%); 188 | } 189 | 190 | **3. source** 191 | 192 | * [http://www.css3.info/preview/background-size/](http://www.css3.info/preview/background-size/) 193 | * [http://www.w3school.com.cn/cssref/pr_background-size.asp](http://www.w3school.com.cn/cssref/pr_background-size.asp) 194 | 195 | 196 |
197 | 198 | ### **x-border-radius** 199 | 200 | > Description：css3 border-radius 201 | 202 | **1. usage** 203 | 204 | syntax：.x-border-radius(@radius, @direction); 205 | 206 | params： 207 | 208 | * @direction --- all (default value) | top | left | bottom | left 209 | 210 | **2. example** 211 | 212 | div { 213 | .x-border-radius(3px); // set all corners 214 | } 215 | 216 | div { 217 | .x-border-radius(3px, top); // set topleft and topright corners 218 | } 219 | 220 | div { 221 | .x-border-radius(3px, right); // set topright and bottomright corners 222 | } 223 | 224 | div { 225 | .x-border-radius(3px, bottom); // set bottomleft and bottomright corners 226 | } 227 | 228 | div { 229 | .x-border-radius(3px, left); // set topleft and bottomleft corners 230 | } 231 | 232 | **3. source** 233 | 234 | * [http://css-tricks.com/almanac/properties/b/border-radius/](http://css-tricks.com/almanac/properties/b/border-radius/) 235 | 236 | 237 |
238 | 239 | ### **x-border-triangle** 240 | 241 | > Description：border triangle 242 | 243 | **1. usage** 244 | 245 | syntax：.x-border-triangle(@borderWidth, @borderColor, @direction); 246 | 247 | params： 248 | 249 | * @borderWidth --- etc, 5px 250 | 251 | * @borderColor --- etc, #666 252 | 253 | * @direction --- top | right | bottom | left | topleft | topright | bottomleft | bottomright 254 | 255 | **2. example** 256 | 257 | div { 258 | .x-border-triangle(5px, #666, top); 259 | } 260 | 261 | **3. source** 262 | 263 | * [http://css-tricks.com/examples/ShapesOfCSS/](http://css-tricks.com/examples/ShapesOfCSS/) 264 | 265 | 266 |
267 | 268 | ### **x-box-shadow** 269 | 270 | > Description：css3 box-shadow 271 | 272 | **1. usage** 273 | 274 | syntax：.x-box-shadow(@params); 275 | 276 | **2. example** 277 | 278 | div { 279 | .x-box-shadow(5px 5px 3px #000); 280 | } 281 | 282 | **3. source** 283 | 284 | * [http://css-tricks.com/snippets/css/css-box-shadow/](http://css-tricks.com/snippets/css/css-box-shadow/) 285 | 286 | 287 |
288 | 289 | ### **x-box-sizing** 290 | 291 | > Description：css3 box-sizing 292 | 293 | **1. usage** 294 | 295 | syntax：.x-box-sizing(@model); 296 | 297 | params： 298 | 299 | * @model --- content-box | border-box | inherit 300 | 301 | **2. example** 302 | 303 | div { 304 | .x-box-sizing(border-box); 305 | } 306 | 307 | **3. source** 308 | 309 | * [http://css-tricks.com/box-sizing/](http://css-tricks.com/box-sizing/) 310 | 311 | 312 |
313 | 314 | ### **x-clearfix** 315 | 316 | > Description：clear float 317 | 318 | **1. usage** 319 | 320 | syntax：.x-clearfix(); 321 | 322 | **2. example** 323 | 324 | div { 325 | .x-clearfix(); 326 | } 327 | 328 | **3. source** 329 | 330 | * [http://css-tricks.com/snippets/css/clear-fix/](http://css-tricks.com/snippets/css/clear-fix/) 331 | 332 | 333 |
334 | 335 | ### **x-font-face** 336 | 337 | > Description：css3 @font-face 338 | 339 | **1. usage** 340 | 341 | syntax：.x-font-face(@fontName, @fontUrl); // note：font url without a file extension 342 | 343 | **2. example** 344 | 345 | .x-font-face('iconfont', 'http://x.cdn.com/iconfont'); 346 | 347 | div { 348 | font-family: 'iconfont'; 349 | } 350 | 351 | **3. source** 352 | 353 | * [http://css-tricks.com/snippets/css/using-font-face/](http://css-tricks.com/snippets/css/using-font-face/) 354 | 355 | 356 | 357 |
358 | 359 | ### **x-grayscale** 360 | 361 | > Description：turn colour image into gray . 362 | 363 | **1. usage** 364 | 365 | syntax：.x-grayscale(); 366 | 367 | **2. example** 368 | 369 | img { 370 | .x-grayscale(); // colour image into a gray image 371 | } 372 | 373 | **3. source** 374 | 375 | * [http://css-tricks.com/snippets/css/forcing-grayscale-printing/](http://css-tricks.com/snippets/css/forcing-grayscale-printing/) 376 | 377 | 378 |
379 | 380 | ### **x-hyphens** 381 | 382 | > Description：css3 hyphens 383 | 384 | **1. usage** 385 | 386 | syntax：.x-hyphens(@mode); 387 | 388 | params： 389 | 390 | * @mode --- none | manual | auto（default value） 391 | 392 | **2. example** 393 | 394 | div { 395 | .x-hyphens(); 396 | } 397 | 398 | **3. source** 399 | 400 | * [http://css-tricks.com/almanac/properties/h/hyphenate/](http://css-tricks.com/almanac/properties/h/hyphenate/) 401 | 402 | 403 |
404 | 405 | ### **x-inline-block** 406 | 407 | > Description：inline-block 408 | 409 | **1. usage** 410 | 411 | syntax：.x-inline-block(); 412 | 413 | **2. example** 414 | 415 | div { 416 | .x-inline-block(); 417 | } 418 | 419 | **3. source** 420 | 421 | * [http://css-tricks.com/snippets/css/cross-browser-inline-block/](http://css-tricks.com/snippets/css/cross-browser-inline-block/) 422 | 423 | 424 |
425 | 426 | ### **x-linear-gradient** 427 | 428 | > Description：CSS3 linear-gradient 429 | 430 | **1. usage** 431 | 432 | syntax：.x-linear-gradient(...); 433 | 434 | params： 435 | 436 | * ... --- [ | to ]?, 437 | 438 | * ：such as 45deg 439 | 440 | > Note: The IE6~9 only support "0deg, 90deg, 180deg, 270deg" . 441 | 442 | * to ：to [left | right] || [top | bottom], default is "to bottom" 443 | 444 | > Note：The IE6~9 noly support "to top, to right, to bottom, to left" . 445 | 446 | * ：color [length | %]? [, color [length | %]?]* 447 | 448 | > Note: The IE6~9 only support set two color value . 449 | 450 | **2. example** 451 | 452 | div { 453 | .x-linear-gradient(to bottom, #000, #fff); 454 | } 455 | div { 456 | .x-linear-gradient(90deg, #000 30%, #fff 60%); 457 | } 458 | 459 | **3. source** 460 | 461 | * [http://css-tricks.com/css3-gradients/](http://css-tricks.com/css3-gradients/) 462 | * [https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient) 463 | * [http://dev.w3.org/csswg/css-images-3/#funcdef-linear-gradient](http://dev.w3.org/csswg/css-images-3/#funcdef-linear-gradient) 464 | 465 | 466 |
467 | 468 | ### **x-min-height** 469 | 470 | > Description：min-height 471 | 472 | **1. usage** 473 | 474 | syntax：.x-min-height(@height); 475 | 476 | **2. example** 477 | 478 | div { 479 | .x-min-height(100px); 480 | } 481 | 482 | **3. source** 483 | 484 | * [http://css-tricks.com/snippets/css/cross-browser-min-height/#comment-100802](http://css-tricks.com/snippets/css/cross-browser-min-height/#comment-100802) 485 | 486 | 487 |
488 | 489 | ### **x-opacity** 490 | 491 | > Description：opacity 492 | 493 | **1. usage** 494 | 495 | syntax：.x-opacity(@opacity); 496 | 497 | **2. example** 498 | 499 | div { 500 | .x-opacity(0.5); 501 | } 502 | 503 | **3. source** 504 | 505 | * [http://css-tricks.com/almanac/properties/o/opacity/](http://css-tricks.com/almanac/properties/o/opacity/) 506 | 507 | 508 |
509 | 510 | ### **x-perspective-origin** 511 | 512 | > Description：Determines the origin for the perspective property（Actually set the X axis and Y axis position）. 513 | 514 | **1. usage** 515 | 516 | syntax：.x-perspective-origin(@origin); 517 | 518 | params： 519 | 520 | * @origin --- left|center|right|length|% top|center|bottom|length|% 521 | 522 | note： 523 | 524 | * The default value is "50% 50%" . 525 | 526 | * Must use with the perspective property . 527 | 528 | **2. example** 529 | 530 | div { 531 | .x-perspective(100px); 532 | .x-perspective-origin(top left); 533 | } 534 | 535 | **3. source** 536 | 537 | * [http://css-tricks.com/almanac/properties/p/perspective-origin/](http://css-tricks.com/almanac/properties/p/perspective-origin/) 538 | * [http://www.w3cplus.com/css3/transform-basic-property.html](http://www.w3cplus.com/css3/transform-basic-property.html) 539 | 540 | 541 | 542 |
543 | 544 | ### **x-perspective** 545 | 546 | > Description：Gives an element a 3D-space by affecting the distance between the Z plane and the user. 547 | 548 | **1. usage** 549 | 550 | syntax：.x-perspective(@value); 551 | 552 | params： 553 | 554 | * @value --- none（default value）| length 555 | 556 | **2. example** 557 | 558 | div { 559 | .x-perspective(500px); 560 | } 561 | 562 | **3. source** 563 | 564 | * [http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/](http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/) 565 | * [http://css-tricks.com/almanac/properties/p/perspective/](http://css-tricks.com/almanac/properties/p/perspective/) 566 | * [http://www.w3cplus.com/css3/transform-basic-property.html](http://www.w3cplus.com/css3/transform-basic-property.html) 567 | 568 | 569 | 570 |
571 | 572 | ### **x-placeholder** 573 | 574 | > Description：set placeholder text color . 575 | 576 | **1. usage** 577 | 578 | syntax：.x-placeholder(@color); 579 | 580 | params： 581 | 582 | * @color --- The placeholder text's color 583 | 584 | **2. example** 585 | 586 | input { 587 | .x-placeholder(red); 588 | } 589 | 590 | **3. source** 591 | 592 | * [http://css-tricks.com/almanac/selectors/p/placeholder/](http://css-tricks.com/almanac/selectors/p/placeholder/) 593 | * [https://github.com/twbs/bootstrap/pull/11526](https://github.com/twbs/bootstrap/pull/11526) 594 | 595 | 596 |
597 | 598 | ### **x-radial-gradient** 599 | 600 | > Description：CSS3 radial gradient 601 | 602 | **1. usage** 603 | 604 | syntax：.x-radial-gradient(...); 605 | 606 | params： 607 | 608 | * ... --- [ | ]? [at ]?, 609 | 610 | * ：circle | ellipse | [length | %]{1,2} ，default to circle 611 | 612 | * ：closest-side | closest-corner | farthest-side | farthest-corner | length | [length | %]{2}，default to farthest-corner 613 | 614 | * ： [length | % | left | center | right ]? [length> | % | top | center | bottom ]?，default to center 615 | 616 | * [color-stop-list]：color [length | %]? [, color [length | %]?]* 617 | 618 | **2. example** 619 | 620 | div { 621 | .x-radial-gradient(circle, red, green); 622 | } 623 | 624 | **3. source** 625 | 626 | * [http://www.w3cplus.com/css3/new-css3-radial-gradient.html](http://www.w3cplus.com/css3/new-css3-radial-gradient.html) 627 | * [http://dev.w3.org/csswg/css-images-3/#radial-gradients](http://dev.w3.org/csswg/css-images-3/#radial-gradients) 628 | 629 | 630 | 631 |
632 | 633 | ### **x-text-overflow** 634 | 635 | > Description：text-overflow 636 | 637 | **1. usage** 638 | 639 | syntax：.x-text-overflow(@cutway); 640 | 641 | params： 642 | 643 | * @cutway --- ellipsis | clip (default value) 644 | 645 | **2. example** 646 | 647 | div { 648 | .x-text-overflow(ellipsis); 649 | } 650 | 651 | **3. source** 652 | 653 | * [http://css-tricks.com/almanac/properties/t/text-overflow/](http://css-tricks.com/almanac/properties/t/text-overflow/) 654 | 655 | 656 |
657 | 658 | ### **x-transform-origin** 659 | 660 | > Description：lets you modify the origin for transformations of an element. 661 | 662 | **1. usage** 663 | 664 | syntax：.x-transform-origin(@value); 665 | 666 | params： 667 | 668 | * @value --- x-offset y-offset z-offset 669 | 670 | * x-offset --- left|center|right|length|% 671 | 672 | * y-offset --- top|center|bottom|length|% 673 | 674 | * z-offset --- length 675 | 676 | The default value is：50% 50% 0 677 | 678 | **2. example** 679 | 680 | div { 681 | .x-transform-origin(top left); 682 | } 683 | 684 | **3. source** 685 | 686 | * [http://www.w3school.com.cn/cssref/pr_transform-origin.asp](http://www.w3school.com.cn/cssref/pr_transform-origin.asp) 687 | * [http://css-tricks.com/almanac/properties/t/transform-origin/](http://css-tricks.com/almanac/properties/t/transform-origin/) 688 | 689 | 690 | 691 |
692 | 693 | ### **x-transform-style** 694 | 695 | > Description：determines the element's children are positioned in 3D space, or flattened. 696 | 697 | **1. usage** 698 | 699 | syntax：.x-transform-style(@value); 700 | 701 | params： 702 | 703 | * @value --- flat | preserve-3d， 704 | 705 | **2. example** 706 | 707 | div { 708 | .x-transform-style(preserve-3d); 709 | } 710 | 711 | **3. source** 712 | 713 | * [http://www.w3school.com.cn/cssref/pr_transform-style.asp](http://www.w3school.com.cn/cssref/pr_transform-style.asp) 714 | * [http://css-tricks.com/almanac/properties/t/transform-style/](http://css-tricks.com/almanac/properties/t/transform-style/) 715 | 716 | 717 | 718 |
719 | 720 | ### **x-transform** 721 | 722 | > Description：css3 transform 723 | 724 | **1. usage** 725 | 726 | syntax：.x-transform(@value); 727 | 728 | params： 729 | 730 | * @value --- transform-functions | none（default value） 731 | 732 | **2. example** 733 | 734 | div { 735 | .x-transform(rotate(20deg)); 736 | } 737 | 738 | **3. source** 739 | 740 | * [The available transform functions](http://www.w3school.com.cn/cssref/pr_transform.asp) 741 | 742 | 743 | 744 |
745 | 746 | ### **x-transition** 747 | 748 | > Description：css3 transition 749 | 750 | **1. usage** 751 | 752 | syntax：.x-transition(@value); 753 | 754 | params： 755 | 756 | * @value --- the composition of the value： 757 | 758 | * transition-property 759 | 760 | * transition-duration 761 | 762 | * transition-timing-function 763 | 764 | * transition-delay 765 | 766 | note：the default value is "all 0 ease 0" 767 | 768 | **2. example** 769 | 770 | div { 771 | height: 100px; 772 | .x-transition(height 2s ease); 773 | } 774 | div:hover { 775 | height: 300px; 776 | } 777 | 778 | **3. source** 779 | 780 | * [http://css-tricks.com/almanac/properties/t/transition/](http://css-tricks.com/almanac/properties/t/transition/) 781 | 782 | 783 | 784 |
785 | 786 | ### **x-user-select** 787 | 788 | > Description：css3 user-select 789 | 790 | **1. usage** 791 | 792 | syntax：.x-user-select(@mode); 793 | 794 | params： 795 | 796 | * @mode --- none | text（default value）| toggle | element | elements | all | inherit 797 | 798 | note： 799 | 800 | * In addition to “none" and "text", other value has compatibility problems. 801 | 802 | **2. example** 803 | 804 | div { 805 | .x-user-select(); 806 | } 807 | 808 | **3. source** 809 | 810 | * [http://css-tricks.com/almanac/properties/u/user-select/](http://css-tricks.com/almanac/properties/u/user-select/) 811 | * [https://developer.mozilla.org/en-US/docs/Web/CSS/user-select](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) 812 | * [http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select](http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select) 813 | -------------------------------------------------------------------------------- /doc/sass.md: -------------------------------------------------------------------------------- 1 | ### **x-animation** 2 | 3 | > Description：css3 animation 4 | 5 | **1. usage** 6 | 7 | syntax：@include x-animation($value); 8 | 9 | params： 10 | 11 | * $value --- the composition of the value： 12 | 13 | * animation-name 14 | 15 | * animation-duration 16 | 17 | * animation-timing-function 18 | 19 | * animation-delay 20 | 21 | * animation-iteration-count 22 | 23 | * animation-direction 24 | 25 | note：the default value is "none 0 ease 0 1 normal" 26 | 27 | **2. example** 28 | 29 | div { 30 | @include x-animation(test 3s ease); 31 | } 32 | 33 | **3. source** 34 | 35 | * [http://css-tricks.com/almanac/properties/a/animation/](http://css-tricks.com/almanac/properties/a/animation/) 36 | 37 | 38 |
39 | 40 | ### **x-appearance** 41 | 42 | > Description：css3 appearance 43 | 44 | **1. usage** 45 | 46 | syntax：@include x-appearance($value); 47 | 48 | params： 49 | 50 | * $value --- The available value：http://css-tricks.com/almanac/properties/a/appearance/ 51 | 52 | **2. example** 53 | 54 | div { 55 | @include x-appearance(button); 56 | } 57 | 58 | **3. source** 59 | 60 | * [http://css-tricks.com/almanac/properties/a/appearance/](http://css-tricks.com/almanac/properties/a/appearance/) 61 | 62 | 63 |
64 | 65 | ### **x-backface-visibility** 66 | 67 | > Description：Hidden the back of the rotating element . 68 | 69 | **1. usage** 70 | 71 | syntax：@include x-backface-visibility($value); 72 | 73 | params： 74 | 75 | * $value --- visible（default value）| hidden 76 | 77 | note：This is useful to avoid flicker when doing 3D effects . 78 | 79 | **2. example** 80 | 81 | div { 82 | @include x-backface-visibility(hidden); 83 | } 84 | 85 | **3. source** 86 | 87 | * [http://css-tricks.com/almanac/properties/b/backface-visibility/](http://css-tricks.com/almanac/properties/b/backface-visibility/) 88 | * [http://www.w3school.com.cn/cssref/pr_backface-visibility.asp](http://www.w3school.com.cn/cssref/pr_backface-visibility.asp) 89 | 90 | 91 | 92 |
93 | 94 | ### **x-background-clip** 95 | 96 | > Description：css3 background-clip 97 | 98 | **1. usage** 99 | 100 | syntax：@include x-background-clip($mode); 101 | 102 | params： 103 | 104 | * $mode --- border-box（default value） | padding-box | content-box 105 | 106 | **2. example** 107 | 108 | div { 109 | @include x-background-clip(content-box); 110 | } 111 | 112 | **3. source** 113 | 114 | * [http://www.w3school.com.cn/cssref/pr_background-clip.asp](http://www.w3school.com.cn/cssref/pr_background-clip.asp) 115 | * [http://css-tricks.com/transparent-borders-with-background-clip/](http://css-tricks.com/transparent-borders-with-background-clip/) 116 | 117 | 118 |
119 | 120 | ### **x-background-origin** 121 | 122 | > Description：css3 background-origin 123 | 124 | **1. usage** 125 | 126 | syntax：@include x-background-origin($mode); 127 | 128 | params： 129 | 130 | * $mode --- border-box（default value） | padding-box | content-box 131 | 132 | **2. example** 133 | 134 | div { 135 | @include x-background-origin(content-box); 136 | } 137 | 138 | **3. source** 139 | 140 | * [http://www.w3school.com.cn/cssref/pr_background-origin.asp](http://www.w3school.com.cn/cssref/pr_background-origin.asp) 141 | 142 | 143 |
144 | 145 | ### **x-background-retina** 146 | 147 | > Description：background image support retina screen . 148 | 149 | **1. usage** 150 | 151 | syntax：@include x-background-retina($img_1x, $img_2x, $width_1x, $height_1x); 152 | 153 | params： 154 | 155 | * $img_1x --- 1x background image url, 156 | 157 | * $img_2x --- 2x background image url, 158 | 159 | * $width_1x --- 1x background image width 160 | 161 | * $height_1x --- 1x background image height 162 | 163 | **2. example** 164 | 165 | div { 166 | @include x-background-retina("1x.png", "2x.png", 24px, 24px); 167 | } 168 | 169 | 170 |
171 | 172 | ### **x-background-size** 173 | 174 | > Description：css3 background-size 175 | 176 | **1. usage** 177 | 178 | syntax：@include x-background-size($size); 179 | 180 | params： 181 | 182 | * $size --- auto（default value）| length | percentage | cover | contain 183 | 184 | **2. example** 185 | 186 | div { 187 | @include x-background-size(50% 50%); 188 | } 189 | 190 | **3. source** 191 | 192 | * [http://www.css3.info/preview/background-size/](http://www.css3.info/preview/background-size/) 193 | * [http://www.w3school.com.cn/cssref/pr_background-size.asp](http://www.w3school.com.cn/cssref/pr_background-size.asp) 194 | 195 | 196 |
197 | 198 | ### **x-border-radius** 199 | 200 | > Description：css3 border-radius 201 | 202 | **1. usage** 203 | 204 | syntax：@include x-border-radius($radius, $direction); 205 | 206 | params： 207 | 208 | * $direction --- all (default value) | top | left | bottom | left 209 | 210 | **2. example** 211 | 212 | div { 213 | @include x-border-radius(3px); // set all corners 214 | } 215 | 216 | div { 217 | @include x-border-radius(3px, top); // set topleft and topright corners 218 | } 219 | 220 | div { 221 | @include x-border-radius(3px, right); // set topright and bottomright corners 222 | } 223 | 224 | div { 225 | @include x-border-radius(3px, bottom); // set bottomleft and bottomright corners 226 | } 227 | 228 | div { 229 | @include x-border-radius(3px, left); // set topleft and bottomleft corners 230 | } 231 | 232 | **3. source** 233 | 234 | * [http://css-tricks.com/almanac/properties/b/border-radius/](http://css-tricks.com/almanac/properties/b/border-radius/) 235 | 236 | 237 |
238 | 239 | ### **x-border-triangle** 240 | 241 | > Description：border triangle 242 | 243 | **1. usage** 244 | 245 | syntax：@include x-border-triangle($borderWidth, $borderColor, $direction); 246 | 247 | params： 248 | 249 | * $borderWidth --- etc, 5px 250 | 251 | * $borderColor --- etc, #666 252 | 253 | * $direction --- top | right | bottom | left | topleft | topright | bottomleft | bottomright 254 | 255 | **2. example** 256 | 257 | div { 258 | @include x-border-triangle(5px, #666, top); 259 | } 260 | 261 | **3. source** 262 | 263 | * [http://css-tricks.com/examples/ShapesOfCSS/](http://css-tricks.com/examples/ShapesOfCSS/) 264 | 265 | 266 |
267 | 268 | ### **x-box-shadow** 269 | 270 | > Description：css3 box-shadow 271 | 272 | **1. usage** 273 | 274 | syntax：@include x-box-shadow($params); 275 | 276 | **2. example** 277 | 278 | div { 279 | @include x-box-shadow(5px 5px 3px #000); 280 | } 281 | 282 | **3. source** 283 | 284 | * [http://css-tricks.com/snippets/css/css-box-shadow/](http://css-tricks.com/snippets/css/css-box-shadow/) 285 | 286 | 287 |
288 | 289 | ### **x-box-sizing** 290 | 291 | > Description：css3 box-sizing 292 | 293 | **1. usage** 294 | 295 | syntax：@include x-box-sizing($model); 296 | 297 | params： 298 | 299 | * $model --- content-box | border-box | inherit 300 | 301 | **2. example** 302 | 303 | div { 304 | @include x-box-sizing(border-box); 305 | } 306 | 307 | **3. source** 308 | 309 | * [http://css-tricks.com/box-sizing/](http://css-tricks.com/box-sizing/) 310 | 311 | 312 |
313 | 314 | ### **x-clearfix** 315 | 316 | > Description：clear float 317 | 318 | **1. usage** 319 | 320 | syntax：@include x-clearfix(); 321 | 322 | **2. example** 323 | 324 | div { 325 | @include x-clearfix(); 326 | } 327 | 328 | **3. source** 329 | 330 | * [http://css-tricks.com/snippets/css/clear-fix/](http://css-tricks.com/snippets/css/clear-fix/) 331 | 332 | 333 |
334 | 335 | ### **x-font-face** 336 | 337 | > Description：css3 @font-face 338 | 339 | **1. usage** 340 | 341 | syntax：@include x-font-face($fontName, $fontUrl); // note：font url without a file extension 342 | 343 | **2. example** 344 | 345 | @include x-font-face('iconfont', 'http://x.cdn.com/iconfont'); 346 | 347 | div { 348 | font-family: 'iconfont'; 349 | } 350 | 351 | **3. source** 352 | 353 | * [http://css-tricks.com/snippets/css/using-font-face/](http://css-tricks.com/snippets/css/using-font-face/) 354 | 355 | 356 | 357 |
358 | 359 | ### **x-grayscale** 360 | 361 | > Description：turn colour image into gray . 362 | 363 | **1. usage** 364 | 365 | syntax：@include x-grayscale(); 366 | 367 | **2. example** 368 | 369 | img { 370 | @include x-grayscale(); // colour image into a gray image 371 | } 372 | 373 | **3. source** 374 | 375 | * [http://css-tricks.com/snippets/css/forcing-grayscale-printing/](http://css-tricks.com/snippets/css/forcing-grayscale-printing/) 376 | 377 | 378 |
379 | 380 | ### **x-hyphens** 381 | 382 | > Description：css3 hyphens 383 | 384 | **1. usage** 385 | 386 | syntax：@include x-hyphens($mode); 387 | 388 | params： 389 | 390 | * $mode --- none | manual | auto（default value） 391 | 392 | **2. example** 393 | 394 | div { 395 | @include x-hyphens(); 396 | } 397 | 398 | **3. source** 399 | 400 | * [http://css-tricks.com/almanac/properties/h/hyphenate/](http://css-tricks.com/almanac/properties/h/hyphenate/) 401 | 402 | 403 |
404 | 405 | ### **x-inline-block** 406 | 407 | > Description：inline-block 408 | 409 | **1. usage** 410 | 411 | syntax：@include x-inline-block(); 412 | 413 | **2. example** 414 | 415 | div { 416 | @include x-inline-block(); 417 | } 418 | 419 | **3. source** 420 | 421 | * [http://css-tricks.com/snippets/css/cross-browser-inline-block/](http://css-tricks.com/snippets/css/cross-browser-inline-block/) 422 | 423 | 424 |
425 | 426 | ### **x-linear-gradient** 427 | 428 | > Description：CSS3 linear-gradient 429 | 430 | **1. usage** 431 | 432 | syntax：@include x-linear-gradient(...); 433 | 434 | params： 435 | 436 | * ... --- [ | to ]?, 437 | 438 | * ：such as 45deg 439 | 440 | > Note: The IE6~9 only support "0deg, 90deg, 180deg, 270deg" . 441 | 442 | * to ：to [left | right] || [top | bottom], default is "to bottom" 443 | 444 | > Note：The IE6~9 noly support "to top, to right, to bottom, to left" . 445 | 446 | * ：color [length | %]? [, color [length | %]?]* 447 | 448 | > Note: The IE6~9 only support set two color value . 449 | 450 | **2. example** 451 | 452 | div { 453 | @include x-linear-gradient(to bottom, #000, #fff); 454 | } 455 | div { 456 | @include x-linear-gradient(90deg, #000 30%, #fff 60%); 457 | } 458 | 459 | **3. source** 460 | 461 | * [http://css-tricks.com/css3-gradients/](http://css-tricks.com/css3-gradients/) 462 | * [https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient) 463 | * [http://dev.w3.org/csswg/css-images-3/#funcdef-linear-gradient](http://dev.w3.org/csswg/css-images-3/#funcdef-linear-gradient) 464 | 465 | 466 |
467 | 468 | ### **x-min-height** 469 | 470 | > Description：min-height 471 | 472 | **1. usage** 473 | 474 | syntax：@include x-min-height($height); 475 | 476 | **2. example** 477 | 478 | div { 479 | @include x-min-height(100px); 480 | } 481 | 482 | **3. source** 483 | 484 | * [http://css-tricks.com/snippets/css/cross-browser-min-height/#comment-100802](http://css-tricks.com/snippets/css/cross-browser-min-height/#comment-100802) 485 | 486 | 487 |
488 | 489 | ### **x-opacity** 490 | 491 | > Description：opacity 492 | 493 | **1. usage** 494 | 495 | syntax：@include x-opacity($opacity); 496 | 497 | **2. example** 498 | 499 | div { 500 | @include x-opacity(0.5); 501 | } 502 | 503 | **3. source** 504 | 505 | * [http://css-tricks.com/almanac/properties/o/opacity/](http://css-tricks.com/almanac/properties/o/opacity/) 506 | 507 | 508 |
509 | 510 | ### **x-perspective-origin** 511 | 512 | > Description：Determines the origin for the perspective property（Actually set the X axis and Y axis position）. 513 | 514 | **1. usage** 515 | 516 | syntax：@include x-perspective-origin($origin); 517 | 518 | params： 519 | 520 | * $origin --- left|center|right|length|% top|center|bottom|length|% 521 | 522 | note： 523 | 524 | * The default value is "50% 50%" . 525 | 526 | * Must use with the perspective property . 527 | 528 | **2. example** 529 | 530 | div { 531 | @include x-perspective(100px); 532 | @include x-perspective-origin(top left); 533 | } 534 | 535 | **3. source** 536 | 537 | * [http://css-tricks.com/almanac/properties/p/perspective-origin/](http://css-tricks.com/almanac/properties/p/perspective-origin/) 538 | * [http://www.w3cplus.com/css3/transform-basic-property.html](http://www.w3cplus.com/css3/transform-basic-property.html) 539 | 540 | 541 | 542 |
543 | 544 | ### **x-perspective** 545 | 546 | > Description：Gives an element a 3D-space by affecting the distance between the Z plane and the user. 547 | 548 | **1. usage** 549 | 550 | syntax：@include x-perspective($value); 551 | 552 | params： 553 | 554 | * $value --- none（default value）| length 555 | 556 | **2. example** 557 | 558 | div { 559 | @include x-perspective(500px); 560 | } 561 | 562 | **3. source** 563 | 564 | * [http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/](http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/) 565 | * [http://css-tricks.com/almanac/properties/p/perspective/](http://css-tricks.com/almanac/properties/p/perspective/) 566 | * [http://www.w3cplus.com/css3/transform-basic-property.html](http://www.w3cplus.com/css3/transform-basic-property.html) 567 | 568 | 569 | 570 |
571 | 572 | ### **x-placeholder** 573 | 574 | > Description：set placeholder text color . 575 | 576 | **1. usage** 577 | 578 | syntax：@include x-placeholder($color); 579 | 580 | params： 581 | 582 | * $color --- The placeholder text's color 583 | 584 | **2. example** 585 | 586 | input { 587 | @include x-placeholder(red); 588 | } 589 | 590 | **3. source** 591 | 592 | * [http://css-tricks.com/almanac/selectors/p/placeholder/](http://css-tricks.com/almanac/selectors/p/placeholder/) 593 | * [https://github.com/twbs/bootstrap/pull/11526](https://github.com/twbs/bootstrap/pull/11526) 594 | 595 | 596 |
597 | 598 | ### **x-radial-gradient** 599 | 600 | > Description：CSS3 radial gradient 601 | 602 | **1. usage** 603 | 604 | syntax：@include x-radial-gradient(...); 605 | 606 | params： 607 | 608 | * ... --- [ | ]? [at ]?, 609 | 610 | * ：circle | ellipse | [length | %]{1,2} ，default to circle 611 | 612 | * ：closest-side | closest-corner | farthest-side | farthest-corner | length | [length | %]{2}，default to farthest-corner 613 | 614 | * ： [length | % | left | center | right ]? [length> | % | top | center | bottom ]?，default to center 615 | 616 | * [color-stop-list]：color [length | %]? [, color [length | %]?]* 617 | 618 | **2. example** 619 | 620 | div { 621 | @include x-radial-gradient(circle, red, green); 622 | } 623 | 624 | **3. source** 625 | 626 | * [http://www.w3cplus.com/css3/new-css3-radial-gradient.html](http://www.w3cplus.com/css3/new-css3-radial-gradient.html) 627 | * [http://dev.w3.org/csswg/css-images-3/#radial-gradients](http://dev.w3.org/csswg/css-images-3/#radial-gradients) 628 | 629 | 630 | 631 |
632 | 633 | ### **x-text-overflow** 634 | 635 | > Description：text-overflow 636 | 637 | **1. usage** 638 | 639 | syntax：@include x-text-overflow($cutway); 640 | 641 | params： 642 | 643 | * $cutway --- ellipsis | clip (default value) 644 | 645 | **2. example** 646 | 647 | div { 648 | @include x-text-overflow(ellipsis); 649 | } 650 | 651 | **3. source** 652 | 653 | * [http://css-tricks.com/almanac/properties/t/text-overflow/](http://css-tricks.com/almanac/properties/t/text-overflow/) 654 | 655 | 656 |
657 | 658 | ### **x-transform-origin** 659 | 660 | > Description：lets you modify the origin for transformations of an element. 661 | 662 | **1. usage** 663 | 664 | syntax：@include x-transform-origin($value); 665 | 666 | params： 667 | 668 | * $value --- x-offset y-offset z-offset 669 | 670 | * x-offset --- left|center|right|length|% 671 | 672 | * y-offset --- top|center|bottom|length|% 673 | 674 | * z-offset --- length 675 | 676 | The default value is：50% 50% 0 677 | 678 | **2. example** 679 | 680 | div { 681 | @include x-transform-origin(top left); 682 | } 683 | 684 | **3. source** 685 | 686 | * [http://www.w3school.com.cn/cssref/pr_transform-origin.asp](http://www.w3school.com.cn/cssref/pr_transform-origin.asp) 687 | * [http://css-tricks.com/almanac/properties/t/transform-origin/](http://css-tricks.com/almanac/properties/t/transform-origin/) 688 | 689 | 690 | 691 |
692 | 693 | ### **x-transform-style** 694 | 695 | > Description：determines the element's children are positioned in 3D space, or flattened. 696 | 697 | **1. usage** 698 | 699 | syntax：@include x-transform-style($value); 700 | 701 | params： 702 | 703 | * $value --- flat | preserve-3d， 704 | 705 | **2. example** 706 | 707 | div { 708 | @include x-transform-style(preserve-3d); 709 | } 710 | 711 | **3. source** 712 | 713 | * [http://www.w3school.com.cn/cssref/pr_transform-style.asp](http://www.w3school.com.cn/cssref/pr_transform-style.asp) 714 | * [http://css-tricks.com/almanac/properties/t/transform-style/](http://css-tricks.com/almanac/properties/t/transform-style/) 715 | 716 | 717 | 718 |
719 | 720 | ### **x-transform** 721 | 722 | > Description：css3 transform 723 | 724 | **1. usage** 725 | 726 | syntax：@include x-transform($value); 727 | 728 | params： 729 | 730 | * $value --- transform-functions | none（default value） 731 | 732 | **2. example** 733 | 734 | div { 735 | @include x-transform(rotate(20deg)); 736 | } 737 | 738 | **3. source** 739 | 740 | * [The available transform functions](http://www.w3school.com.cn/cssref/pr_transform.asp) 741 | 742 | 743 | 744 |
745 | 746 | ### **x-transition** 747 | 748 | > Description：css3 transition 749 | 750 | **1. usage** 751 | 752 | syntax：@include x-transition($value); 753 | 754 | params： 755 | 756 | * $value --- the composition of the value： 757 | 758 | * transition-property 759 | 760 | * transition-duration 761 | 762 | * transition-timing-function 763 | 764 | * transition-delay 765 | 766 | note：the default value is "all 0 ease 0" 767 | 768 | **2. example** 769 | 770 | div { 771 | height: 100px; 772 | @include x-transition(height 2s ease); 773 | } 774 | div:hover { 775 | height: 300px; 776 | } 777 | 778 | **3. source** 779 | 780 | * [http://css-tricks.com/almanac/properties/t/transition/](http://css-tricks.com/almanac/properties/t/transition/) 781 | 782 | 783 | 784 |
785 | 786 | ### **x-user-select** 787 | 788 | > Description：css3 user-select 789 | 790 | **1. usage** 791 | 792 | syntax：@include x-user-select($mode); 793 | 794 | params： 795 | 796 | * $mode --- none | text（default value）| toggle | element | elements | all | inherit 797 | 798 | note： 799 | 800 | * In addition to “none" and "text", other value has compatibility problems. 801 | 802 | **2. example** 803 | 804 | div { 805 | @include x-user-select(); 806 | } 807 | 808 | **3. source** 809 | 810 | * [http://css-tricks.com/almanac/properties/u/user-select/](http://css-tricks.com/almanac/properties/u/user-select/) 811 | * [https://developer.mozilla.org/en-US/docs/Web/CSS/user-select](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) 812 | * [http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select](http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select) 813 | -------------------------------------------------------------------------------- /doc/styl.md: -------------------------------------------------------------------------------- 1 | ### **x-animation** 2 | 3 | > Description：css3 animation 4 | 5 | **1. usage** 6 | 7 | syntax：x-animation($value); 8 | 9 | params： 10 | 11 | * $value --- the composition of the value： 12 | 13 | * animation-name 14 | 15 | * animation-duration 16 | 17 | * animation-timing-function 18 | 19 | * animation-delay 20 | 21 | * animation-iteration-count 22 | 23 | * animation-direction 24 | 25 | note：the default value is "none 0 ease 0 1 normal" 26 | 27 | **2. example** 28 | 29 | div { 30 | x-animation(test 3s ease); 31 | } 32 | 33 | **3. source** 34 | 35 | * [http://css-tricks.com/almanac/properties/a/animation/](http://css-tricks.com/almanac/properties/a/animation/) 36 | 37 | 38 |
39 | 40 | ### **x-appearance** 41 | 42 | > Description：css3 appearance 43 | 44 | **1. usage** 45 | 46 | syntax：x-appearance($value); 47 | 48 | params： 49 | 50 | * $value --- The available value：http://css-tricks.com/almanac/properties/a/appearance/ 51 | 52 | **2. example** 53 | 54 | div { 55 | x-appearance(button); 56 | } 57 | 58 | **3. source** 59 | 60 | * [http://css-tricks.com/almanac/properties/a/appearance/](http://css-tricks.com/almanac/properties/a/appearance/) 61 | 62 | 63 |
64 | 65 | ### **x-backface-visibility** 66 | 67 | > Description：Hidden the back of the rotating element . 68 | 69 | **1. usage** 70 | 71 | syntax：x-backface-visibility($value); 72 | 73 | params： 74 | 75 | * $value --- visible（default value）| hidden 76 | 77 | note：This is useful to avoid flicker when doing 3D effects . 78 | 79 | **2. example** 80 | 81 | div { 82 | x-backface-visibility(hidden); 83 | } 84 | 85 | **3. source** 86 | 87 | * [http://css-tricks.com/almanac/properties/b/backface-visibility/](http://css-tricks.com/almanac/properties/b/backface-visibility/) 88 | * [http://www.w3school.com.cn/cssref/pr_backface-visibility.asp](http://www.w3school.com.cn/cssref/pr_backface-visibility.asp) 89 | 90 | 91 | 92 |
93 | 94 | ### **x-background-clip** 95 | 96 | > Description：css3 background-clip 97 | 98 | **1. usage** 99 | 100 | syntax：x-background-clip($mode); 101 | 102 | params： 103 | 104 | * $mode --- border-box（default value） | padding-box | content-box 105 | 106 | **2. example** 107 | 108 | div { 109 | x-background-clip(content-box); 110 | } 111 | 112 | **3. source** 113 | 114 | * [http://www.w3school.com.cn/cssref/pr_background-clip.asp](http://www.w3school.com.cn/cssref/pr_background-clip.asp) 115 | * [http://css-tricks.com/transparent-borders-with-background-clip/](http://css-tricks.com/transparent-borders-with-background-clip/) 116 | 117 | 118 |
119 | 120 | ### **x-background-origin** 121 | 122 | > Description：css3 background-origin 123 | 124 | **1. usage** 125 | 126 | syntax：x-background-origin($mode); 127 | 128 | params： 129 | 130 | * $mode --- border-box（default value） | padding-box | content-box 131 | 132 | **2. example** 133 | 134 | div { 135 | x-background-origin(content-box); 136 | } 137 | 138 | **3. source** 139 | 140 | * [http://www.w3school.com.cn/cssref/pr_background-origin.asp](http://www.w3school.com.cn/cssref/pr_background-origin.asp) 141 | 142 | 143 |
144 | 145 | ### **x-background-retina** 146 | 147 | > Description：background image support retina screen . 148 | 149 | **1. usage** 150 | 151 | syntax：x-background-retina($img_1x, $img_2x, $width_1x, $height_1x); 152 | 153 | params： 154 | 155 | * $img_1x --- 1x background image url, 156 | 157 | * $img_2x --- 2x background image url, 158 | 159 | * $width_1x --- 1x background image width 160 | 161 | * $height_1x --- 1x background image height 162 | 163 | **2. example** 164 | 165 | div { 166 | x-background-retina("1x.png", "2x.png", 24px, 24px); 167 | } 168 | 169 | 170 |
171 | 172 | ### **x-background-size** 173 | 174 | > Description：css3 background-size 175 | 176 | **1. usage** 177 | 178 | syntax：x-background-size($size); 179 | 180 | params： 181 | 182 | * $size --- auto（default value）| length | percentage | cover | contain 183 | 184 | **2. example** 185 | 186 | div { 187 | x-background-size(50% 50%); 188 | } 189 | 190 | **3. source** 191 | 192 | * [http://www.css3.info/preview/background-size/](http://www.css3.info/preview/background-size/) 193 | * [http://www.w3school.com.cn/cssref/pr_background-size.asp](http://www.w3school.com.cn/cssref/pr_background-size.asp) 194 | 195 | 196 |
197 | 198 | ### **x-border-radius** 199 | 200 | > Description：css3 border-radius 201 | 202 | **1. usage** 203 | 204 | syntax：x-border-radius($radius, $direction); 205 | 206 | params： 207 | 208 | * $direction --- all (default value) | top | left | bottom | left 209 | 210 | **2. example** 211 | 212 | div { 213 | x-border-radius(3px); // set all corners 214 | } 215 | 216 | div { 217 | x-border-radius(3px, top); // set topleft and topright corners 218 | } 219 | 220 | div { 221 | x-border-radius(3px, right); // set topright and bottomright corners 222 | } 223 | 224 | div { 225 | x-border-radius(3px, bottom); // set bottomleft and bottomright corners 226 | } 227 | 228 | div { 229 | x-border-radius(3px, left); // set topleft and bottomleft corners 230 | } 231 | 232 | **3. source** 233 | 234 | * [http://css-tricks.com/almanac/properties/b/border-radius/](http://css-tricks.com/almanac/properties/b/border-radius/) 235 | 236 | 237 |
238 | 239 | ### **x-border-triangle** 240 | 241 | > Description：border triangle 242 | 243 | **1. usage** 244 | 245 | syntax：x-border-triangle($borderWidth, $borderColor, $direction); 246 | 247 | params： 248 | 249 | * $borderWidth --- etc, 5px 250 | 251 | * $borderColor --- etc, #666 252 | 253 | * $direction --- top | right | bottom | left | topleft | topright | bottomleft | bottomright 254 | 255 | **2. example** 256 | 257 | div { 258 | x-border-triangle(5px, #666, top); 259 | } 260 | 261 | **3. source** 262 | 263 | * [http://css-tricks.com/examples/ShapesOfCSS/](http://css-tricks.com/examples/ShapesOfCSS/) 264 | 265 | 266 |
267 | 268 | ### **x-box-shadow** 269 | 270 | > Description：css3 box-shadow 271 | 272 | **1. usage** 273 | 274 | syntax：x-box-shadow($params); 275 | 276 | **2. example** 277 | 278 | div { 279 | x-box-shadow(5px 5px 3px #000); 280 | } 281 | 282 | **3. source** 283 | 284 | * [http://css-tricks.com/snippets/css/css-box-shadow/](http://css-tricks.com/snippets/css/css-box-shadow/) 285 | 286 | 287 |
288 | 289 | ### **x-box-sizing** 290 | 291 | > Description：css3 box-sizing 292 | 293 | **1. usage** 294 | 295 | syntax：x-box-sizing($model); 296 | 297 | params： 298 | 299 | * $model --- content-box | border-box | inherit 300 | 301 | **2. example** 302 | 303 | div { 304 | x-box-sizing(border-box); 305 | } 306 | 307 | **3. source** 308 | 309 | * [http://css-tricks.com/box-sizing/](http://css-tricks.com/box-sizing/) 310 | 311 | 312 |
313 | 314 | ### **x-clearfix** 315 | 316 | > Description：clear float 317 | 318 | **1. usage** 319 | 320 | syntax：x-clearfix(); 321 | 322 | **2. example** 323 | 324 | div { 325 | x-clearfix(); 326 | } 327 | 328 | **3. source** 329 | 330 | * [http://css-tricks.com/snippets/css/clear-fix/](http://css-tricks.com/snippets/css/clear-fix/) 331 | 332 | 333 |
334 | 335 | ### **x-font-face** 336 | 337 | > Description：css3 @font-face 338 | 339 | **1. usage** 340 | 341 | syntax：x-font-face($fontName, $fontUrl); // note：font url without a file extension 342 | 343 | **2. example** 344 | 345 | x-font-face('iconfont', 'http://x.cdn.com/iconfont'); 346 | 347 | div { 348 | font-family: 'iconfont'; 349 | } 350 | 351 | **3. source** 352 | 353 | * [http://css-tricks.com/snippets/css/using-font-face/](http://css-tricks.com/snippets/css/using-font-face/) 354 | 355 | 356 | 357 |
358 | 359 | ### **x-grayscale** 360 | 361 | > Description：turn colour image into gray . 362 | 363 | **1. usage** 364 | 365 | syntax：x-grayscale(); 366 | 367 | **2. example** 368 | 369 | img { 370 | x-grayscale(); // colour image into a gray image 371 | } 372 | 373 | **3. source** 374 | 375 | * [http://css-tricks.com/snippets/css/forcing-grayscale-printing/](http://css-tricks.com/snippets/css/forcing-grayscale-printing/) 376 | 377 | 378 |
379 | 380 | ### **x-hyphens** 381 | 382 | > Description：css3 hyphens 383 | 384 | **1. usage** 385 | 386 | syntax：x-hyphens($mode); 387 | 388 | params： 389 | 390 | * $mode --- none | manual | auto（default value） 391 | 392 | **2. example** 393 | 394 | div { 395 | x-hyphens(); 396 | } 397 | 398 | **3. source** 399 | 400 | * [http://css-tricks.com/almanac/properties/h/hyphenate/](http://css-tricks.com/almanac/properties/h/hyphenate/) 401 | 402 | 403 |
404 | 405 | ### **x-inline-block** 406 | 407 | > Description：inline-block 408 | 409 | **1. usage** 410 | 411 | syntax：x-inline-block(); 412 | 413 | **2. example** 414 | 415 | div { 416 | x-inline-block(); 417 | } 418 | 419 | **3. source** 420 | 421 | * [http://css-tricks.com/snippets/css/cross-browser-inline-block/](http://css-tricks.com/snippets/css/cross-browser-inline-block/) 422 | 423 | 424 |
425 | 426 | ### **x-linear-gradient** 427 | 428 | > Description：CSS3 linear-gradient 429 | 430 | **1. usage** 431 | 432 | syntax：x-linear-gradient(...); 433 | 434 | params： 435 | 436 | * ... --- [ | to ]?, 437 | 438 | * ：such as 45deg 439 | 440 | > Note: The IE6~9 only support "0deg, 90deg, 180deg, 270deg" . 441 | 442 | * to ：to [left | right] || [top | bottom], default is "to bottom" 443 | 444 | > Note：The IE6~9 noly support "to top, to right, to bottom, to left" . 445 | 446 | * ：color [length | %]? [, color [length | %]?]* 447 | 448 | > Note: The IE6~9 only support set two color value . 449 | 450 | **2. example** 451 | 452 | div { 453 | x-linear-gradient(to bottom, #000, #fff); 454 | } 455 | div { 456 | x-linear-gradient(90deg, #000 30%, #fff 60%); 457 | } 458 | 459 | **3. source** 460 | 461 | * [http://css-tricks.com/css3-gradients/](http://css-tricks.com/css3-gradients/) 462 | * [https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient) 463 | * [http://dev.w3.org/csswg/css-images-3/#funcdef-linear-gradient](http://dev.w3.org/csswg/css-images-3/#funcdef-linear-gradient) 464 | 465 | 466 |
467 | 468 | ### **x-min-height** 469 | 470 | > Description：min-height 471 | 472 | **1. usage** 473 | 474 | syntax：x-min-height($height); 475 | 476 | **2. example** 477 | 478 | div { 479 | x-min-height(100px); 480 | } 481 | 482 | **3. source** 483 | 484 | * [http://css-tricks.com/snippets/css/cross-browser-min-height/#comment-100802](http://css-tricks.com/snippets/css/cross-browser-min-height/#comment-100802) 485 | 486 | 487 |
488 | 489 | ### **x-opacity** 490 | 491 | > Description：opacity 492 | 493 | **1. usage** 494 | 495 | syntax：x-opacity($opacity); 496 | 497 | **2. example** 498 | 499 | div { 500 | x-opacity(0.5); 501 | } 502 | 503 | **3. source** 504 | 505 | * [http://css-tricks.com/almanac/properties/o/opacity/](http://css-tricks.com/almanac/properties/o/opacity/) 506 | 507 | 508 |
509 | 510 | ### **x-perspective-origin** 511 | 512 | > Description：Determines the origin for the perspective property（Actually set the X axis and Y axis position）. 513 | 514 | **1. usage** 515 | 516 | syntax：x-perspective-origin($origin); 517 | 518 | params： 519 | 520 | * $origin --- left|center|right|length|% top|center|bottom|length|% 521 | 522 | note： 523 | 524 | * The default value is "50% 50%" . 525 | 526 | * Must use with the perspective property . 527 | 528 | **2. example** 529 | 530 | div { 531 | x-perspective(100px); 532 | x-perspective-origin(top left); 533 | } 534 | 535 | **3. source** 536 | 537 | * [http://css-tricks.com/almanac/properties/p/perspective-origin/](http://css-tricks.com/almanac/properties/p/perspective-origin/) 538 | * [http://www.w3cplus.com/css3/transform-basic-property.html](http://www.w3cplus.com/css3/transform-basic-property.html) 539 | 540 | 541 | 542 |
543 | 544 | ### **x-perspective** 545 | 546 | > Description：Gives an element a 3D-space by affecting the distance between the Z plane and the user. 547 | 548 | **1. usage** 549 | 550 | syntax：x-perspective($value); 551 | 552 | params： 553 | 554 | * $value --- none（default value）| length 555 | 556 | **2. example** 557 | 558 | div { 559 | x-perspective(500px); 560 | } 561 | 562 | **3. source** 563 | 564 | * [http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/](http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/) 565 | * [http://css-tricks.com/almanac/properties/p/perspective/](http://css-tricks.com/almanac/properties/p/perspective/) 566 | * [http://www.w3cplus.com/css3/transform-basic-property.html](http://www.w3cplus.com/css3/transform-basic-property.html) 567 | 568 | 569 | 570 |
571 | 572 | ### **x-placeholder** 573 | 574 | > Description：set placeholder text color . 575 | 576 | **1. usage** 577 | 578 | syntax：x-placeholder($color); 579 | 580 | params： 581 | 582 | * $color --- The placeholder text's color 583 | 584 | **2. example** 585 | 586 | input { 587 | x-placeholder(red); 588 | } 589 | 590 | **3. source** 591 | 592 | * [http://css-tricks.com/almanac/selectors/p/placeholder/](http://css-tricks.com/almanac/selectors/p/placeholder/) 593 | * [https://github.com/twbs/bootstrap/pull/11526](https://github.com/twbs/bootstrap/pull/11526) 594 | 595 | 596 |
597 | 598 | ### **x-radial-gradient** 599 | 600 | > Description：CSS3 radial gradient 601 | 602 | **1. usage** 603 | 604 | syntax：x-radial-gradient(...); 605 | 606 | params： 607 | 608 | * ... --- [ | ]? [at ]?, 609 | 610 | * ：circle | ellipse | [length | %]{1,2} ，default to circle 611 | 612 | * ：closest-side | closest-corner | farthest-side | farthest-corner | length | [length | %]{2}，default to farthest-corner 613 | 614 | * ： [length | % | left | center | right ]? [length> | % | top | center | bottom ]?，default to center 615 | 616 | * [color-stop-list]：color [length | %]? [, color [length | %]?]* 617 | 618 | **2. example** 619 | 620 | div { 621 | x-radial-gradient(circle, red, green); 622 | } 623 | 624 | **3. source** 625 | 626 | * [http://www.w3cplus.com/css3/new-css3-radial-gradient.html](http://www.w3cplus.com/css3/new-css3-radial-gradient.html) 627 | * [http://dev.w3.org/csswg/css-images-3/#radial-gradients](http://dev.w3.org/csswg/css-images-3/#radial-gradients) 628 | 629 | 630 | 631 |
632 | 633 | ### **x-text-overflow** 634 | 635 | > Description：text-overflow 636 | 637 | **1. usage** 638 | 639 | syntax：x-text-overflow($cutway); 640 | 641 | params： 642 | 643 | * $cutway --- ellipsis | clip (default value) 644 | 645 | **2. example** 646 | 647 | div { 648 | x-text-overflow(ellipsis); 649 | } 650 | 651 | **3. source** 652 | 653 | * [http://css-tricks.com/almanac/properties/t/text-overflow/](http://css-tricks.com/almanac/properties/t/text-overflow/) 654 | 655 | 656 |
657 | 658 | ### **x-transform-origin** 659 | 660 | > Description：lets you modify the origin for transformations of an element. 661 | 662 | **1. usage** 663 | 664 | syntax：x-transform-origin($value); 665 | 666 | params： 667 | 668 | * $value --- x-offset y-offset z-offset 669 | 670 | * x-offset --- left|center|right|length|% 671 | 672 | * y-offset --- top|center|bottom|length|% 673 | 674 | * z-offset --- length 675 | 676 | The default value is：50% 50% 0 677 | 678 | **2. example** 679 | 680 | div { 681 | x-transform-origin(top left); 682 | } 683 | 684 | **3. source** 685 | 686 | * [http://www.w3school.com.cn/cssref/pr_transform-origin.asp](http://www.w3school.com.cn/cssref/pr_transform-origin.asp) 687 | * [http://css-tricks.com/almanac/properties/t/transform-origin/](http://css-tricks.com/almanac/properties/t/transform-origin/) 688 | 689 | 690 | 691 |
692 | 693 | ### **x-transform-style** 694 | 695 | > Description：determines the element's children are positioned in 3D space, or flattened. 696 | 697 | **1. usage** 698 | 699 | syntax：x-transform-style($value); 700 | 701 | params： 702 | 703 | * $value --- flat | preserve-3d， 704 | 705 | **2. example** 706 | 707 | div { 708 | x-transform-style(preserve-3d); 709 | } 710 | 711 | **3. source** 712 | 713 | * [http://www.w3school.com.cn/cssref/pr_transform-style.asp](http://www.w3school.com.cn/cssref/pr_transform-style.asp) 714 | * [http://css-tricks.com/almanac/properties/t/transform-style/](http://css-tricks.com/almanac/properties/t/transform-style/) 715 | 716 | 717 | 718 |
719 | 720 | ### **x-transform** 721 | 722 | > Description：css3 transform 723 | 724 | **1. usage** 725 | 726 | syntax：x-transform($value); 727 | 728 | params： 729 | 730 | * $value --- transform-functions | none（default value） 731 | 732 | **2. example** 733 | 734 | div { 735 | x-transform(rotate(20deg)); 736 | } 737 | 738 | **3. source** 739 | 740 | * [The available transform functions](http://www.w3school.com.cn/cssref/pr_transform.asp) 741 | 742 | 743 | 744 |
745 | 746 | ### **x-transition** 747 | 748 | > Description：css3 transition 749 | 750 | **1. usage** 751 | 752 | syntax：x-transition($value); 753 | 754 | params： 755 | 756 | * $value --- the composition of the value： 757 | 758 | * transition-property 759 | 760 | * transition-duration 761 | 762 | * transition-timing-function 763 | 764 | * transition-delay 765 | 766 | note：the default value is "all 0 ease 0" 767 | 768 | **2. example** 769 | 770 | div { 771 | height: 100px; 772 | x-transition(height 2s ease); 773 | } 774 | div:hover { 775 | height: 300px; 776 | } 777 | 778 | **3. source** 779 | 780 | * [http://css-tricks.com/almanac/properties/t/transition/](http://css-tricks.com/almanac/properties/t/transition/) 781 | 782 | 783 | 784 |
785 | 786 | ### **x-user-select** 787 | 788 | > Description：css3 user-select 789 | 790 | **1. usage** 791 | 792 | syntax：x-user-select($mode); 793 | 794 | params： 795 | 796 | * $mode --- none | text（default value）| toggle | element | elements | all | inherit 797 | 798 | note： 799 | 800 | * In addition to “none" and "text", other value has compatibility problems. 801 | 802 | **2. example** 803 | 804 | div { 805 | x-user-select(); 806 | } 807 | 808 | **3. source** 809 | 810 | * [http://css-tricks.com/almanac/properties/u/user-select/](http://css-tricks.com/almanac/properties/u/user-select/) 811 | * [https://developer.mozilla.org/en-US/docs/Web/CSS/user-select](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) 812 | * [http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select](http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select) 813 | -------------------------------------------------------------------------------- /fragment/foot.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /fragment/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | x-mixins test page 6 | 7 | 25 | 26 | 27 |

28 | demo for less 29 | demo for sass 30 | demo for stylus 31 |

32 | -------------------------------------------------------------------------------- /images/1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytcer/xmixins/c419c1de935777a075dc927de644665d108d6b2b/images/1x.png -------------------------------------------------------------------------------- /images/2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytcer/xmixins/c419c1de935777a075dc927de644665d108d6b2b/images/2x.png -------------------------------------------------------------------------------- /images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytcer/xmixins/c419c1de935777a075dc927de644665d108d6b2b/images/bg.jpg -------------------------------------------------------------------------------- /images/grayscale.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytcer/xmixins/c419c1de935777a075dc927de644665d108d6b2b/images/grayscale.jpeg -------------------------------------------------------------------------------- /images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytcer/xmixins/c419c1de935777a075dc927de644665d108d6b2b/images/icon.png -------------------------------------------------------------------------------- /images/taobao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mytcer/xmixins/c419c1de935777a075dc927de644665d108d6b2b/images/taobao.png -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | .x-animation(@value) { 2 | -webkit-animation: @value; 3 | -moz-animation: @value; 4 | -o-animation: @value; 5 | animation: @value; 6 | } 7 | .x-appearance(@value) { 8 | -webkit-appearance: @value; 9 | -moz-appearance: @value; 10 | appearance: @value; 11 | } 12 | .x-backface-visibility(@value:visible) { 13 | -webkit-backface-visibility: @value;; 14 | -moz-backface-visibility: @value;; 15 | -ms-backface-visibility: @value;; 16 | backface-visibility: @value; 17 | } 18 | .x-background-clip(@mode: border-box) { 19 | 20 | .x-if-simulater () when (@mode = border-box) { 21 | -moz-background-clip: border; 22 | -webkit-background-clip: border; 23 | } 24 | 25 | .x-if-simulater () when (@mode = padding-box) { 26 | -moz-background-clip: padding; 27 | -webkit-background-clip: padding; 28 | } 29 | 30 | .x-if-simulater () when (@mode = content-box) { 31 | -moz-background-clip: content; 32 | -webkit-background-clip: content; 33 | } 34 | 35 | .x-if-simulater(); 36 | 37 | background-clip: @mode; 38 | } 39 | .x-background-origin(@mode: border-box) { 40 | 41 | .x-if-simulater () when (@mode = border-box) { 42 | -moz-background-origin: border; 43 | -webkit-background-origin: border; 44 | } 45 | 46 | .x-if-simulater () when (@mode = padding-box) { 47 | -moz-background-origin: padding; 48 | -webkit-background-origin: padding; 49 | } 50 | 51 | .x-if-simulater () when (@mode = content-box) { 52 | -moz-background-origin: content; 53 | -webkit-background-origin: content; 54 | } 55 | 56 | .x-if-simulater(); 57 | 58 | background-origin: @mode; 59 | } 60 | .x-background-retina(@img_1x, @img_2x, @width_1x, @height_1x) { 61 | background-image: url(@img_1x); 62 | 63 | @media only screen and (-webkit-min-device-pixel-ratio: 2), 64 | only screen and (min--moz-device-pixel-ratio: 2), 65 | only screen and (-o-min-device-pixel-ratio: 2/1), 66 | only screen and (min-device-pixel-ratio: 2), 67 | only screen and (min-resolution: 192dpi), 68 | only screen and (min-resolution: 2dppx) { 69 | background-image: url(@img_2x); 70 | .x-background-size(@width_1x @height_1x); 71 | } 72 | } 73 | .x-background-size(@size) { 74 | -webkit-background-size: @size; 75 | -moz-background-size: @size; 76 | -o-background-size: @size; 77 | background-size: @size; 78 | } 79 | .x-border-radius(@radius, @direction:all) { 80 | .x-if-simulater () when (@direction = all) { 81 | -moz-border-radius: @radius; 82 | -webkit-border-radius: @radius; 83 | border-radius: @radius; 84 | } 85 | 86 | .x-if-simulater () when (@direction = top) { 87 | -moz-border-radius: @radius @radius 0 0; 88 | -webkit-border-radius: @radius @radius 0 0; 89 | border-radius: @radius @radius 0 0; 90 | } 91 | 92 | .x-if-simulater () when (@direction = right) { 93 | -moz-border-radius: 0 @radius @radius 0; 94 | -webkit-border-radius: 0 @radius @radius 0; 95 | border-radius: 0 @radius @radius 0; 96 | } 97 | 98 | .x-if-simulater () when (@direction = bottom) { 99 | -moz-border-radius: 0 0 @radius @radius; 100 | -webkit-border-radius: 0 0 @radius @radius; 101 | border-radius: 0 0 @radius @radius; 102 | } 103 | 104 | .x-if-simulater () when (@direction = left) { 105 | -moz-border-radius: @radius 0 0 @radius; 106 | -webkit-border-radius: @radius 0 0 @radius; 107 | border-radius: @radius 0 0 @radius; 108 | } 109 | 110 | .x-if-simulater(); 111 | } 112 | 113 | .x-border-triangle(@borderWidth, @borderColor, @direction) { 114 | @default-border-style: solid; 115 | 116 | width: 0; 117 | height: 0; 118 | overflow: hidden; 119 | border-width: @borderWidth; 120 | border-style: @default-border-style; 121 | _border-style: dashed; 122 | border-color: transparent; 123 | 124 | .x-if-simulater () when (@direction = top) { 125 | border-bottom-color: @borderColor; 126 | _border-bottom-style: @default-border-style; 127 | } 128 | 129 | .x-if-simulater () when (@direction = right) { 130 | border-left-color: @borderColor; 131 | _border-left-style: @default-border-style; 132 | } 133 | 134 | .x-if-simulater () when (@direction = bottom) { 135 | border-top-color: @borderColor; 136 | _border-top-style: @default-border-style; 137 | } 138 | 139 | .x-if-simulater () when (@direction = left) { 140 | border-right-color: @borderColor; 141 | _border-right-style: @default-border-style; 142 | } 143 | 144 | .x-if-simulater () when (@direction = topleft) { 145 | border-top-color: @borderColor; 146 | border-left-color: @borderColor; 147 | _border-top-style: @default-border-style; 148 | _border-left-style: @default-border-style; 149 | } 150 | 151 | .x-if-simulater () when (@direction = topright) { 152 | border-top-color: @borderColor; 153 | border-right-color: @borderColor; 154 | _border-top-style: @default-border-style; 155 | _border-right-style: @default-border-style; 156 | } 157 | 158 | .x-if-simulater () when (@direction = bottomleft) { 159 | border-bottom-color: @borderColor; 160 | border-left-color: @borderColor; 161 | _border-bottom-style: @default-border-style; 162 | _border-left-style: @default-border-style; 163 | } 164 | 165 | .x-if-simulater () when (@direction = bottomright) { 166 | border-bottom-color: @borderColor; 167 | border-right-color: @borderColor; 168 | _border-bottom-style: @default-border-style; 169 | _border-right-style: @default-border-style; 170 | } 171 | 172 | .x-if-simulater(); 173 | } 174 | .x-box-shadow(@params) { 175 | -moz-box-shadow: @params; 176 | -webkit-box-shadow: @params; 177 | box-shadow: @params; 178 | } 179 | .x-box-sizing(@model) { 180 | -webkit-box-sizing: @model; 181 | -moz-box-sizing: @model; 182 | box-sizing: @model; 183 | } 184 | .x-clearfix() { 185 | &:before, 186 | &:after { 187 | content: " "; 188 | display: table; 189 | } 190 | &:after { 191 | clear: both; 192 | } 193 | *zoom: 1; 194 | } 195 | .x-font-face(@fontName, @noSuffixFontUrl) { 196 | @font-face { 197 | font-family: "@{fontName}"; 198 | src: url("@{noSuffixFontUrl}.eot"); 199 | src: url("@{noSuffixFontUrl}.eot?#iefix") format("embedded-opentype"), 200 | url("@{noSuffixFontUrl}.woff") format("woff"), 201 | url("@{noSuffixFontUrl}.ttf") format("truetype"), 202 | url("@{noSuffixFontUrl}.svg#svgFontName") format("svg"); 203 | } 204 | } 205 | .x-grayscale() { 206 | /* for Chrome, Safari, Opera */ 207 | -webkit-filter: grayscale(100%); 208 | /* CSS3 standard usage */ 209 | filter: grayscale(100%); 210 | /* for FF, data-uri generate from gray.svg */ 211 | filter: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZmlsdGVyIGlkPSJncmF5c2NhbGUiPgogICAgICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwIDAgMCAxIDAiLz4KICAgIDwvZmlsdGVyPgo8L3N2Zz4=#grayscale'); 212 | /* for IE6~9 */ 213 | filter: gray; 214 | } 215 | .x-hyphens(@mode:auto) { 216 | -ms-word-break: break-all; 217 | word-break: break-all; 218 | word-break: break-word; 219 | -webkit-hyphens: @mode; 220 | -moz-hyphens: @mode; 221 | -ms-hyphens: @mode; 222 | hyphens: @mode; 223 | } 224 | .x-inline-block() { 225 | display: inline-block; 226 | *display: inline; 227 | *zoom: 1; 228 | } 229 | .x-linear-gradient(...) { 230 | 231 | @params: ~`"@{arguments}".toString().replace(/[\[\]]/g, "")`; 232 | @webkitParams: ~`"@{arguments}".toString().replace(/[\[\]]/g, "") 233 | .replace(/to top|\b0deg\b/, "bottom") 234 | .replace(/to right|\b90deg\b/, "left") 235 | .replace(/to bottom|\b180deg\b/, "top") 236 | .replace(/to left|\b270deg\b/, "right")`; 237 | 238 | @len: length(@arguments); 239 | 240 | .x-if(@arguments) when(@len = 2) { 241 | @startColor: extract(extract(@arguments, 1), 1); 242 | @endColor: extract(extract(@arguments, 2), 1); 243 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{startColor},endcolorstr=@{endColor},gradientType=0)"`; 244 | } 245 | 246 | .x-if(@arguments) when(@len > 2) { 247 | @direction: extract(@arguments, 1); 248 | @startColor: extract(extract(@arguments, 2), 1); 249 | @endColor: extract(extract(@arguments, 3), 1); 250 | 251 | .x-subif(@startColor, @endColor) when("@{direction}" = "to top") { 252 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{endColor},endcolorstr=@{startColor},gradientType=0)"`; 253 | } 254 | .x-subif(@startColor, @endColor) when("@{direction}" = "to right") { 255 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{startColor},endcolorstr=@{endColor},gradientType=1)"`; 256 | } 257 | .x-subif(@startColor, @endColor) when("@{direction}" = "to bottom") { 258 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{startColor},endcolorstr=@{endColor},gradientType=0)"`; 259 | } 260 | .x-subif(@startColor, @endColor) when("@{direction}" = "to left") { 261 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{endColor},endcolorstr=@{startColor},gradientType=1)"`; 262 | } 263 | .x-subif(@startColor, @endColor) when(@direction = 0deg) { 264 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{endColor},endcolorstr=@{startColor},gradientType=0)"`; 265 | } 266 | .x-subif(@startColor, @endColor) when(@direction = 90deg) { 267 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{startColor},endcolorstr=@{endColor},gradientType=1)"`; 268 | } 269 | .x-subif(@startColor, @endColor) when(@direction = 180deg) { 270 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{startColor},endcolorstr=@{endColor},gradientType=0)"`; 271 | } 272 | .x-subif(@startColor, @endColor) when(@direction = 270deg) { 273 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{endColor},endcolorstr=@{startColor},gradientType=1)"`; 274 | } 275 | .x-subif(@startColor, @endColor); 276 | } 277 | 278 | .x-if(@arguments); 279 | 280 | background: -webkit-linear-gradient(@webkitParams); 281 | background: linear-gradient(@params); 282 | } 283 | .x-min-height(@height) { 284 | min-height: @height; 285 | _height: @height; 286 | } 287 | 288 | .x-opacity(@opacity) { 289 | @opacityIE: @opacity * 100; 290 | -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityIE})"; // IE 8 & 9 291 | filter: ~"alpha(opacity=@{opacityIE})"; // IE 6 & 7 292 | opacity: @opacity; 293 | } 294 | .x-perspective-origin(@origin:50% 50%) { 295 | -webkit-perspective-origin: @origin; 296 | -moz-perspective-origin: @origin; 297 | perspective-origin: @origin; 298 | } 299 | .x-perspective(@value:none) { 300 | -webkit-perspective: @value; 301 | -moz-perspective: @value; 302 | perspective: @value; 303 | } 304 | .x-placeholder(@color) { 305 | &::-moz-placeholder { 306 | color: @color; 307 | opacity: 1; 308 | } 309 | &:-moz-placeholder { 310 | color: @color; 311 | } 312 | &:-ms-input-placeholder { 313 | color: @color; 314 | } 315 | &::-webkit-input-placeholder { 316 | color: @color; 317 | } 318 | } 319 | .x-radial-gradient(...) { 320 | @param: ~`"@{arguments}".toString().replace(/[\[\]]/g, "")`; 321 | background: -webkit-radial-gradient(@param); 322 | background: -moz-radial-gradient(@param); 323 | background: -ms-radial-gradient(@param); 324 | background: radial-gradient(@param); 325 | } 326 | .x-text-overflow(@cutway: clip) { 327 | overflow: hidden; 328 | text-overflow: @cutway; 329 | white-space: nowrap; 330 | } 331 | .x-transform-origin(@value: 50% 50% 0) { 332 | -webkit-transform-origin: @value; 333 | -moz-transform-origin: @value; 334 | -ms-transform-origin: @value; 335 | transform-origin: @value; 336 | } 337 | .x-transform-style(@value:flat) { 338 | -webkit-transform-style: @value; 339 | -moz-transform-style: @value; 340 | transform-style: @value; 341 | } 342 | .x-transform(@value) { 343 | -webkit-transform: @value; 344 | -moz-transform: @value; 345 | -ms-transform: @value; 346 | -o-transform: @value; 347 | transform: @value; 348 | } 349 | .x-transition(@value) { 350 | -webkit-transition: @value; 351 | -moz-transition: @value; 352 | -o-transition: @value; 353 | transition: @value; 354 | } 355 | .x-user-select(@mode:text) { 356 | -webkit-user-select: @mode; 357 | -moz-user-select: @mode; 358 | -ms-user-select: @mode; 359 | user-select: @mode; 360 | } -------------------------------------------------------------------------------- /index.scss: -------------------------------------------------------------------------------- 1 | @mixin x-animation($value) { 2 | -webkit-animation: $value; 3 | -moz-animation: $value; 4 | -o-animation: $value; 5 | animation: $value; 6 | } 7 | @mixin x-appearance($value) { 8 | -webkit-appearance: $value; 9 | -moz-appearance: $value; 10 | appearance: $value; 11 | } 12 | @mixin x-backface-visibility($value:visible) { 13 | -webkit-backface-visibility: $value;; 14 | -moz-backface-visibility: $value;; 15 | -ms-backface-visibility: $value;; 16 | backface-visibility: $value; 17 | } 18 | @mixin x-background-clip($mode: border-box) { 19 | $xmode: null; 20 | 21 | @if ($mode == border-box) { 22 | $xmode: border; 23 | } 24 | 25 | @if ($mode == padding-box) { 26 | $xmode: padding; 27 | } 28 | 29 | @if ($mode == content-box) { 30 | $xmode: content; 31 | } 32 | 33 | -moz-background-clip: $xmode; 34 | -webkit-background-clip: $xmode; 35 | background-clip: $mode; 36 | } 37 | @mixin x-background-origin($mode: border-box) { 38 | $xmode: null; 39 | 40 | @if ($mode == border-box) { 41 | $xmode: border; 42 | } 43 | 44 | @if ($mode == padding-box) { 45 | $xmode: padding; 46 | } 47 | 48 | @if ($mode == content-box) { 49 | $xmode: content; 50 | } 51 | 52 | -moz-background-origin: $xmode; 53 | -webkit-background-origin: $xmode; 54 | background-origin: $mode; 55 | } 56 | @mixin x-background-retina($img_1x, $img_2x, $width_1x, $height_1x) { 57 | background-image: url($img_1x); 58 | 59 | @media only screen and (-webkit-min-device-pixel-ratio: 2), 60 | only screen and (min--moz-device-pixel-ratio: 2), 61 | only screen and (-o-min-device-pixel-ratio: 2/1), 62 | only screen and (min-device-pixel-ratio: 2), 63 | only screen and (min-resolution: 192dpi), 64 | only screen and (min-resolution: 2dppx) { 65 | background-image: url($img_2x); 66 | @include x-background-size($width_1x $height_1x); 67 | } 68 | } 69 | @mixin x-background-size($size) { 70 | -webkit-background-size: $size; 71 | -moz-background-size: $size; 72 | -o-background-size: $size; 73 | background-size: $size; 74 | } 75 | @mixin x-border-radius($radius, $direction:all) { 76 | @if ($direction == all) { 77 | -moz-border-radius: $radius; 78 | -webkit-border-radius: $radius; 79 | border-radius: $radius; 80 | } 81 | 82 | @if ($direction == top) { 83 | -moz-border-radius: $radius $radius 0 0; 84 | -webkit-border-radius: $radius $radius 0 0; 85 | border-radius: $radius $radius 0 0; 86 | } 87 | 88 | @if ($direction == right) { 89 | -moz-border-radius: 0 $radius $radius 0; 90 | -webkit-border-radius: 0 $radius $radius 0; 91 | border-radius: 0 $radius $radius 0; 92 | } 93 | 94 | @if ($direction == bottom) { 95 | -moz-border-radius: 0 0 $radius $radius; 96 | -webkit-border-radius: 0 0 $radius $radius; 97 | border-radius: 0 0 $radius $radius; 98 | } 99 | 100 | @if ($direction == left) { 101 | -moz-border-radius: $radius 0 0 $radius; 102 | -webkit-border-radius: $radius 0 0 $radius; 103 | border-radius: $radius 0 0 $radius; 104 | } 105 | } 106 | 107 | @mixin x-border-triangle($borderWidth, $borderColor, $direction) { 108 | $default-border-style: solid; 109 | 110 | width: 0; 111 | height: 0; 112 | overflow: hidden; 113 | border-width: $borderWidth; 114 | border-style: $default-border-style; 115 | _border-style: dashed; 116 | border-color: transparent; 117 | 118 | @if ($direction == top) { 119 | border-bottom-color: $borderColor; 120 | _border-bottom-style: $default-border-style; 121 | } 122 | 123 | @if ($direction == right) { 124 | border-left-color: $borderColor; 125 | _border-left-style: $default-border-style; 126 | } 127 | 128 | @if ($direction == bottom) { 129 | border-top-color: $borderColor; 130 | _border-top-style: $default-border-style; 131 | } 132 | 133 | @if ($direction == left) { 134 | border-right-color: $borderColor; 135 | _border-right-style: $default-border-style; 136 | } 137 | 138 | @if ($direction == topleft) { 139 | border-top-color: $borderColor; 140 | border-left-color: $borderColor; 141 | _border-top-style: $default-border-style; 142 | _border-left-style: $default-border-style; 143 | } 144 | 145 | @if ($direction == topright) { 146 | border-top-color: $borderColor; 147 | border-right-color: $borderColor; 148 | _border-top-style: $default-border-style; 149 | _border-right-style: $default-border-style; 150 | } 151 | 152 | @if ($direction == bottomleft) { 153 | border-bottom-color: $borderColor; 154 | border-left-color: $borderColor; 155 | _border-bottom-style: $default-border-style; 156 | _border-left-style: $default-border-style; 157 | } 158 | 159 | @if ($direction == bottomright) { 160 | border-bottom-color: $borderColor; 161 | border-right-color: $borderColor; 162 | _border-bottom-style: $default-border-style; 163 | _border-right-style: $default-border-style; 164 | } 165 | } 166 | @mixin x-box-shadow($param) { 167 | -moz-box-shadow: $param; 168 | -webkit-box-shadow: $param; 169 | box-shadow: $param; 170 | } 171 | @mixin x-box-sizing($model) { 172 | -webkit-box-sizing: $model; 173 | -moz-box-sizing: $model; 174 | box-sizing: $model; 175 | } 176 | @mixin x-clearfix() { 177 | &:before, 178 | &:after { 179 | content: " "; 180 | display: table; 181 | } 182 | &:after { 183 | clear: both; 184 | } 185 | *zoom: 1; 186 | } 187 | @mixin x-font-face($fontName, $noSuffixFontUrl) { 188 | @font-face { 189 | font-family: "#{$fontName}"; 190 | src: url("#{$noSuffixFontUrl}.eot"); 191 | src: url("#{$noSuffixFontUrl}.eot?#iefix") format("embedded-opentype"), 192 | url("#{$noSuffixFontUrl}.woff") format("woff"), 193 | url("#{$noSuffixFontUrl}.ttf") format("truetype"), 194 | url("#{$noSuffixFontUrl}.svg#svgFontName") format("svg"); 195 | } 196 | } 197 | @mixin x-grayscale() { 198 | /* for Chrome, Safari, Opera */ 199 | -webkit-filter: grayscale(100%); 200 | /* CSS3 standard usage */ 201 | filter: grayscale(100%); 202 | /* for FF, data-uri generate from gray.svg */ 203 | filter: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZmlsdGVyIGlkPSJncmF5c2NhbGUiPgogICAgICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwIDAgMCAxIDAiLz4KICAgIDwvZmlsdGVyPgo8L3N2Zz4=#grayscale'); 204 | /* for IE6~9 */ 205 | filter: gray; 206 | } 207 | @mixin x-hyphens($mode:auto) { 208 | -ms-word-break: break-all; 209 | word-break: break-all; 210 | word-break: break-word; 211 | -webkit-hyphens: $mode; 212 | -moz-hyphens: $mode; 213 | -ms-hyphens: $mode; 214 | hyphens: $mode; 215 | } 216 | @mixin x-inline-block() { 217 | display: inline-block; 218 | *display: inline; 219 | *zoom: 1; 220 | } 221 | @mixin x-linear-gradient($arguments...) { 222 | 223 | @if (length($arguments) == 2) { 224 | $arguments: join(unquote("to bottom"), $arguments, comma); 225 | } 226 | 227 | $map: ("to top": bottom, 228 | "to right": left, 229 | "to bottom": top, 230 | "to left": right, 231 | "0deg": bottom, 232 | "90deg": left, 233 | "180deg": top, 234 | "270deg": right); 235 | 236 | $iemap: ("to top": 0, 237 | "to right": 1, 238 | "to bottom": 0, 239 | "to left": 1, 240 | "0deg": 0, 241 | "90deg": 1, 242 | "180deg": 0, 243 | "270deg": 1); 244 | 245 | $direction: inspect(nth($arguments, 1)); 246 | $colorlist: str-slice(inspect($arguments), str-length($direction) + 2); 247 | $wkdirection: map-get($map, $direction); 248 | $iedirection: map-get($iemap, $direction); 249 | $startColor: null; 250 | $endColor: null; 251 | 252 | @if ($wkdirection == top) { 253 | $startColor: nth(nth($arguments, 2), 1); 254 | $endColor: nth(nth($arguments, 3), 1); 255 | } @else if ($wkdirection == left) { 256 | $startColor: nth(nth($arguments, 2), 1); 257 | $endColor: nth(nth($arguments, 3), 1); 258 | } @else if ($wkdirection == bottom) { 259 | $startColor: nth(nth($arguments, 3), 1); 260 | $endColor: nth(nth($arguments, 2), 1); 261 | } @else if ($wkdirection == right) { 262 | $startColor: nth(nth($arguments, 3), 1); 263 | $endColor: nth(nth($arguments, 2), 1); 264 | } 265 | 266 | background: -webkit-linear-gradient($wkdirection, $colorlist); 267 | background: linear-gradient($arguments); 268 | filter: unquote("progid:DXImageTransform.Microsoft.gradient(startcolorstr=#{$startColor},endcolorstr=#{$endColor},gradientType=#{$iedirection})"); 269 | } 270 | @mixin x-min-height($height) { 271 | min-height: $height; 272 | _height: $height; 273 | } 274 | @mixin x-opacity($opacity) { 275 | $opacityIE: $opacity * 100; 276 | -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacityIE); // IE 8 & 9 277 | filter: alpha(opacity=$opacityIE); // IE 6 & 7 278 | opacity: $opacity; 279 | } 280 | @mixin x-perspective-origin($origin:50% 50%) { 281 | -webkit-perspective-origin: $origin; 282 | -moz-perspective-origin: $origin; 283 | perspective-origin: $origin; 284 | } 285 | @mixin x-perspective($value:none) { 286 | -webkit-perspective: $value; 287 | -moz-perspective: $value; 288 | perspective: $value; 289 | } 290 | @mixin x-placeholder($color) { 291 | &::-moz-placeholder { 292 | color: $color; 293 | opacity: 1; 294 | } 295 | &:-moz-placeholder { 296 | color: $color; 297 | } 298 | &:-ms-input-placeholder { 299 | color: $color; 300 | } 301 | &::-webkit-input-placeholder { 302 | color: $color; 303 | } 304 | } 305 | @mixin x-radial-gradient($arguments...) { 306 | background: -webkit-radial-gradient($arguments); 307 | background: -moz-radial-gradient($arguments); 308 | background: -ms-radial-gradient($arguments); 309 | background: radial-gradient($arguments); 310 | } 311 | @mixin x-text-overflow($cutway: clip) { 312 | overflow: hidden; 313 | text-overflow: $cutway; 314 | white-space: nowrap; 315 | } 316 | @mixin x-transform-origin($value: 50% 50% 0) { 317 | -webkit-transform-origin: $value; 318 | -moz-transform-origin: $value; 319 | -ms-transform-origin: $value; 320 | transform-origin: $value; 321 | } 322 | @mixin x-transform-style($value:flat) { 323 | -webkit-transform-style: $value; 324 | -moz-transform-style: $value; 325 | transform-style: $value; 326 | } 327 | @mixin x-transform($value) { 328 | -webkit-transform: $value; 329 | -moz-transform: $value; 330 | -ms-transform: $value; 331 | -o-transform: $value; 332 | transform: $value; 333 | } 334 | @mixin x-transition($value) { 335 | -webkit-transition: $value; 336 | -moz-transition: $value; 337 | -o-transition: $value; 338 | transition: $value; 339 | } 340 | @mixin x-user-select($mode:text) { 341 | -webkit-user-select: $mode; 342 | -moz-user-select: $mode; 343 | -ms-user-select: $mode; 344 | user-select: $mode; 345 | } -------------------------------------------------------------------------------- /index.styl: -------------------------------------------------------------------------------- 1 | x-animation($value) { 2 | -webkit-animation: $value; 3 | -moz-animation: $value; 4 | -o-animation: $value; 5 | animation: $value; 6 | } 7 | x-appearance($value) { 8 | -webkit-appearance: $value; 9 | -moz-appearance: $value; 10 | appearance: $value; 11 | } 12 | x-backface-visibility($value=visible) { 13 | -webkit-backface-visibility: $value;; 14 | -moz-backface-visibility: $value;; 15 | -ms-backface-visibility: $value;; 16 | backface-visibility: $value; 17 | } 18 | x-background-clip($mode=border-box) { 19 | $xmode=null; 20 | 21 | if ($mode == border-box) { 22 | $xmode=border; 23 | } 24 | 25 | if ($mode == padding-box) { 26 | $xmode=padding; 27 | } 28 | 29 | if ($mode == content-box) { 30 | $xmode=content; 31 | } 32 | 33 | -moz-background-clip: $xmode; 34 | -webkit-background-clip: $xmode; 35 | background-clip: $mode; 36 | } 37 | x-background-origin($mode=border-box) { 38 | $xmode=null; 39 | 40 | if ($mode == border-box) { 41 | $xmode=border; 42 | } 43 | 44 | if ($mode == padding-box) { 45 | $xmode=padding; 46 | } 47 | 48 | if ($mode == content-box) { 49 | $xmode=content; 50 | } 51 | 52 | -moz-background-origin: $xmode; 53 | -webkit-background-origin: $xmode; 54 | background-origin: $mode; 55 | } 56 | x-background-retina($img_1x, $img_2x, $width_1x, $height_1x) { 57 | background-image: url($img_1x); 58 | 59 | @media only screen and (-webkit-min-device-pixel-ratio: 2), 60 | only screen and (min--moz-device-pixel-ratio: 2), 61 | only screen and (-o-min-device-pixel-ratio: 2/1), 62 | only screen and (min-device-pixel-ratio: 2), 63 | only screen and (min-resolution: 192dpi), 64 | only screen and (min-resolution: 2dppx) { 65 | background-image: url($img_2x); 66 | x-background-size($width_1x $height_1x); 67 | } 68 | } 69 | x-background-size($size) { 70 | -webkit-background-size: $size; 71 | -moz-background-size: $size; 72 | -o-background-size: $size; 73 | background-size: $size; 74 | } 75 | x-border-radius($radius, $direction=all) { 76 | if ($direction == all) { 77 | -moz-border-radius: $radius; 78 | -webkit-border-radius: $radius; 79 | border-radius: $radius; 80 | } 81 | 82 | if ($direction == top) { 83 | -moz-border-radius: $radius $radius 0 0; 84 | -webkit-border-radius: $radius $radius 0 0; 85 | border-radius: $radius $radius 0 0; 86 | } 87 | 88 | if ($direction == right) { 89 | -moz-border-radius: 0 $radius $radius 0; 90 | -webkit-border-radius: 0 $radius $radius 0; 91 | border-radius: 0 $radius $radius 0; 92 | } 93 | 94 | if ($direction == bottom) { 95 | -moz-border-radius: 0 0 $radius $radius; 96 | -webkit-border-radius: 0 0 $radius $radius; 97 | border-radius: 0 0 $radius $radius; 98 | } 99 | 100 | if ($direction == left) { 101 | -moz-border-radius: $radius 0 0 $radius; 102 | -webkit-border-radius: $radius 0 0 $radius; 103 | border-radius: $radius 0 0 $radius; 104 | } 105 | } 106 | 107 | x-border-triangle($borderWidth, $borderColor, $direction) { 108 | $default-border-style = solid; 109 | 110 | width: 0; 111 | height: 0; 112 | overflow: hidden; 113 | border-width: $borderWidth; 114 | border-style: $default-border-style; 115 | _border-style: dashed; 116 | border-color: transparent; 117 | 118 | if ($direction == top) { 119 | border-bottom-color: $borderColor; 120 | _border-bottom-style: $default-border-style; 121 | } 122 | 123 | if ($direction == right) { 124 | border-left-color: $borderColor; 125 | _border-left-style: $default-border-style; 126 | } 127 | 128 | if ($direction == bottom) { 129 | border-top-color: $borderColor; 130 | _border-top-style: $default-border-style; 131 | } 132 | 133 | if ($direction == left) { 134 | border-right-color: $borderColor; 135 | _border-right-style: $default-border-style; 136 | } 137 | 138 | if ($direction == topleft) { 139 | border-top-color: $borderColor; 140 | border-left-color: $borderColor; 141 | _border-top-style: $default-border-style; 142 | _border-left-style: $default-border-style; 143 | } 144 | 145 | if ($direction == topright) { 146 | border-top-color: $borderColor; 147 | border-right-color: $borderColor; 148 | _border-top-style: $default-border-style; 149 | _border-right-style: $default-border-style; 150 | } 151 | 152 | if ($direction == bottomleft) { 153 | border-bottom-color: $borderColor; 154 | border-left-color: $borderColor; 155 | _border-bottom-style: $default-border-style; 156 | _border-left-style: $default-border-style; 157 | } 158 | 159 | if ($direction == bottomright) { 160 | border-bottom-color: $borderColor; 161 | border-right-color: $borderColor; 162 | _border-bottom-style: $default-border-style; 163 | _border-right-style: $default-border-style; 164 | } 165 | } 166 | x-box-shadow($params) { 167 | -moz-box-shadow: $params; 168 | -webkit-box-shadow: $params; 169 | box-shadow: $params; 170 | } 171 | x-box-sizing($model) { 172 | -webkit-box-sizing: $model; 173 | -moz-box-sizing: $model; 174 | box-sizing: $model; 175 | } 176 | x-clearfix() { 177 | &:before, 178 | &:after { 179 | content: " "; 180 | display: table; 181 | } 182 | &:after { 183 | clear: both; 184 | } 185 | *zoom: 1; 186 | } 187 | x-font-face($fontName, $noSuffixFontUrl) { 188 | @font-face { 189 | font-family: $fontName + ""; 190 | src: url($noSuffixFontUrl + ".eot"); 191 | src: url($noSuffixFontUrl + ".eot?#iefix") format("embedded-opentype"), 192 | url($noSuffixFontUrl + ".woff") format("woff"), 193 | url($noSuffixFontUrl + ".ttf") format("truetype"), 194 | url($noSuffixFontUrl + ".svg#svgFontName") format("svg"); 195 | } 196 | } 197 | x-grayscale() { 198 | /* for Chrome, Safari, Opera */ 199 | -webkit-filter: grayscale(100%); 200 | /* CSS3 standard usage */ 201 | filter: grayscale(100%); 202 | /* for FF, data-uri generate from gray.svg */ 203 | filter: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZmlsdGVyIGlkPSJncmF5c2NhbGUiPgogICAgICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwIDAgMCAxIDAiLz4KICAgIDwvZmlsdGVyPgo8L3N2Zz4=#grayscale'); 204 | /* for IE6~9, disable stylus convert gray to #808080 by stylus's unquote method */ 205 | filter: unquote("gray"); 206 | } 207 | x-hyphens($mode=auto) { 208 | -ms-word-break: break-all; 209 | word-break: break-all; 210 | word-break: break-word; 211 | -webkit-hyphens: $mode; 212 | -moz-hyphens: $mode; 213 | -ms-hyphens: $mode; 214 | hyphens: $mode; 215 | } 216 | x-inline-block() { 217 | display: inline-block; 218 | *display: inline; 219 | *zoom: 1; 220 | } 221 | x-linear-gradient() { 222 | if (length(arguments) == 2) { 223 | unshift(arguments, unquote("to bottom")); 224 | } 225 | 226 | $map = { 227 | "to top": bottom, 228 | "to right": left, 229 | "to bottom": top, 230 | "to left": right, 231 | "0deg": bottom, 232 | "90deg": left, 233 | "180deg": top, 234 | "270deg": right 235 | }; 236 | $iemap = { 237 | "top": 0, 238 | "right": 1, 239 | "bottom": 0, 240 | "left": 1 241 | }; 242 | 243 | $direction = arguments[0]; 244 | $param = unquote(join(',', arguments)); 245 | 246 | $wkdirection = $map["" + $direction + ""]; 247 | arguments[0] = $wkdirection; 248 | $wkparam = unquote(join(',', arguments)); 249 | 250 | $iedirection = $iemap["" + $wkdirection + ""]; 251 | 252 | if ($wkdirection == top) { 253 | $ieStartColor = arguments[1][0]; 254 | $ieEndColor = arguments[2][0]; 255 | } else if ($wkdirection == left) { 256 | $ieStartColor = arguments[1][0]; 257 | $ieEndColor = arguments[2][0]; 258 | } else if ($wkdirection == bottom) { 259 | $ieStartColor = arguments[2][0]; 260 | $ieEndColor = arguments[1][0]; 261 | } else if ($wkdirection == right) { 262 | $ieStartColor = arguments[2][0]; 263 | $ieEndColor = arguments[1][0]; 264 | } 265 | 266 | background: -webkit-linear-gradient($wkparam); 267 | background: linear-gradient($param); 268 | filter unquote("progid:DXImageTransform.Microsoft.gradient(startcolorstr=" + $ieStartColor + ",endcolorstr=" + $ieEndColor + ",gradientType=" + $iedirection + ")"); 269 | } 270 | x-min-height($height) { 271 | min-height: $height; 272 | _height: $height; 273 | } 274 | x-opacity($opacity) { 275 | $opacityIE = $opacity * 100; 276 | -ms-filter unquote('progid=DXImageTransform.Microsoft.Alpha(Opacity=' + $opacityIE + ')'); // IE 8 & 9 277 | filter unquote('alpha(opacity=' + $opacityIE + ')'); // IE 6 & 7 278 | opacity: $opacity; 279 | } 280 | x-perspective-origin($origin=50% 50%) { 281 | -webkit-perspective-origin: $origin; 282 | -moz-perspective-origin: $origin; 283 | perspective-origin: $origin; 284 | } 285 | x-perspective($value=none) { 286 | -webkit-perspective: $value; 287 | -moz-perspective: $value; 288 | perspective: $value; 289 | } 290 | x-placeholder($color) { 291 | &::-moz-placeholder { 292 | color: $color; 293 | opacity: 1; 294 | } 295 | &:-moz-placeholder { 296 | color: $color; 297 | } 298 | &:-ms-input-placeholder { 299 | color: $color; 300 | } 301 | &::-webkit-input-placeholder { 302 | color: $color; 303 | } 304 | } 305 | x-radial-gradient() { 306 | $param = unquote(join(',', arguments)); 307 | background: -webkit-radial-gradient($param); 308 | background: -moz-radial-gradient($param); 309 | background: -ms-radial-gradient($param); 310 | background: radial-gradient($param); 311 | } 312 | x-text-overflow($cutway=clip) { 313 | overflow: hidden; 314 | text-overflow: $cutway; 315 | white-space: nowrap; 316 | } 317 | x-transform-origin($value=50% 50% 0) { 318 | -webkit-transform-origin: $value; 319 | -moz-transform-origin: $value; 320 | -ms-transform-origin: $value; 321 | transform-origin: $value; 322 | } 323 | x-transform-style($value=flat) { 324 | -webkit-transform-style: $value; 325 | -moz-transform-style: $value; 326 | transform-style: $value; 327 | } 328 | x-transform($value) { 329 | -webkit-transform: $value; 330 | -moz-transform: $value; 331 | -ms-transform: $value; 332 | -o-transform: $value; 333 | transform: $value; 334 | } 335 | x-transition($value) { 336 | -webkit-transition: $value; 337 | -moz-transition: $value; 338 | -o-transition: $value; 339 | transition: $value; 340 | } 341 | x-user-select($mode=text) { 342 | -webkit-user-select: $mode; 343 | -moz-user-select: $mode; 344 | -ms-user-select: $mode; 345 | user-select: $mode; 346 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xmixins", 3 | "version": "0.5.0", 4 | "homepage": "https://github.com/mytcer/xmixins", 5 | "authors": [ 6 | "mytcer" 7 | ], 8 | "description": "A css mixin library，which compatible with less, sass and stylus ！", 9 | "main": [ 10 | "index.less", 11 | "index.scss", 12 | "index.styl" 13 | ], 14 | "keywords": [ 15 | "stylus", 16 | "less", 17 | "sass", 18 | "mixin", 19 | "css3", 20 | "css", 21 | "compass", 22 | "bower", 23 | "component" 24 | ], 25 | "precommit": [ 26 | "lint" 27 | ], 28 | "scripts": { 29 | "test": "grunt demo", 30 | "lint": "grunt jshint" 31 | }, 32 | "license": "MIT", 33 | "devDependencies": { 34 | "fs-extra": "^0.11.1", 35 | "globule": "^0.2.0", 36 | "grunt": "^0.4.5", 37 | "grunt-concurrent": "^1.0.0", 38 | "grunt-contrib-clean": "^0.5.0", 39 | "grunt-contrib-concat": "^0.4.0", 40 | "grunt-contrib-connect": "^0.8.0", 41 | "grunt-contrib-jshint": "^0.10.0", 42 | "grunt-contrib-less": "^0.11.3", 43 | "grunt-contrib-sass": "^0.7.3", 44 | "grunt-contrib-stylus": "^0.18.0", 45 | "grunt-contrib-watch": "^0.6.1", 46 | "ip": "^0.3.1", 47 | "jshint": "^2.5.3", 48 | "jshint-stylish": "^0.4.0", 49 | "matchdep": "^0.3.0", 50 | "mkfiles": "^1.6.0", 51 | "precommit-hook": "^1.0.7", 52 | "semver": "^3.0.1" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/x-animation/example.html: -------------------------------------------------------------------------------- 1 |
x-animation
-------------------------------------------------------------------------------- /src/x-animation/example.style: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes test { 2 | from { opacity: 1; } 3 | to { opacity: 0; } 4 | } 5 | @-moz-keyframes test { 6 | from { opacity: 1; } 7 | to { opacity: 0; } 8 | } 9 | @-o-keyframes test { 10 | from { opacity: 1; } 11 | to { opacity: 0; } 12 | } 13 | @keyframes test { 14 | from { opacity: 1; } 15 | to { opacity: 0; } 16 | } 17 | #x-animation-example { 18 | <%=include%>x-animation(test 3s ease); 19 | } -------------------------------------------------------------------------------- /src/x-animation/mixin.less: -------------------------------------------------------------------------------- 1 | .x-animation(@value) { 2 | -webkit-animation: @value; 3 | -moz-animation: @value; 4 | -o-animation: @value; 5 | animation: @value; 6 | } -------------------------------------------------------------------------------- /src/x-animation/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-animation($value) { 2 | -webkit-animation: $value; 3 | -moz-animation: $value; 4 | -o-animation: $value; 5 | animation: $value; 6 | } -------------------------------------------------------------------------------- /src/x-animation/mixin.styl: -------------------------------------------------------------------------------- 1 | x-animation($value) { 2 | -webkit-animation: $value; 3 | -moz-animation: $value; 4 | -o-animation: $value; 5 | animation: $value; 6 | } -------------------------------------------------------------------------------- /src/x-animation/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-animation** 2 | 3 | > Description：css3 animation 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-animation(<%=variable%>value); 8 | 9 | params： 10 | 11 | * <%=variable%>value --- the composition of the value： 12 | 13 | * animation-name 14 | 15 | * animation-duration 16 | 17 | * animation-timing-function 18 | 19 | * animation-delay 20 | 21 | * animation-iteration-count 22 | 23 | * animation-direction 24 | 25 | note：the default value is "none 0 ease 0 1 normal" 26 | 27 | **2. example** 28 | 29 | div { 30 | <%=include%>x-animation(test 3s ease); 31 | } 32 | 33 | **3. source** 34 | 35 | * [http://css-tricks.com/almanac/properties/a/animation/](http://css-tricks.com/almanac/properties/a/animation/) 36 | -------------------------------------------------------------------------------- /src/x-appearance/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-appearance

3 | I like button 4 |
-------------------------------------------------------------------------------- /src/x-appearance/example.style: -------------------------------------------------------------------------------- 1 | #x-appearance-example span { 2 | <%=include%>x-inline-block(); 3 | padding: 5px; 4 | <%=include%>x-appearance(button); 5 | } -------------------------------------------------------------------------------- /src/x-appearance/mixin.less: -------------------------------------------------------------------------------- 1 | .x-appearance(@value) { 2 | -webkit-appearance: @value; 3 | -moz-appearance: @value; 4 | appearance: @value; 5 | } -------------------------------------------------------------------------------- /src/x-appearance/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-appearance($value) { 2 | -webkit-appearance: $value; 3 | -moz-appearance: $value; 4 | appearance: $value; 5 | } -------------------------------------------------------------------------------- /src/x-appearance/mixin.styl: -------------------------------------------------------------------------------- 1 | x-appearance($value) { 2 | -webkit-appearance: $value; 3 | -moz-appearance: $value; 4 | appearance: $value; 5 | } -------------------------------------------------------------------------------- /src/x-appearance/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-appearance** 2 | 3 | > Description：css3 appearance 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-appearance(<%=variable%>value); 8 | 9 | params： 10 | 11 | * <%=variable%>value --- The available value：http://css-tricks.com/almanac/properties/a/appearance/ 12 | 13 | **2. example** 14 | 15 | div { 16 | <%=include%>x-appearance(button); 17 | } 18 | 19 | **3. source** 20 | 21 | * [http://css-tricks.com/almanac/properties/a/appearance/](http://css-tricks.com/almanac/properties/a/appearance/) 22 | -------------------------------------------------------------------------------- /src/x-backface-visibility/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-backface-visibility

3 | 7 |

8 | visible 9 | visible 10 |

11 |
-------------------------------------------------------------------------------- /src/x-backface-visibility/example.style: -------------------------------------------------------------------------------- 1 | #x-backface-visibility-example { 2 | .hidden, 3 | .visible { 4 | <%=include%>x-inline-block(); 5 | width: 60px; 6 | margin: 5px auto; 7 | padding: 5px; 8 | border: 1px solid #ccc; 9 | } 10 | span { 11 | display: block; 12 | height: 60px; 13 | background: yellow; 14 | border: 1px solid #000; 15 | <%=include%>x-transform(rotateY(180deg)); 16 | } 17 | .hidden span { 18 | <%=include%>x-backface-visibility(hidden); 19 | } 20 | .visible span { 21 | <%=include%>x-backface-visibility(); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/x-backface-visibility/mixin.less: -------------------------------------------------------------------------------- 1 | .x-backface-visibility(@value:visible) { 2 | -webkit-backface-visibility: @value;; 3 | -moz-backface-visibility: @value;; 4 | -ms-backface-visibility: @value;; 5 | backface-visibility: @value; 6 | } -------------------------------------------------------------------------------- /src/x-backface-visibility/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-backface-visibility($value:visible) { 2 | -webkit-backface-visibility: $value;; 3 | -moz-backface-visibility: $value;; 4 | -ms-backface-visibility: $value;; 5 | backface-visibility: $value; 6 | } -------------------------------------------------------------------------------- /src/x-backface-visibility/mixin.styl: -------------------------------------------------------------------------------- 1 | x-backface-visibility($value=visible) { 2 | -webkit-backface-visibility: $value;; 3 | -moz-backface-visibility: $value;; 4 | -ms-backface-visibility: $value;; 5 | backface-visibility: $value; 6 | } -------------------------------------------------------------------------------- /src/x-backface-visibility/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-backface-visibility** 2 | 3 | > Description：Hidden the back of the rotating element . 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-backface-visibility(<%=variable%>value); 8 | 9 | params： 10 | 11 | * <%=variable%>value --- visible（default value）| hidden 12 | 13 | note：This is useful to avoid flicker when doing 3D effects . 14 | 15 | **2. example** 16 | 17 | div { 18 | <%=include%>x-backface-visibility(hidden); 19 | } 20 | 21 | **3. source** 22 | 23 | * [http://css-tricks.com/almanac/properties/b/backface-visibility/](http://css-tricks.com/almanac/properties/b/backface-visibility/) 24 | * [http://www.w3school.com.cn/cssref/pr_backface-visibility.asp](http://www.w3school.com.cn/cssref/pr_backface-visibility.asp) 25 | 26 | -------------------------------------------------------------------------------- /src/x-background-clip/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-background-clip

3 | border-box 4 | padding-box 5 | content-box 6 |
-------------------------------------------------------------------------------- /src/x-background-clip/example.style: -------------------------------------------------------------------------------- 1 | #x-background-clip-example { 2 | span { 3 | <%=include%>x-inline-block(); 4 | width: 110px; 5 | margin: 5px auto; 6 | padding: 10px; 7 | background: green; 8 | border: 4px dashed #ccc; 9 | } 10 | .border { 11 | <%=include%>x-background-clip(); 12 | } 13 | .padding { 14 | <%=include%>x-background-clip(padding-box); 15 | } 16 | .content { 17 | <%=include%>x-background-clip(content-box); 18 | } 19 | } -------------------------------------------------------------------------------- /src/x-background-clip/mixin.less: -------------------------------------------------------------------------------- 1 | .x-background-clip(@mode: border-box) { 2 | 3 | .x-if-simulater () when (@mode = border-box) { 4 | -moz-background-clip: border; 5 | -webkit-background-clip: border; 6 | } 7 | 8 | .x-if-simulater () when (@mode = padding-box) { 9 | -moz-background-clip: padding; 10 | -webkit-background-clip: padding; 11 | } 12 | 13 | .x-if-simulater () when (@mode = content-box) { 14 | -moz-background-clip: content; 15 | -webkit-background-clip: content; 16 | } 17 | 18 | .x-if-simulater(); 19 | 20 | background-clip: @mode; 21 | } -------------------------------------------------------------------------------- /src/x-background-clip/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-background-clip($mode: border-box) { 2 | $xmode: null; 3 | 4 | @if ($mode == border-box) { 5 | $xmode: border; 6 | } 7 | 8 | @if ($mode == padding-box) { 9 | $xmode: padding; 10 | } 11 | 12 | @if ($mode == content-box) { 13 | $xmode: content; 14 | } 15 | 16 | -moz-background-clip: $xmode; 17 | -webkit-background-clip: $xmode; 18 | background-clip: $mode; 19 | } -------------------------------------------------------------------------------- /src/x-background-clip/mixin.styl: -------------------------------------------------------------------------------- 1 | x-background-clip($mode=border-box) { 2 | $xmode=null; 3 | 4 | if ($mode == border-box) { 5 | $xmode=border; 6 | } 7 | 8 | if ($mode == padding-box) { 9 | $xmode=padding; 10 | } 11 | 12 | if ($mode == content-box) { 13 | $xmode=content; 14 | } 15 | 16 | -moz-background-clip: $xmode; 17 | -webkit-background-clip: $xmode; 18 | background-clip: $mode; 19 | } -------------------------------------------------------------------------------- /src/x-background-clip/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-background-clip** 2 | 3 | > Description：css3 background-clip 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-background-clip(<%=variable%>mode); 8 | 9 | params： 10 | 11 | * <%=variable%>mode --- border-box（default value） | padding-box | content-box 12 | 13 | **2. example** 14 | 15 | div { 16 | <%=include%>x-background-clip(content-box); 17 | } 18 | 19 | **3. source** 20 | 21 | * [http://www.w3school.com.cn/cssref/pr_background-clip.asp](http://www.w3school.com.cn/cssref/pr_background-clip.asp) 22 | * [http://css-tricks.com/transparent-borders-with-background-clip/](http://css-tricks.com/transparent-borders-with-background-clip/) 23 | -------------------------------------------------------------------------------- /src/x-background-origin/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-background-origin

3 | border-box 4 | padding-box 5 | content-box 6 |
-------------------------------------------------------------------------------- /src/x-background-origin/example.style: -------------------------------------------------------------------------------- 1 | #x-background-origin-example { 2 | span { 3 | <%=include%>x-inline-block(); 4 | width: 110px; 5 | margin: 5px auto; 6 | padding: 10px; 7 | background: url(../../images/bg.jpg) no-repeat; 8 | border: 4px dashed #ccc; 9 | } 10 | .border { 11 | <%=include%>x-background-origin(); 12 | } 13 | .padding { 14 | <%=include%>x-background-origin(padding-box); 15 | } 16 | .content { 17 | <%=include%>x-background-origin(content-box); 18 | } 19 | } -------------------------------------------------------------------------------- /src/x-background-origin/mixin.less: -------------------------------------------------------------------------------- 1 | .x-background-origin(@mode: border-box) { 2 | 3 | .x-if-simulater () when (@mode = border-box) { 4 | -moz-background-origin: border; 5 | -webkit-background-origin: border; 6 | } 7 | 8 | .x-if-simulater () when (@mode = padding-box) { 9 | -moz-background-origin: padding; 10 | -webkit-background-origin: padding; 11 | } 12 | 13 | .x-if-simulater () when (@mode = content-box) { 14 | -moz-background-origin: content; 15 | -webkit-background-origin: content; 16 | } 17 | 18 | .x-if-simulater(); 19 | 20 | background-origin: @mode; 21 | } -------------------------------------------------------------------------------- /src/x-background-origin/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-background-origin($mode: border-box) { 2 | $xmode: null; 3 | 4 | @if ($mode == border-box) { 5 | $xmode: border; 6 | } 7 | 8 | @if ($mode == padding-box) { 9 | $xmode: padding; 10 | } 11 | 12 | @if ($mode == content-box) { 13 | $xmode: content; 14 | } 15 | 16 | -moz-background-origin: $xmode; 17 | -webkit-background-origin: $xmode; 18 | background-origin: $mode; 19 | } -------------------------------------------------------------------------------- /src/x-background-origin/mixin.styl: -------------------------------------------------------------------------------- 1 | x-background-origin($mode=border-box) { 2 | $xmode=null; 3 | 4 | if ($mode == border-box) { 5 | $xmode=border; 6 | } 7 | 8 | if ($mode == padding-box) { 9 | $xmode=padding; 10 | } 11 | 12 | if ($mode == content-box) { 13 | $xmode=content; 14 | } 15 | 16 | -moz-background-origin: $xmode; 17 | -webkit-background-origin: $xmode; 18 | background-origin: $mode; 19 | } -------------------------------------------------------------------------------- /src/x-background-origin/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-background-origin** 2 | 3 | > Description：css3 background-origin 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-background-origin(<%=variable%>mode); 8 | 9 | params： 10 | 11 | * <%=variable%>mode --- border-box（default value） | padding-box | content-box 12 | 13 | **2. example** 14 | 15 | div { 16 | <%=include%>x-background-origin(content-box); 17 | } 18 | 19 | **3. source** 20 | 21 | * [http://www.w3school.com.cn/cssref/pr_background-origin.asp](http://www.w3school.com.cn/cssref/pr_background-origin.asp) 22 | -------------------------------------------------------------------------------- /src/x-background-retina/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-background-retina

3 | 4 |
-------------------------------------------------------------------------------- /src/x-background-retina/example.style: -------------------------------------------------------------------------------- 1 | #x-background-retina-example em { 2 | display: block; 3 | width: 24px; 4 | height: 24px; 5 | margin: 5px auto; 6 | <%=include%>x-background-retina("../../images/1x.png", "../../images/2x.png", 24px, 24px); 7 | } -------------------------------------------------------------------------------- /src/x-background-retina/mixin.less: -------------------------------------------------------------------------------- 1 | .x-background-retina(@img_1x, @img_2x, @width_1x, @height_1x) { 2 | background-image: url(@img_1x); 3 | 4 | @media only screen and (-webkit-min-device-pixel-ratio: 2), 5 | only screen and (min--moz-device-pixel-ratio: 2), 6 | only screen and (-o-min-device-pixel-ratio: 2/1), 7 | only screen and (min-device-pixel-ratio: 2), 8 | only screen and (min-resolution: 192dpi), 9 | only screen and (min-resolution: 2dppx) { 10 | background-image: url(@img_2x); 11 | .x-background-size(@width_1x @height_1x); 12 | } 13 | } -------------------------------------------------------------------------------- /src/x-background-retina/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-background-retina($img_1x, $img_2x, $width_1x, $height_1x) { 2 | background-image: url($img_1x); 3 | 4 | @media only screen and (-webkit-min-device-pixel-ratio: 2), 5 | only screen and (min--moz-device-pixel-ratio: 2), 6 | only screen and (-o-min-device-pixel-ratio: 2/1), 7 | only screen and (min-device-pixel-ratio: 2), 8 | only screen and (min-resolution: 192dpi), 9 | only screen and (min-resolution: 2dppx) { 10 | background-image: url($img_2x); 11 | @include x-background-size($width_1x $height_1x); 12 | } 13 | } -------------------------------------------------------------------------------- /src/x-background-retina/mixin.styl: -------------------------------------------------------------------------------- 1 | x-background-retina($img_1x, $img_2x, $width_1x, $height_1x) { 2 | background-image: url($img_1x); 3 | 4 | @media only screen and (-webkit-min-device-pixel-ratio: 2), 5 | only screen and (min--moz-device-pixel-ratio: 2), 6 | only screen and (-o-min-device-pixel-ratio: 2/1), 7 | only screen and (min-device-pixel-ratio: 2), 8 | only screen and (min-resolution: 192dpi), 9 | only screen and (min-resolution: 2dppx) { 10 | background-image: url($img_2x); 11 | x-background-size($width_1x $height_1x); 12 | } 13 | } -------------------------------------------------------------------------------- /src/x-background-retina/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-background-retina** 2 | 3 | > Description：background image support retina screen . 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-background-retina(<%=variable%>img_1x, <%=variable%>img_2x, <%=variable%>width_1x, <%=variable%>height_1x); 8 | 9 | params： 10 | 11 | * <%=variable%>img_1x --- 1x background image url, 12 | 13 | * <%=variable%>img_2x --- 2x background image url, 14 | 15 | * <%=variable%>width_1x --- 1x background image width 16 | 17 | * <%=variable%>height_1x --- 1x background image height 18 | 19 | **2. example** 20 | 21 | div { 22 | <%=include%>x-background-retina("1x.png", "2x.png", 24px, 24px); 23 | } 24 | -------------------------------------------------------------------------------- /src/x-background-size/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-background-size

3 | 4 | 5 | 6 |
-------------------------------------------------------------------------------- /src/x-background-size/example.style: -------------------------------------------------------------------------------- 1 | #x-background-size-example { 2 | span { 3 | <%=include%>x-inline-block(); 4 | width: 50px; 5 | height: 50px; 6 | margin: 5px; 7 | background: url(../../images/bg.jpg) no-repeat; 8 | border: 1px solid #ccc; 9 | } 10 | .size { 11 | <%=include%>x-background-size(50% 50%); 12 | } 13 | .cover { 14 | <%=include%>x-background-size(cover); 15 | } 16 | .contain { 17 | <%=include%>x-background-size(contain); 18 | } 19 | } -------------------------------------------------------------------------------- /src/x-background-size/mixin.less: -------------------------------------------------------------------------------- 1 | .x-background-size(@size) { 2 | -webkit-background-size: @size; 3 | -moz-background-size: @size; 4 | -o-background-size: @size; 5 | background-size: @size; 6 | } -------------------------------------------------------------------------------- /src/x-background-size/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-background-size($size) { 2 | -webkit-background-size: $size; 3 | -moz-background-size: $size; 4 | -o-background-size: $size; 5 | background-size: $size; 6 | } -------------------------------------------------------------------------------- /src/x-background-size/mixin.styl: -------------------------------------------------------------------------------- 1 | x-background-size($size) { 2 | -webkit-background-size: $size; 3 | -moz-background-size: $size; 4 | -o-background-size: $size; 5 | background-size: $size; 6 | } -------------------------------------------------------------------------------- /src/x-background-size/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-background-size** 2 | 3 | > Description：css3 background-size 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-background-size(<%=variable%>size); 8 | 9 | params： 10 | 11 | * <%=variable%>size --- auto（default value）| length | percentage | cover | contain 12 | 13 | **2. example** 14 | 15 | div { 16 | <%=include%>x-background-size(50% 50%); 17 | } 18 | 19 | **3. source** 20 | 21 | * [http://www.css3.info/preview/background-size/](http://www.css3.info/preview/background-size/) 22 | * [http://www.w3school.com.cn/cssref/pr_background-size.asp](http://www.w3school.com.cn/cssref/pr_background-size.asp) 23 | -------------------------------------------------------------------------------- /src/x-border-radius/example.html: -------------------------------------------------------------------------------- 1 |
x-border-radius
2 |
x-border-radius top
3 |
x-border-radius right
4 |
x-border-radius bottom
5 |
x-border-radius left
-------------------------------------------------------------------------------- /src/x-border-radius/example.style: -------------------------------------------------------------------------------- 1 | #x-border-radius-example { 2 | <%=include%>x-border-radius(10px); 3 | } 4 | #x-border-top-radius-example { 5 | <%=include%>x-border-radius(10px, top); 6 | } 7 | #x-border-right-radius-example { 8 | <%=include%>x-border-radius(10px, right); 9 | } 10 | #x-border-bottom-radius-example { 11 | <%=include%>x-border-radius(10px, bottom); 12 | } 13 | #x-border-left-radius-example { 14 | <%=include%>x-border-radius(10px, left); 15 | } -------------------------------------------------------------------------------- /src/x-border-radius/mixin.less: -------------------------------------------------------------------------------- 1 | .x-border-radius(@radius, @direction:all) { 2 | .x-if-simulater () when (@direction = all) { 3 | -moz-border-radius: @radius; 4 | -webkit-border-radius: @radius; 5 | border-radius: @radius; 6 | } 7 | 8 | .x-if-simulater () when (@direction = top) { 9 | -moz-border-radius: @radius @radius 0 0; 10 | -webkit-border-radius: @radius @radius 0 0; 11 | border-radius: @radius @radius 0 0; 12 | } 13 | 14 | .x-if-simulater () when (@direction = right) { 15 | -moz-border-radius: 0 @radius @radius 0; 16 | -webkit-border-radius: 0 @radius @radius 0; 17 | border-radius: 0 @radius @radius 0; 18 | } 19 | 20 | .x-if-simulater () when (@direction = bottom) { 21 | -moz-border-radius: 0 0 @radius @radius; 22 | -webkit-border-radius: 0 0 @radius @radius; 23 | border-radius: 0 0 @radius @radius; 24 | } 25 | 26 | .x-if-simulater () when (@direction = left) { 27 | -moz-border-radius: @radius 0 0 @radius; 28 | -webkit-border-radius: @radius 0 0 @radius; 29 | border-radius: @radius 0 0 @radius; 30 | } 31 | 32 | .x-if-simulater(); 33 | } 34 | -------------------------------------------------------------------------------- /src/x-border-radius/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-border-radius($radius, $direction:all) { 2 | @if ($direction == all) { 3 | -moz-border-radius: $radius; 4 | -webkit-border-radius: $radius; 5 | border-radius: $radius; 6 | } 7 | 8 | @if ($direction == top) { 9 | -moz-border-radius: $radius $radius 0 0; 10 | -webkit-border-radius: $radius $radius 0 0; 11 | border-radius: $radius $radius 0 0; 12 | } 13 | 14 | @if ($direction == right) { 15 | -moz-border-radius: 0 $radius $radius 0; 16 | -webkit-border-radius: 0 $radius $radius 0; 17 | border-radius: 0 $radius $radius 0; 18 | } 19 | 20 | @if ($direction == bottom) { 21 | -moz-border-radius: 0 0 $radius $radius; 22 | -webkit-border-radius: 0 0 $radius $radius; 23 | border-radius: 0 0 $radius $radius; 24 | } 25 | 26 | @if ($direction == left) { 27 | -moz-border-radius: $radius 0 0 $radius; 28 | -webkit-border-radius: $radius 0 0 $radius; 29 | border-radius: $radius 0 0 $radius; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/x-border-radius/mixin.styl: -------------------------------------------------------------------------------- 1 | x-border-radius($radius, $direction=all) { 2 | if ($direction == all) { 3 | -moz-border-radius: $radius; 4 | -webkit-border-radius: $radius; 5 | border-radius: $radius; 6 | } 7 | 8 | if ($direction == top) { 9 | -moz-border-radius: $radius $radius 0 0; 10 | -webkit-border-radius: $radius $radius 0 0; 11 | border-radius: $radius $radius 0 0; 12 | } 13 | 14 | if ($direction == right) { 15 | -moz-border-radius: 0 $radius $radius 0; 16 | -webkit-border-radius: 0 $radius $radius 0; 17 | border-radius: 0 $radius $radius 0; 18 | } 19 | 20 | if ($direction == bottom) { 21 | -moz-border-radius: 0 0 $radius $radius; 22 | -webkit-border-radius: 0 0 $radius $radius; 23 | border-radius: 0 0 $radius $radius; 24 | } 25 | 26 | if ($direction == left) { 27 | -moz-border-radius: $radius 0 0 $radius; 28 | -webkit-border-radius: $radius 0 0 $radius; 29 | border-radius: $radius 0 0 $radius; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/x-border-radius/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-border-radius** 2 | 3 | > Description：css3 border-radius 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-border-radius(<%=variable%>radius, <%=variable%>direction); 8 | 9 | params： 10 | 11 | * <%=variable%>direction --- all (default value) | top | left | bottom | left 12 | 13 | **2. example** 14 | 15 | div { 16 | <%=include%>x-border-radius(3px); // set all corners 17 | } 18 | 19 | div { 20 | <%=include%>x-border-radius(3px, top); // set topleft and topright corners 21 | } 22 | 23 | div { 24 | <%=include%>x-border-radius(3px, right); // set topright and bottomright corners 25 | } 26 | 27 | div { 28 | <%=include%>x-border-radius(3px, bottom); // set bottomleft and bottomright corners 29 | } 30 | 31 | div { 32 | <%=include%>x-border-radius(3px, left); // set topleft and bottomleft corners 33 | } 34 | 35 | **3. source** 36 | 37 | * [http://css-tricks.com/almanac/properties/b/border-radius/](http://css-tricks.com/almanac/properties/b/border-radius/) 38 | -------------------------------------------------------------------------------- /src/x-border-triangle/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-border-triangle

3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
-------------------------------------------------------------------------------- /src/x-border-triangle/example.style: -------------------------------------------------------------------------------- 1 | #x-border-triangle-example { 2 | .triangle { 3 | display: inline-block; 4 | margin-right: 3px; 5 | } 6 | .top { 7 | <%=include%>x-border-triangle(10px, #666, top); 8 | } 9 | .bottom { 10 | <%=include%>x-border-triangle(10px, #666, bottom); 11 | } 12 | .left { 13 | <%=include%>x-border-triangle(10px, #666, left); 14 | } 15 | .right { 16 | <%=include%>x-border-triangle(10px, #666, right); 17 | } 18 | .topleft { 19 | <%=include%>x-border-triangle(10px, #666, topleft); 20 | } 21 | .topright { 22 | <%=include%>x-border-triangle(10px, #666, topright); 23 | } 24 | .bottomleft { 25 | <%=include%>x-border-triangle(10px, #666, bottomleft); 26 | } 27 | .bottomright { 28 | <%=include%>x-border-triangle(10px, #666, bottomright); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/x-border-triangle/mixin.less: -------------------------------------------------------------------------------- 1 | .x-border-triangle(@borderWidth, @borderColor, @direction) { 2 | @default-border-style: solid; 3 | 4 | width: 0; 5 | height: 0; 6 | overflow: hidden; 7 | border-width: @borderWidth; 8 | border-style: @default-border-style; 9 | _border-style: dashed; 10 | border-color: transparent; 11 | 12 | .x-if-simulater () when (@direction = top) { 13 | border-bottom-color: @borderColor; 14 | _border-bottom-style: @default-border-style; 15 | } 16 | 17 | .x-if-simulater () when (@direction = right) { 18 | border-left-color: @borderColor; 19 | _border-left-style: @default-border-style; 20 | } 21 | 22 | .x-if-simulater () when (@direction = bottom) { 23 | border-top-color: @borderColor; 24 | _border-top-style: @default-border-style; 25 | } 26 | 27 | .x-if-simulater () when (@direction = left) { 28 | border-right-color: @borderColor; 29 | _border-right-style: @default-border-style; 30 | } 31 | 32 | .x-if-simulater () when (@direction = topleft) { 33 | border-top-color: @borderColor; 34 | border-left-color: @borderColor; 35 | _border-top-style: @default-border-style; 36 | _border-left-style: @default-border-style; 37 | } 38 | 39 | .x-if-simulater () when (@direction = topright) { 40 | border-top-color: @borderColor; 41 | border-right-color: @borderColor; 42 | _border-top-style: @default-border-style; 43 | _border-right-style: @default-border-style; 44 | } 45 | 46 | .x-if-simulater () when (@direction = bottomleft) { 47 | border-bottom-color: @borderColor; 48 | border-left-color: @borderColor; 49 | _border-bottom-style: @default-border-style; 50 | _border-left-style: @default-border-style; 51 | } 52 | 53 | .x-if-simulater () when (@direction = bottomright) { 54 | border-bottom-color: @borderColor; 55 | border-right-color: @borderColor; 56 | _border-bottom-style: @default-border-style; 57 | _border-right-style: @default-border-style; 58 | } 59 | 60 | .x-if-simulater(); 61 | } -------------------------------------------------------------------------------- /src/x-border-triangle/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-border-triangle($borderWidth, $borderColor, $direction) { 2 | $default-border-style: solid; 3 | 4 | width: 0; 5 | height: 0; 6 | overflow: hidden; 7 | border-width: $borderWidth; 8 | border-style: $default-border-style; 9 | _border-style: dashed; 10 | border-color: transparent; 11 | 12 | @if ($direction == top) { 13 | border-bottom-color: $borderColor; 14 | _border-bottom-style: $default-border-style; 15 | } 16 | 17 | @if ($direction == right) { 18 | border-left-color: $borderColor; 19 | _border-left-style: $default-border-style; 20 | } 21 | 22 | @if ($direction == bottom) { 23 | border-top-color: $borderColor; 24 | _border-top-style: $default-border-style; 25 | } 26 | 27 | @if ($direction == left) { 28 | border-right-color: $borderColor; 29 | _border-right-style: $default-border-style; 30 | } 31 | 32 | @if ($direction == topleft) { 33 | border-top-color: $borderColor; 34 | border-left-color: $borderColor; 35 | _border-top-style: $default-border-style; 36 | _border-left-style: $default-border-style; 37 | } 38 | 39 | @if ($direction == topright) { 40 | border-top-color: $borderColor; 41 | border-right-color: $borderColor; 42 | _border-top-style: $default-border-style; 43 | _border-right-style: $default-border-style; 44 | } 45 | 46 | @if ($direction == bottomleft) { 47 | border-bottom-color: $borderColor; 48 | border-left-color: $borderColor; 49 | _border-bottom-style: $default-border-style; 50 | _border-left-style: $default-border-style; 51 | } 52 | 53 | @if ($direction == bottomright) { 54 | border-bottom-color: $borderColor; 55 | border-right-color: $borderColor; 56 | _border-bottom-style: $default-border-style; 57 | _border-right-style: $default-border-style; 58 | } 59 | } -------------------------------------------------------------------------------- /src/x-border-triangle/mixin.styl: -------------------------------------------------------------------------------- 1 | x-border-triangle($borderWidth, $borderColor, $direction) { 2 | $default-border-style = solid; 3 | 4 | width: 0; 5 | height: 0; 6 | overflow: hidden; 7 | border-width: $borderWidth; 8 | border-style: $default-border-style; 9 | _border-style: dashed; 10 | border-color: transparent; 11 | 12 | if ($direction == top) { 13 | border-bottom-color: $borderColor; 14 | _border-bottom-style: $default-border-style; 15 | } 16 | 17 | if ($direction == right) { 18 | border-left-color: $borderColor; 19 | _border-left-style: $default-border-style; 20 | } 21 | 22 | if ($direction == bottom) { 23 | border-top-color: $borderColor; 24 | _border-top-style: $default-border-style; 25 | } 26 | 27 | if ($direction == left) { 28 | border-right-color: $borderColor; 29 | _border-right-style: $default-border-style; 30 | } 31 | 32 | if ($direction == topleft) { 33 | border-top-color: $borderColor; 34 | border-left-color: $borderColor; 35 | _border-top-style: $default-border-style; 36 | _border-left-style: $default-border-style; 37 | } 38 | 39 | if ($direction == topright) { 40 | border-top-color: $borderColor; 41 | border-right-color: $borderColor; 42 | _border-top-style: $default-border-style; 43 | _border-right-style: $default-border-style; 44 | } 45 | 46 | if ($direction == bottomleft) { 47 | border-bottom-color: $borderColor; 48 | border-left-color: $borderColor; 49 | _border-bottom-style: $default-border-style; 50 | _border-left-style: $default-border-style; 51 | } 52 | 53 | if ($direction == bottomright) { 54 | border-bottom-color: $borderColor; 55 | border-right-color: $borderColor; 56 | _border-bottom-style: $default-border-style; 57 | _border-right-style: $default-border-style; 58 | } 59 | } -------------------------------------------------------------------------------- /src/x-border-triangle/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-border-triangle** 2 | 3 | > Description：border triangle 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-border-triangle(<%=variable%>borderWidth, <%=variable%>borderColor, <%=variable%>direction); 8 | 9 | params： 10 | 11 | * <%=variable%>borderWidth --- etc, 5px 12 | 13 | * <%=variable%>borderColor --- etc, #666 14 | 15 | * <%=variable%>direction --- top | right | bottom | left | topleft | topright | bottomleft | bottomright 16 | 17 | **2. example** 18 | 19 | div { 20 | <%=include%>x-border-triangle(5px, #666, top); 21 | } 22 | 23 | **3. source** 24 | 25 | * [http://css-tricks.com/examples/ShapesOfCSS/](http://css-tricks.com/examples/ShapesOfCSS/) 26 | -------------------------------------------------------------------------------- /src/x-box-shadow/example.html: -------------------------------------------------------------------------------- 1 |
x-box-shadow
-------------------------------------------------------------------------------- /src/x-box-shadow/example.style: -------------------------------------------------------------------------------- 1 | #x-box-shadow-example { 2 | <%=include%>x-box-shadow(5px 5px 3px #000); 3 | } -------------------------------------------------------------------------------- /src/x-box-shadow/mixin.less: -------------------------------------------------------------------------------- 1 | .x-box-shadow(@params) { 2 | -moz-box-shadow: @params; 3 | -webkit-box-shadow: @params; 4 | box-shadow: @params; 5 | } -------------------------------------------------------------------------------- /src/x-box-shadow/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-box-shadow($param) { 2 | -moz-box-shadow: $param; 3 | -webkit-box-shadow: $param; 4 | box-shadow: $param; 5 | } -------------------------------------------------------------------------------- /src/x-box-shadow/mixin.styl: -------------------------------------------------------------------------------- 1 | x-box-shadow($params) { 2 | -moz-box-shadow: $params; 3 | -webkit-box-shadow: $params; 4 | box-shadow: $params; 5 | } -------------------------------------------------------------------------------- /src/x-box-shadow/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-box-shadow** 2 | 3 | > Description：css3 box-shadow 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-box-shadow(<%=variable%>params); 8 | 9 | **2. example** 10 | 11 | div { 12 | <%=include%>x-box-shadow(5px 5px 3px #000); 13 | } 14 | 15 | **3. source** 16 | 17 | * [http://css-tricks.com/snippets/css/css-box-shadow/](http://css-tricks.com/snippets/css/css-box-shadow/) 18 | -------------------------------------------------------------------------------- /src/x-box-sizing/example.html: -------------------------------------------------------------------------------- 1 |
x-box-sizing
-------------------------------------------------------------------------------- /src/x-box-sizing/example.style: -------------------------------------------------------------------------------- 1 | #x-box-sizing-example { 2 | <%=include%>x-box-sizing(border-box); 3 | margin: 5px; 4 | padding: 5px; 5 | } -------------------------------------------------------------------------------- /src/x-box-sizing/mixin.less: -------------------------------------------------------------------------------- 1 | .x-box-sizing(@model) { 2 | -webkit-box-sizing: @model; 3 | -moz-box-sizing: @model; 4 | box-sizing: @model; 5 | } -------------------------------------------------------------------------------- /src/x-box-sizing/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-box-sizing($model) { 2 | -webkit-box-sizing: $model; 3 | -moz-box-sizing: $model; 4 | box-sizing: $model; 5 | } -------------------------------------------------------------------------------- /src/x-box-sizing/mixin.styl: -------------------------------------------------------------------------------- 1 | x-box-sizing($model) { 2 | -webkit-box-sizing: $model; 3 | -moz-box-sizing: $model; 4 | box-sizing: $model; 5 | } -------------------------------------------------------------------------------- /src/x-box-sizing/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-box-sizing** 2 | 3 | > Description：css3 box-sizing 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-box-sizing(<%=variable%>model); 8 | 9 | params： 10 | 11 | * <%=variable%>model --- content-box | border-box | inherit 12 | 13 | **2. example** 14 | 15 | div { 16 | <%=include%>x-box-sizing(border-box); 17 | } 18 | 19 | **3. source** 20 | 21 | * [http://css-tricks.com/box-sizing/](http://css-tricks.com/box-sizing/) 22 | -------------------------------------------------------------------------------- /src/x-clearfix/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-clearfix

3 |
4 |

see me by clearfix

5 |
6 |
-------------------------------------------------------------------------------- /src/x-clearfix/example.style: -------------------------------------------------------------------------------- 1 | #x-clearfix-example { 2 | line-height: 1.5; 3 | 4 | .subbox { 5 | <%=include%>x-clearfix(); 6 | margin-bottom: 5px; 7 | background: green; 8 | color: #fff; 9 | 10 | p { 11 | float: left; 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /src/x-clearfix/mixin.less: -------------------------------------------------------------------------------- 1 | .x-clearfix() { 2 | &:before, 3 | &:after { 4 | content: " "; 5 | display: table; 6 | } 7 | &:after { 8 | clear: both; 9 | } 10 | *zoom: 1; 11 | } -------------------------------------------------------------------------------- /src/x-clearfix/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-clearfix() { 2 | &:before, 3 | &:after { 4 | content: " "; 5 | display: table; 6 | } 7 | &:after { 8 | clear: both; 9 | } 10 | *zoom: 1; 11 | } -------------------------------------------------------------------------------- /src/x-clearfix/mixin.styl: -------------------------------------------------------------------------------- 1 | x-clearfix() { 2 | &:before, 3 | &:after { 4 | content: " "; 5 | display: table; 6 | } 7 | &:after { 8 | clear: both; 9 | } 10 | *zoom: 1; 11 | } -------------------------------------------------------------------------------- /src/x-clearfix/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-clearfix** 2 | 3 | > Description：clear float 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-clearfix(); 8 | 9 | **2. example** 10 | 11 | div { 12 | <%=include%>x-clearfix(); 13 | } 14 | 15 | **3. source** 16 | 17 | * [http://css-tricks.com/snippets/css/clear-fix/](http://css-tricks.com/snippets/css/clear-fix/) 18 | -------------------------------------------------------------------------------- /src/x-font-face/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-font-face

3 | < 4 |
-------------------------------------------------------------------------------- /src/x-font-face/example.style: -------------------------------------------------------------------------------- 1 | <%=include%>x-font-face("iconfont", "http://t.tbcdn.cn/g/thx/brix/fonts/uxiconfont"); 2 | 3 | #x-font-face-example { 4 | .iconfont { 5 | font-family: "iconfont"; 6 | font-size: 32px; 7 | font-style: normal; 8 | } 9 | } -------------------------------------------------------------------------------- /src/x-font-face/mixin.less: -------------------------------------------------------------------------------- 1 | .x-font-face(@fontName, @noSuffixFontUrl) { 2 | @font-face { 3 | font-family: "@{fontName}"; 4 | src: url("@{noSuffixFontUrl}.eot"); 5 | src: url("@{noSuffixFontUrl}.eot?#iefix") format("embedded-opentype"), 6 | url("@{noSuffixFontUrl}.woff") format("woff"), 7 | url("@{noSuffixFontUrl}.ttf") format("truetype"), 8 | url("@{noSuffixFontUrl}.svg#svgFontName") format("svg"); 9 | } 10 | } -------------------------------------------------------------------------------- /src/x-font-face/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-font-face($fontName, $noSuffixFontUrl) { 2 | @font-face { 3 | font-family: "#{$fontName}"; 4 | src: url("#{$noSuffixFontUrl}.eot"); 5 | src: url("#{$noSuffixFontUrl}.eot?#iefix") format("embedded-opentype"), 6 | url("#{$noSuffixFontUrl}.woff") format("woff"), 7 | url("#{$noSuffixFontUrl}.ttf") format("truetype"), 8 | url("#{$noSuffixFontUrl}.svg#svgFontName") format("svg"); 9 | } 10 | } -------------------------------------------------------------------------------- /src/x-font-face/mixin.styl: -------------------------------------------------------------------------------- 1 | x-font-face($fontName, $noSuffixFontUrl) { 2 | @font-face { 3 | font-family: $fontName + ""; 4 | src: url($noSuffixFontUrl + ".eot"); 5 | src: url($noSuffixFontUrl + ".eot?#iefix") format("embedded-opentype"), 6 | url($noSuffixFontUrl + ".woff") format("woff"), 7 | url($noSuffixFontUrl + ".ttf") format("truetype"), 8 | url($noSuffixFontUrl + ".svg#svgFontName") format("svg"); 9 | } 10 | } -------------------------------------------------------------------------------- /src/x-font-face/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-font-face** 2 | 3 | > Description：css3 @font-face 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-font-face(<%=variable%>fontName, <%=variable%>fontUrl); // note：font url without a file extension 8 | 9 | **2. example** 10 | 11 | <%=include%>x-font-face('iconfont', 'http://x.cdn.com/iconfont'); 12 | 13 | div { 14 | font-family: 'iconfont'; 15 | } 16 | 17 | **3. source** 18 | 19 | * [http://css-tricks.com/snippets/css/using-font-face/](http://css-tricks.com/snippets/css/using-font-face/) 20 | 21 | -------------------------------------------------------------------------------- /src/x-grayscale/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-grayscale

3 | 4 |
-------------------------------------------------------------------------------- /src/x-grayscale/example.style: -------------------------------------------------------------------------------- 1 | #x-grayscale-example { 2 | img { 3 | <%=include%>x-grayscale(); 4 | } 5 | } -------------------------------------------------------------------------------- /src/x-grayscale/gray.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/x-grayscale/mixin.less: -------------------------------------------------------------------------------- 1 | .x-grayscale() { 2 | /* for Chrome, Safari, Opera */ 3 | -webkit-filter: grayscale(100%); 4 | /* CSS3 standard usage */ 5 | filter: grayscale(100%); 6 | /* for FF, data-uri generate from gray.svg */ 7 | filter: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZmlsdGVyIGlkPSJncmF5c2NhbGUiPgogICAgICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwIDAgMCAxIDAiLz4KICAgIDwvZmlsdGVyPgo8L3N2Zz4=#grayscale'); 8 | /* for IE6~9 */ 9 | filter: gray; 10 | } -------------------------------------------------------------------------------- /src/x-grayscale/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-grayscale() { 2 | /* for Chrome, Safari, Opera */ 3 | -webkit-filter: grayscale(100%); 4 | /* CSS3 standard usage */ 5 | filter: grayscale(100%); 6 | /* for FF, data-uri generate from gray.svg */ 7 | filter: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZmlsdGVyIGlkPSJncmF5c2NhbGUiPgogICAgICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwIDAgMCAxIDAiLz4KICAgIDwvZmlsdGVyPgo8L3N2Zz4=#grayscale'); 8 | /* for IE6~9 */ 9 | filter: gray; 10 | } -------------------------------------------------------------------------------- /src/x-grayscale/mixin.styl: -------------------------------------------------------------------------------- 1 | x-grayscale() { 2 | /* for Chrome, Safari, Opera */ 3 | -webkit-filter: grayscale(100%); 4 | /* CSS3 standard usage */ 5 | filter: grayscale(100%); 6 | /* for FF, data-uri generate from gray.svg */ 7 | filter: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZmlsdGVyIGlkPSJncmF5c2NhbGUiPgogICAgICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwIDAgMCAxIDAiLz4KICAgIDwvZmlsdGVyPgo8L3N2Zz4=#grayscale'); 8 | /* for IE6~9, disable stylus convert gray to #808080 by stylus's unquote method */ 9 | filter: unquote("gray"); 10 | } -------------------------------------------------------------------------------- /src/x-grayscale/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-grayscale** 2 | 3 | > Description：turn colour image into gray . 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-grayscale(); 8 | 9 | **2. example** 10 | 11 | img { 12 | <%=include%>x-grayscale(); // colour image into a gray image 13 | } 14 | 15 | **3. source** 16 | 17 | * [http://css-tricks.com/snippets/css/forcing-grayscale-printing/](http://css-tricks.com/snippets/css/forcing-grayscale-printing/) 18 | -------------------------------------------------------------------------------- /src/x-hyphens/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-hyphens

3 | The hyphens property controls hyphenation of text in block level elements. 4 |
-------------------------------------------------------------------------------- /src/x-hyphens/example.style: -------------------------------------------------------------------------------- 1 | #x-hyphens-example span { 2 | display: block; 3 | width: 60%; 4 | margin: 0 auto; 5 | padding: 5px; 6 | border: 1px solid #ccc; 7 | <%=include%>x-hyphens(); 8 | } -------------------------------------------------------------------------------- /src/x-hyphens/mixin.less: -------------------------------------------------------------------------------- 1 | .x-hyphens(@mode:auto) { 2 | -ms-word-break: break-all; 3 | word-break: break-all; 4 | word-break: break-word; 5 | -webkit-hyphens: @mode; 6 | -moz-hyphens: @mode; 7 | -ms-hyphens: @mode; 8 | hyphens: @mode; 9 | } -------------------------------------------------------------------------------- /src/x-hyphens/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-hyphens($mode:auto) { 2 | -ms-word-break: break-all; 3 | word-break: break-all; 4 | word-break: break-word; 5 | -webkit-hyphens: $mode; 6 | -moz-hyphens: $mode; 7 | -ms-hyphens: $mode; 8 | hyphens: $mode; 9 | } -------------------------------------------------------------------------------- /src/x-hyphens/mixin.styl: -------------------------------------------------------------------------------- 1 | x-hyphens($mode=auto) { 2 | -ms-word-break: break-all; 3 | word-break: break-all; 4 | word-break: break-word; 5 | -webkit-hyphens: $mode; 6 | -moz-hyphens: $mode; 7 | -ms-hyphens: $mode; 8 | hyphens: $mode; 9 | } -------------------------------------------------------------------------------- /src/x-hyphens/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-hyphens** 2 | 3 | > Description：css3 hyphens 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-hyphens(<%=variable%>mode); 8 | 9 | params： 10 | 11 | * <%=variable%>mode --- none | manual | auto（default value） 12 | 13 | **2. example** 14 | 15 | div { 16 | <%=include%>x-hyphens(); 17 | } 18 | 19 | **3. source** 20 | 21 | * [http://css-tricks.com/almanac/properties/h/hyphenate/](http://css-tricks.com/almanac/properties/h/hyphenate/) 22 | -------------------------------------------------------------------------------- /src/x-inline-block/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-inline-block

3 | A 4 | B 5 |
-------------------------------------------------------------------------------- /src/x-inline-block/example.style: -------------------------------------------------------------------------------- 1 | #x-inline-block-example span { 2 | <%=include%>x-inline-block(); 3 | margin-right: 10px; 4 | padding: 5px; 5 | background: #ccc; 6 | } -------------------------------------------------------------------------------- /src/x-inline-block/mixin.less: -------------------------------------------------------------------------------- 1 | .x-inline-block() { 2 | display: inline-block; 3 | *display: inline; 4 | *zoom: 1; 5 | } -------------------------------------------------------------------------------- /src/x-inline-block/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-inline-block() { 2 | display: inline-block; 3 | *display: inline; 4 | *zoom: 1; 5 | } -------------------------------------------------------------------------------- /src/x-inline-block/mixin.styl: -------------------------------------------------------------------------------- 1 | x-inline-block() { 2 | display: inline-block; 3 | *display: inline; 4 | *zoom: 1; 5 | } -------------------------------------------------------------------------------- /src/x-inline-block/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-inline-block** 2 | 3 | > Description：inline-block 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-inline-block(); 8 | 9 | **2. example** 10 | 11 | div { 12 | <%=include%>x-inline-block(); 13 | } 14 | 15 | **3. source** 16 | 17 | * [http://css-tricks.com/snippets/css/cross-browser-inline-block/](http://css-tricks.com/snippets/css/cross-browser-inline-block/) 18 | -------------------------------------------------------------------------------- /src/x-linear-gradient/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-linear-gradient

3 |
4 |

to top

5 |

to right

6 |

to bottom

7 |

to left

8 |
9 |
10 |

0deg

11 |

90deg

12 |

180deg

13 |

270deg

14 |
15 |
-------------------------------------------------------------------------------- /src/x-linear-gradient/example.style: -------------------------------------------------------------------------------- 1 | #x-linear-gradient-example { 2 | .list { 3 | <%=include%>x-inline-block(); 4 | p { 5 | width: 80px; 6 | height: 30px; 7 | margin: 2px; 8 | } 9 | } 10 | 11 | .totop { 12 | <%=include%>x-linear-gradient(to top, #f00, green); 13 | } 14 | .toright { 15 | <%=include%>x-linear-gradient(to right, #f00, green); 16 | } 17 | .tobottom { 18 | <%=include%>x-linear-gradient(#f00, green); 19 | } 20 | .toleft { 21 | <%=include%>x-linear-gradient(to left, #f00, green); 22 | } 23 | .deg0 { 24 | <%=include%>x-linear-gradient(0deg, #f00 30%, green 60%); 25 | } 26 | .deg90 { 27 | <%=include%>x-linear-gradient(90deg, #f00 30%, green 60%); 28 | } 29 | .deg180 { 30 | <%=include%>x-linear-gradient(180deg, #f00 30%, green 60%); 31 | } 32 | .deg270 { 33 | <%=include%>x-linear-gradient(270deg, #f00 30%, green 60%); 34 | } 35 | } -------------------------------------------------------------------------------- /src/x-linear-gradient/mixin.less: -------------------------------------------------------------------------------- 1 | .x-linear-gradient(...) { 2 | 3 | @params: ~`"@{arguments}".toString().replace(/[\[\]]/g, "")`; 4 | @webkitParams: ~`"@{arguments}".toString().replace(/[\[\]]/g, "") 5 | .replace(/to top|\b0deg\b/, "bottom") 6 | .replace(/to right|\b90deg\b/, "left") 7 | .replace(/to bottom|\b180deg\b/, "top") 8 | .replace(/to left|\b270deg\b/, "right")`; 9 | 10 | @len: length(@arguments); 11 | 12 | .x-if(@arguments) when(@len = 2) { 13 | @startColor: extract(extract(@arguments, 1), 1); 14 | @endColor: extract(extract(@arguments, 2), 1); 15 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{startColor},endcolorstr=@{endColor},gradientType=0)"`; 16 | } 17 | 18 | .x-if(@arguments) when(@len > 2) { 19 | @direction: extract(@arguments, 1); 20 | @startColor: extract(extract(@arguments, 2), 1); 21 | @endColor: extract(extract(@arguments, 3), 1); 22 | 23 | .x-subif(@startColor, @endColor) when("@{direction}" = "to top") { 24 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{endColor},endcolorstr=@{startColor},gradientType=0)"`; 25 | } 26 | .x-subif(@startColor, @endColor) when("@{direction}" = "to right") { 27 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{startColor},endcolorstr=@{endColor},gradientType=1)"`; 28 | } 29 | .x-subif(@startColor, @endColor) when("@{direction}" = "to bottom") { 30 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{startColor},endcolorstr=@{endColor},gradientType=0)"`; 31 | } 32 | .x-subif(@startColor, @endColor) when("@{direction}" = "to left") { 33 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{endColor},endcolorstr=@{startColor},gradientType=1)"`; 34 | } 35 | .x-subif(@startColor, @endColor) when(@direction = 0deg) { 36 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{endColor},endcolorstr=@{startColor},gradientType=0)"`; 37 | } 38 | .x-subif(@startColor, @endColor) when(@direction = 90deg) { 39 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{startColor},endcolorstr=@{endColor},gradientType=1)"`; 40 | } 41 | .x-subif(@startColor, @endColor) when(@direction = 180deg) { 42 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{startColor},endcolorstr=@{endColor},gradientType=0)"`; 43 | } 44 | .x-subif(@startColor, @endColor) when(@direction = 270deg) { 45 | filter: ~`"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{endColor},endcolorstr=@{startColor},gradientType=1)"`; 46 | } 47 | .x-subif(@startColor, @endColor); 48 | } 49 | 50 | .x-if(@arguments); 51 | 52 | background: -webkit-linear-gradient(@webkitParams); 53 | background: linear-gradient(@params); 54 | } -------------------------------------------------------------------------------- /src/x-linear-gradient/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-linear-gradient($arguments...) { 2 | 3 | @if (length($arguments) == 2) { 4 | $arguments: join(unquote("to bottom"), $arguments, comma); 5 | } 6 | 7 | $map: ("to top": bottom, 8 | "to right": left, 9 | "to bottom": top, 10 | "to left": right, 11 | "0deg": bottom, 12 | "90deg": left, 13 | "180deg": top, 14 | "270deg": right); 15 | 16 | $iemap: ("to top": 0, 17 | "to right": 1, 18 | "to bottom": 0, 19 | "to left": 1, 20 | "0deg": 0, 21 | "90deg": 1, 22 | "180deg": 0, 23 | "270deg": 1); 24 | 25 | $direction: inspect(nth($arguments, 1)); 26 | $colorlist: str-slice(inspect($arguments), str-length($direction) + 2); 27 | $wkdirection: map-get($map, $direction); 28 | $iedirection: map-get($iemap, $direction); 29 | $startColor: null; 30 | $endColor: null; 31 | 32 | @if ($wkdirection == top) { 33 | $startColor: nth(nth($arguments, 2), 1); 34 | $endColor: nth(nth($arguments, 3), 1); 35 | } @else if ($wkdirection == left) { 36 | $startColor: nth(nth($arguments, 2), 1); 37 | $endColor: nth(nth($arguments, 3), 1); 38 | } @else if ($wkdirection == bottom) { 39 | $startColor: nth(nth($arguments, 3), 1); 40 | $endColor: nth(nth($arguments, 2), 1); 41 | } @else if ($wkdirection == right) { 42 | $startColor: nth(nth($arguments, 3), 1); 43 | $endColor: nth(nth($arguments, 2), 1); 44 | } 45 | 46 | background: -webkit-linear-gradient($wkdirection, $colorlist); 47 | background: linear-gradient($arguments); 48 | filter: unquote("progid:DXImageTransform.Microsoft.gradient(startcolorstr=#{$startColor},endcolorstr=#{$endColor},gradientType=#{$iedirection})"); 49 | } -------------------------------------------------------------------------------- /src/x-linear-gradient/mixin.styl: -------------------------------------------------------------------------------- 1 | x-linear-gradient() { 2 | if (length(arguments) == 2) { 3 | unshift(arguments, unquote("to bottom")); 4 | } 5 | 6 | $map = { 7 | "to top": bottom, 8 | "to right": left, 9 | "to bottom": top, 10 | "to left": right, 11 | "0deg": bottom, 12 | "90deg": left, 13 | "180deg": top, 14 | "270deg": right 15 | }; 16 | $iemap = { 17 | "top": 0, 18 | "right": 1, 19 | "bottom": 0, 20 | "left": 1 21 | }; 22 | 23 | $direction = arguments[0]; 24 | $param = unquote(join(',', arguments)); 25 | 26 | $wkdirection = $map["" + $direction + ""]; 27 | arguments[0] = $wkdirection; 28 | $wkparam = unquote(join(',', arguments)); 29 | 30 | $iedirection = $iemap["" + $wkdirection + ""]; 31 | 32 | if ($wkdirection == top) { 33 | $ieStartColor = arguments[1][0]; 34 | $ieEndColor = arguments[2][0]; 35 | } else if ($wkdirection == left) { 36 | $ieStartColor = arguments[1][0]; 37 | $ieEndColor = arguments[2][0]; 38 | } else if ($wkdirection == bottom) { 39 | $ieStartColor = arguments[2][0]; 40 | $ieEndColor = arguments[1][0]; 41 | } else if ($wkdirection == right) { 42 | $ieStartColor = arguments[2][0]; 43 | $ieEndColor = arguments[1][0]; 44 | } 45 | 46 | background: -webkit-linear-gradient($wkparam); 47 | background: linear-gradient($param); 48 | filter unquote("progid:DXImageTransform.Microsoft.gradient(startcolorstr=" + $ieStartColor + ",endcolorstr=" + $ieEndColor + ",gradientType=" + $iedirection + ")"); 49 | } -------------------------------------------------------------------------------- /src/x-linear-gradient/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-linear-gradient** 2 | 3 | > Description：CSS3 linear-gradient 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-linear-gradient(...); 8 | 9 | params： 10 | 11 | * ... --- [ | to ]?, 12 | 13 | * ：such as 45deg 14 | 15 | > Note: The IE6~9 only support "0deg, 90deg, 180deg, 270deg" . 16 | 17 | * to ：to [left | right] || [top | bottom], default is "to bottom" 18 | 19 | > Note：The IE6~9 noly support "to top, to right, to bottom, to left" . 20 | 21 | * ：color [length | %]? [, color [length | %]?]* 22 | 23 | > Note: The IE6~9 only support set two color value . 24 | 25 | **2. example** 26 | 27 | div { 28 | <%=include%>x-linear-gradient(to bottom, #000, #fff); 29 | } 30 | div { 31 | <%=include%>x-linear-gradient(90deg, #000 30%, #fff 60%); 32 | } 33 | 34 | **3. source** 35 | 36 | * [http://css-tricks.com/css3-gradients/](http://css-tricks.com/css3-gradients/) 37 | * [https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient) 38 | * [http://dev.w3.org/csswg/css-images-3/#funcdef-linear-gradient](http://dev.w3.org/csswg/css-images-3/#funcdef-linear-gradient) 39 | -------------------------------------------------------------------------------- /src/x-min-height/example.html: -------------------------------------------------------------------------------- 1 |
x-min-height
-------------------------------------------------------------------------------- /src/x-min-height/example.style: -------------------------------------------------------------------------------- 1 | #x-min-height-example { 2 | height: auto; 3 | <%=include%>x-min-height(200px); 4 | } -------------------------------------------------------------------------------- /src/x-min-height/mixin.less: -------------------------------------------------------------------------------- 1 | .x-min-height(@height) { 2 | min-height: @height; 3 | _height: @height; 4 | } 5 | -------------------------------------------------------------------------------- /src/x-min-height/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-min-height($height) { 2 | min-height: $height; 3 | _height: $height; 4 | } -------------------------------------------------------------------------------- /src/x-min-height/mixin.styl: -------------------------------------------------------------------------------- 1 | x-min-height($height) { 2 | min-height: $height; 3 | _height: $height; 4 | } -------------------------------------------------------------------------------- /src/x-min-height/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-min-height** 2 | 3 | > Description：min-height 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-min-height(<%=variable%>height); 8 | 9 | **2. example** 10 | 11 | div { 12 | <%=include%>x-min-height(100px); 13 | } 14 | 15 | **3. source** 16 | 17 | * [http://css-tricks.com/snippets/css/cross-browser-min-height/#comment-100802](http://css-tricks.com/snippets/css/cross-browser-min-height/#comment-100802) 18 | -------------------------------------------------------------------------------- /src/x-opacity/example.html: -------------------------------------------------------------------------------- 1 |
x-opacity
-------------------------------------------------------------------------------- /src/x-opacity/example.style: -------------------------------------------------------------------------------- 1 | #x-opacity-example { 2 | background: #000; 3 | color: #fff; 4 | <%=include%>x-opacity(0.3); 5 | } -------------------------------------------------------------------------------- /src/x-opacity/mixin.less: -------------------------------------------------------------------------------- 1 | .x-opacity(@opacity) { 2 | @opacityIE: @opacity * 100; 3 | -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityIE})"; // IE 8 & 9 4 | filter: ~"alpha(opacity=@{opacityIE})"; // IE 6 & 7 5 | opacity: @opacity; 6 | } -------------------------------------------------------------------------------- /src/x-opacity/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-opacity($opacity) { 2 | $opacityIE: $opacity * 100; 3 | -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacityIE); // IE 8 & 9 4 | filter: alpha(opacity=$opacityIE); // IE 6 & 7 5 | opacity: $opacity; 6 | } -------------------------------------------------------------------------------- /src/x-opacity/mixin.styl: -------------------------------------------------------------------------------- 1 | x-opacity($opacity) { 2 | $opacityIE = $opacity * 100; 3 | -ms-filter unquote('progid=DXImageTransform.Microsoft.Alpha(Opacity=' + $opacityIE + ')'); // IE 8 & 9 4 | filter unquote('alpha(opacity=' + $opacityIE + ')'); // IE 6 & 7 5 | opacity: $opacity; 6 | } -------------------------------------------------------------------------------- /src/x-opacity/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-opacity** 2 | 3 | > Description：opacity 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-opacity(<%=variable%>opacity); 8 | 9 | **2. example** 10 | 11 | div { 12 | <%=include%>x-opacity(0.5); 13 | } 14 | 15 | **3. source** 16 | 17 | * [http://css-tricks.com/almanac/properties/o/opacity/](http://css-tricks.com/almanac/properties/o/opacity/) 18 | -------------------------------------------------------------------------------- /src/x-perspective-origin/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-perspective-origin

3 |
4 |

top left

5 |
6 |
7 |
8 |
9 |
10 |

default

11 |
12 |
13 |
14 |
15 |
-------------------------------------------------------------------------------- /src/x-perspective-origin/example.style: -------------------------------------------------------------------------------- 1 | #x-perspective-origin-example { 2 | .default, 3 | .origin { 4 | width: 90%; 5 | margin: 5px auto; 6 | border: 1px solid #ccc; 7 | <%=include%>x-perspective(100px); 8 | } 9 | .default { 10 | <%=include%>x-perspective-origin(); 11 | } 12 | .origin { 13 | <%=include%>x-perspective-origin(top left); 14 | } 15 | .child { 16 | <%=include%>x-inline-block(); 17 | width: 30px; 18 | height: 30px; 19 | margin: 5px; 20 | background: #ccc; 21 | <%=include%>x-transform(rotateY(30deg)); 22 | } 23 | } 24 | 25 | -------------------------------------------------------------------------------- /src/x-perspective-origin/mixin.less: -------------------------------------------------------------------------------- 1 | .x-perspective-origin(@origin:50% 50%) { 2 | -webkit-perspective-origin: @origin; 3 | -moz-perspective-origin: @origin; 4 | perspective-origin: @origin; 5 | } -------------------------------------------------------------------------------- /src/x-perspective-origin/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-perspective-origin($origin:50% 50%) { 2 | -webkit-perspective-origin: $origin; 3 | -moz-perspective-origin: $origin; 4 | perspective-origin: $origin; 5 | } -------------------------------------------------------------------------------- /src/x-perspective-origin/mixin.styl: -------------------------------------------------------------------------------- 1 | x-perspective-origin($origin=50% 50%) { 2 | -webkit-perspective-origin: $origin; 3 | -moz-perspective-origin: $origin; 4 | perspective-origin: $origin; 5 | } -------------------------------------------------------------------------------- /src/x-perspective-origin/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-perspective-origin** 2 | 3 | > Description：Determines the origin for the perspective property（Actually set the X axis and Y axis position）. 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-perspective-origin(<%=variable%>origin); 8 | 9 | params： 10 | 11 | * <%=variable%>origin --- left|center|right|length|% top|center|bottom|length|% 12 | 13 | note： 14 | 15 | * The default value is "50% 50%" . 16 | 17 | * Must use with the perspective property . 18 | 19 | **2. example** 20 | 21 | div { 22 | <%=include%>x-perspective(100px); 23 | <%=include%>x-perspective-origin(top left); 24 | } 25 | 26 | **3. source** 27 | 28 | * [http://css-tricks.com/almanac/properties/p/perspective-origin/](http://css-tricks.com/almanac/properties/p/perspective-origin/) 29 | * [http://www.w3cplus.com/css3/transform-basic-property.html](http://www.w3cplus.com/css3/transform-basic-property.html) 30 | 31 | -------------------------------------------------------------------------------- /src/x-perspective/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-perspective

3 |
4 |

100px

5 |
6 |
7 |
8 |
9 |
10 |

none

11 |
12 |
13 |
14 |
15 |
-------------------------------------------------------------------------------- /src/x-perspective/example.style: -------------------------------------------------------------------------------- 1 | #x-perspective-example { 2 | .normal, 3 | .perspective { 4 | width: 90%; 5 | margin: 5px auto; 6 | border: 1px solid #ccc; 7 | } 8 | .normal { 9 | <%=include%>x-perspective(); 10 | } 11 | .perspective { 12 | <%=include%>x-perspective(100px); 13 | } 14 | .child { 15 | <%=include%>x-inline-block(); 16 | width: 30px; 17 | height: 30px; 18 | margin: 5px; 19 | background: #ccc; 20 | <%=include%>x-transform(rotateY(30deg)); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/x-perspective/mixin.less: -------------------------------------------------------------------------------- 1 | .x-perspective(@value:none) { 2 | -webkit-perspective: @value; 3 | -moz-perspective: @value; 4 | perspective: @value; 5 | } -------------------------------------------------------------------------------- /src/x-perspective/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-perspective($value:none) { 2 | -webkit-perspective: $value; 3 | -moz-perspective: $value; 4 | perspective: $value; 5 | } -------------------------------------------------------------------------------- /src/x-perspective/mixin.styl: -------------------------------------------------------------------------------- 1 | x-perspective($value=none) { 2 | -webkit-perspective: $value; 3 | -moz-perspective: $value; 4 | perspective: $value; 5 | } -------------------------------------------------------------------------------- /src/x-perspective/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-perspective** 2 | 3 | > Description：Gives an element a 3D-space by affecting the distance between the Z plane and the user. 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-perspective(<%=variable%>value); 8 | 9 | params： 10 | 11 | * <%=variable%>value --- none（default value）| length 12 | 13 | **2. example** 14 | 15 | div { 16 | <%=include%>x-perspective(500px); 17 | } 18 | 19 | **3. source** 20 | 21 | * [http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/](http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/) 22 | * [http://css-tricks.com/almanac/properties/p/perspective/](http://css-tricks.com/almanac/properties/p/perspective/) 23 | * [http://www.w3cplus.com/css3/transform-basic-property.html](http://www.w3cplus.com/css3/transform-basic-property.html) 24 | 25 | -------------------------------------------------------------------------------- /src/x-placeholder/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-placeholder

3 | 4 |
-------------------------------------------------------------------------------- /src/x-placeholder/example.style: -------------------------------------------------------------------------------- 1 | #x-placeholder-example input { 2 | <%=include%>x-placeholder(red); 3 | } -------------------------------------------------------------------------------- /src/x-placeholder/mixin.less: -------------------------------------------------------------------------------- 1 | .x-placeholder(@color) { 2 | &::-moz-placeholder { 3 | color: @color; 4 | opacity: 1; 5 | } 6 | &:-moz-placeholder { 7 | color: @color; 8 | } 9 | &:-ms-input-placeholder { 10 | color: @color; 11 | } 12 | &::-webkit-input-placeholder { 13 | color: @color; 14 | } 15 | } -------------------------------------------------------------------------------- /src/x-placeholder/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-placeholder($color) { 2 | &::-moz-placeholder { 3 | color: $color; 4 | opacity: 1; 5 | } 6 | &:-moz-placeholder { 7 | color: $color; 8 | } 9 | &:-ms-input-placeholder { 10 | color: $color; 11 | } 12 | &::-webkit-input-placeholder { 13 | color: $color; 14 | } 15 | } -------------------------------------------------------------------------------- /src/x-placeholder/mixin.styl: -------------------------------------------------------------------------------- 1 | x-placeholder($color) { 2 | &::-moz-placeholder { 3 | color: $color; 4 | opacity: 1; 5 | } 6 | &:-moz-placeholder { 7 | color: $color; 8 | } 9 | &:-ms-input-placeholder { 10 | color: $color; 11 | } 12 | &::-webkit-input-placeholder { 13 | color: $color; 14 | } 15 | } -------------------------------------------------------------------------------- /src/x-placeholder/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-placeholder** 2 | 3 | > Description：set placeholder text color . 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-placeholder(<%=variable%>color); 8 | 9 | params： 10 | 11 | * <%=variable%>color --- The placeholder text's color 12 | 13 | **2. example** 14 | 15 | input { 16 | <%=include%>x-placeholder(red); 17 | } 18 | 19 | **3. source** 20 | 21 | * [http://css-tricks.com/almanac/selectors/p/placeholder/](http://css-tricks.com/almanac/selectors/p/placeholder/) 22 | * [https://github.com/twbs/bootstrap/pull/11526](https://github.com/twbs/bootstrap/pull/11526) 23 | -------------------------------------------------------------------------------- /src/x-radial-gradient/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-radial-gradient

3 | 4 | 5 |
-------------------------------------------------------------------------------- /src/x-radial-gradient/example.style: -------------------------------------------------------------------------------- 1 | #x-radial-gradient-example span { 2 | display: block; 3 | width: 100px; 4 | height: 100px; 5 | margin: 5px auto; 6 | <%=include%>x-border-radius(50px); 7 | 8 | &.circle { 9 | <%=include%>x-radial-gradient(red 5%, green 50%); 10 | } 11 | &.ellipse { 12 | <%=include%>x-radial-gradient(ellipse at top left, red 5%, green 50%); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/x-radial-gradient/mixin.less: -------------------------------------------------------------------------------- 1 | .x-radial-gradient(...) { 2 | @param: ~`"@{arguments}".toString().replace(/[\[\]]/g, "")`; 3 | background: -webkit-radial-gradient(@param); 4 | background: -moz-radial-gradient(@param); 5 | background: -ms-radial-gradient(@param); 6 | background: radial-gradient(@param); 7 | } -------------------------------------------------------------------------------- /src/x-radial-gradient/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-radial-gradient($arguments...) { 2 | background: -webkit-radial-gradient($arguments); 3 | background: -moz-radial-gradient($arguments); 4 | background: -ms-radial-gradient($arguments); 5 | background: radial-gradient($arguments); 6 | } -------------------------------------------------------------------------------- /src/x-radial-gradient/mixin.styl: -------------------------------------------------------------------------------- 1 | x-radial-gradient() { 2 | $param = unquote(join(',', arguments)); 3 | background: -webkit-radial-gradient($param); 4 | background: -moz-radial-gradient($param); 5 | background: -ms-radial-gradient($param); 6 | background: radial-gradient($param); 7 | } -------------------------------------------------------------------------------- /src/x-radial-gradient/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-radial-gradient** 2 | 3 | > Description：CSS3 radial gradient 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-radial-gradient(...); 8 | 9 | params： 10 | 11 | * ... --- [ | ]? [at ]?, 12 | 13 | * ：circle | ellipse | [length | %]{1,2} ，default to circle 14 | 15 | * ：closest-side | closest-corner | farthest-side | farthest-corner | length | [length | %]{2}，default to farthest-corner 16 | 17 | * ： [length | % | left | center | right ]? [length> | % | top | center | bottom ]?，default to center 18 | 19 | * [color-stop-list]：color [length | %]? [, color [length | %]?]* 20 | 21 | **2. example** 22 | 23 | div { 24 | <%=include%>x-radial-gradient(circle, red, green); 25 | } 26 | 27 | **3. source** 28 | 29 | * [http://www.w3cplus.com/css3/new-css3-radial-gradient.html](http://www.w3cplus.com/css3/new-css3-radial-gradient.html) 30 | * [http://dev.w3.org/csswg/css-images-3/#radial-gradients](http://dev.w3.org/csswg/css-images-3/#radial-gradients) 31 | 32 | -------------------------------------------------------------------------------- /src/x-text-overflow/example.html: -------------------------------------------------------------------------------- 1 |
测试x-text-overflow，有看到省略号吗
-------------------------------------------------------------------------------- /src/x-text-overflow/example.style: -------------------------------------------------------------------------------- 1 | #x-text-overflow-example { 2 | <%=include%>x-text-overflow(ellipsis); 3 | } -------------------------------------------------------------------------------- /src/x-text-overflow/mixin.less: -------------------------------------------------------------------------------- 1 | .x-text-overflow(@cutway: clip) { 2 | overflow: hidden; 3 | text-overflow: @cutway; 4 | white-space: nowrap; 5 | } -------------------------------------------------------------------------------- /src/x-text-overflow/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-text-overflow($cutway: clip) { 2 | overflow: hidden; 3 | text-overflow: $cutway; 4 | white-space: nowrap; 5 | } -------------------------------------------------------------------------------- /src/x-text-overflow/mixin.styl: -------------------------------------------------------------------------------- 1 | x-text-overflow($cutway=clip) { 2 | overflow: hidden; 3 | text-overflow: $cutway; 4 | white-space: nowrap; 5 | } -------------------------------------------------------------------------------- /src/x-text-overflow/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-text-overflow** 2 | 3 | > Description：text-overflow 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-text-overflow(<%=variable%>cutway); 8 | 9 | params： 10 | 11 | * <%=variable%>cutway --- ellipsis | clip (default value) 12 | 13 | **2. example** 14 | 15 | div { 16 | <%=include%>x-text-overflow(ellipsis); 17 | } 18 | 19 | **3. source** 20 | 21 | * [http://css-tricks.com/almanac/properties/t/text-overflow/](http://css-tricks.com/almanac/properties/t/text-overflow/) 22 | -------------------------------------------------------------------------------- /src/x-transform-origin/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-transform-origin

3 | default 4 | top left 5 |
6 | -------------------------------------------------------------------------------- /src/x-transform-origin/example.style: -------------------------------------------------------------------------------- 1 | #x-transform-origin-example span { 2 | display: block; 3 | background: #ccc; 4 | width: 100px; 5 | height: 50px; 6 | margin: 20px auto; 7 | <%=include%>x-transform(rotate(90deg)); 8 | 9 | &.default { 10 | <%=include%>x-transform-origin(); 11 | } 12 | &.topleft { 13 | <%=include%>x-transform-origin(top left); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/x-transform-origin/mixin.less: -------------------------------------------------------------------------------- 1 | .x-transform-origin(@value: 50% 50% 0) { 2 | -webkit-transform-origin: @value; 3 | -moz-transform-origin: @value; 4 | -ms-transform-origin: @value; 5 | transform-origin: @value; 6 | } -------------------------------------------------------------------------------- /src/x-transform-origin/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-transform-origin($value: 50% 50% 0) { 2 | -webkit-transform-origin: $value; 3 | -moz-transform-origin: $value; 4 | -ms-transform-origin: $value; 5 | transform-origin: $value; 6 | } -------------------------------------------------------------------------------- /src/x-transform-origin/mixin.styl: -------------------------------------------------------------------------------- 1 | x-transform-origin($value=50% 50% 0) { 2 | -webkit-transform-origin: $value; 3 | -moz-transform-origin: $value; 4 | -ms-transform-origin: $value; 5 | transform-origin: $value; 6 | } -------------------------------------------------------------------------------- /src/x-transform-origin/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-transform-origin** 2 | 3 | > Description：lets you modify the origin for transformations of an element. 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-transform-origin(<%=variable%>value); 8 | 9 | params： 10 | 11 | * <%=variable%>value --- x-offset y-offset z-offset 12 | 13 | * x-offset --- left|center|right|length|% 14 | 15 | * y-offset --- top|center|bottom|length|% 16 | 17 | * z-offset --- length 18 | 19 | The default value is：50% 50% 0 20 | 21 | **2. example** 22 | 23 | div { 24 | <%=include%>x-transform-origin(top left); 25 | } 26 | 27 | **3. source** 28 | 29 | * [http://www.w3school.com.cn/cssref/pr_transform-origin.asp](http://www.w3school.com.cn/cssref/pr_transform-origin.asp) 30 | * [http://css-tricks.com/almanac/properties/t/transform-origin/](http://css-tricks.com/almanac/properties/t/transform-origin/) 31 | 32 | -------------------------------------------------------------------------------- /src/x-transform-style/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-transform-style

3 |
4 | 5 | 6 |
7 |
8 | 9 | 10 |
11 |
-------------------------------------------------------------------------------- /src/x-transform-style/example.style: -------------------------------------------------------------------------------- 1 | #x-transform-style-example { 2 | .default, 3 | .d3 { 4 | width: 150px; 5 | margin: 0 auto; 6 | background: #ccc; 7 | <%=include%>x-transform(rotateY(85deg)); 8 | } 9 | .default { 10 | <%=include%>x-transform-style(); 11 | } 12 | .d3 { 13 | <%=include%>x-transform-style(preserve-3d); 14 | } 15 | span { 16 | display: block; 17 | width: 150px; 18 | height: 50px; 19 | margin: 10px auto; 20 | background: #ccc; 21 | } 22 | .one { 23 | background: red; 24 | <%=include%>x-transform(rotateX(30deg)); 25 | } 26 | .two { 27 | background: green; 28 | <%=include%>x-transform(rotateX(-30deg)); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/x-transform-style/mixin.less: -------------------------------------------------------------------------------- 1 | .x-transform-style(@value:flat) { 2 | -webkit-transform-style: @value; 3 | -moz-transform-style: @value; 4 | transform-style: @value; 5 | } -------------------------------------------------------------------------------- /src/x-transform-style/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-transform-style($value:flat) { 2 | -webkit-transform-style: $value; 3 | -moz-transform-style: $value; 4 | transform-style: $value; 5 | } -------------------------------------------------------------------------------- /src/x-transform-style/mixin.styl: -------------------------------------------------------------------------------- 1 | x-transform-style($value=flat) { 2 | -webkit-transform-style: $value; 3 | -moz-transform-style: $value; 4 | transform-style: $value; 5 | } -------------------------------------------------------------------------------- /src/x-transform-style/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-transform-style** 2 | 3 | > Description：determines the element's children are positioned in 3D space, or flattened. 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-transform-style(<%=variable%>value); 8 | 9 | params： 10 | 11 | * <%=variable%>value --- flat | preserve-3d， 12 | 13 | **2. example** 14 | 15 | div { 16 | <%=include%>x-transform-style(preserve-3d); 17 | } 18 | 19 | **3. source** 20 | 21 | * [http://www.w3school.com.cn/cssref/pr_transform-style.asp](http://www.w3school.com.cn/cssref/pr_transform-style.asp) 22 | * [http://css-tricks.com/almanac/properties/t/transform-style/](http://css-tricks.com/almanac/properties/t/transform-style/) 23 | 24 | -------------------------------------------------------------------------------- /src/x-transform/example.html: -------------------------------------------------------------------------------- 1 |
x-transform
-------------------------------------------------------------------------------- /src/x-transform/example.style: -------------------------------------------------------------------------------- 1 | #x-transform-example { 2 | <%=include%>x-transform(rotate(20deg)); 3 | } -------------------------------------------------------------------------------- /src/x-transform/mixin.less: -------------------------------------------------------------------------------- 1 | .x-transform(@value) { 2 | -webkit-transform: @value; 3 | -moz-transform: @value; 4 | -ms-transform: @value; 5 | -o-transform: @value; 6 | transform: @value; 7 | } -------------------------------------------------------------------------------- /src/x-transform/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-transform($value) { 2 | -webkit-transform: $value; 3 | -moz-transform: $value; 4 | -ms-transform: $value; 5 | -o-transform: $value; 6 | transform: $value; 7 | } -------------------------------------------------------------------------------- /src/x-transform/mixin.styl: -------------------------------------------------------------------------------- 1 | x-transform($value) { 2 | -webkit-transform: $value; 3 | -moz-transform: $value; 4 | -ms-transform: $value; 5 | -o-transform: $value; 6 | transform: $value; 7 | } -------------------------------------------------------------------------------- /src/x-transform/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-transform** 2 | 3 | > Description：css3 transform 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-transform(<%=variable%>value); 8 | 9 | params： 10 | 11 | * <%=variable%>value --- transform-functions | none（default value） 12 | 13 | **2. example** 14 | 15 | div { 16 | <%=include%>x-transform(rotate(20deg)); 17 | } 18 | 19 | **3. source** 20 | 21 | * [The available transform functions](http://www.w3school.com.cn/cssref/pr_transform.asp) 22 | 23 | -------------------------------------------------------------------------------- /src/x-transition/example.html: -------------------------------------------------------------------------------- 1 |
x-transition
-------------------------------------------------------------------------------- /src/x-transition/example.style: -------------------------------------------------------------------------------- 1 | #x-transition-example { 2 | height: 100px; 3 | <%=include%>x-transition(height 2s ease); 4 | } 5 | #x-transition-example:hover { 6 | height: 300px; 7 | } -------------------------------------------------------------------------------- /src/x-transition/mixin.less: -------------------------------------------------------------------------------- 1 | .x-transition(@value) { 2 | -webkit-transition: @value; 3 | -moz-transition: @value; 4 | -o-transition: @value; 5 | transition: @value; 6 | } -------------------------------------------------------------------------------- /src/x-transition/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-transition($value) { 2 | -webkit-transition: $value; 3 | -moz-transition: $value; 4 | -o-transition: $value; 5 | transition: $value; 6 | } -------------------------------------------------------------------------------- /src/x-transition/mixin.styl: -------------------------------------------------------------------------------- 1 | x-transition($value) { 2 | -webkit-transition: $value; 3 | -moz-transition: $value; 4 | -o-transition: $value; 5 | transition: $value; 6 | } -------------------------------------------------------------------------------- /src/x-transition/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-transition** 2 | 3 | > Description：css3 transition 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-transition(<%=variable%>value); 8 | 9 | params： 10 | 11 | * <%=variable%>value --- the composition of the value： 12 | 13 | * transition-property 14 | 15 | * transition-duration 16 | 17 | * transition-timing-function 18 | 19 | * transition-delay 20 | 21 | note：the default value is "all 0 ease 0" 22 | 23 | **2. example** 24 | 25 | div { 26 | height: 100px; 27 | <%=include%>x-transition(height 2s ease); 28 | } 29 | div:hover { 30 | height: 300px; 31 | } 32 | 33 | **3. source** 34 | 35 | * [http://css-tricks.com/almanac/properties/t/transition/](http://css-tricks.com/almanac/properties/t/transition/) 36 | 37 | -------------------------------------------------------------------------------- /src/x-user-select/example.html: -------------------------------------------------------------------------------- 1 |
2 |

x-user-select

3 | none 4 | text 5 |
-------------------------------------------------------------------------------- /src/x-user-select/example.style: -------------------------------------------------------------------------------- 1 | #x-user-select-example { 2 | span { 3 | display: block; 4 | width: 60%; 5 | margin: 5px auto; 6 | padding: 5px; 7 | <%=include%>x-hyphens(); 8 | border: 1px solid #ccc; 9 | } 10 | .none { 11 | <%=include%>x-user-select(none); 12 | } 13 | .text { 14 | <%=include%>x-user-select(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/x-user-select/mixin.less: -------------------------------------------------------------------------------- 1 | .x-user-select(@mode:text) { 2 | -webkit-user-select: @mode; 3 | -moz-user-select: @mode; 4 | -ms-user-select: @mode; 5 | user-select: @mode; 6 | } -------------------------------------------------------------------------------- /src/x-user-select/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin x-user-select($mode:text) { 2 | -webkit-user-select: $mode; 3 | -moz-user-select: $mode; 4 | -ms-user-select: $mode; 5 | user-select: $mode; 6 | } -------------------------------------------------------------------------------- /src/x-user-select/mixin.styl: -------------------------------------------------------------------------------- 1 | x-user-select($mode=text) { 2 | -webkit-user-select: $mode; 3 | -moz-user-select: $mode; 4 | -ms-user-select: $mode; 5 | user-select: $mode; 6 | } -------------------------------------------------------------------------------- /src/x-user-select/readme.template: -------------------------------------------------------------------------------- 1 | ### **x-user-select** 2 | 3 | > Description：css3 user-select 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>x-user-select(<%=variable%>mode); 8 | 9 | params： 10 | 11 | * <%=variable%>mode --- none | text（default value）| toggle | element | elements | all | inherit 12 | 13 | note： 14 | 15 | * In addition to “none" and "text", other value has compatibility problems. 16 | 17 | **2. example** 18 | 19 | div { 20 | <%=include%>x-user-select(); 21 | } 22 | 23 | **3. source** 24 | 25 | * [http://css-tricks.com/almanac/properties/u/user-select/](http://css-tricks.com/almanac/properties/u/user-select/) 26 | * [https://developer.mozilla.org/en-US/docs/Web/CSS/user-select](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) 27 | * [http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select](http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select) 28 | -------------------------------------------------------------------------------- /tasks/add/example.html.handlebars: -------------------------------------------------------------------------------- 1 |
{{modName}}
-------------------------------------------------------------------------------- /tasks/add/example.style.handlebars: -------------------------------------------------------------------------------- 1 | #{{modName}}-example { 2 | <%=include%>{{modName}}(); 3 | } 4 | -------------------------------------------------------------------------------- /tasks/add/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview add module 3 | * @usage grunt add:modName 4 | */ 5 | module.exports = function(grunt) { 6 | 7 | 'use strict'; 8 | 9 | var mkfiles = require('mkfiles'); 10 | 11 | function generateFiles(modName, desc) { 12 | var taskDir = './tasks/add/'; 13 | 14 | mkfiles({ 15 | path: grunt.config('srcDir') + '/', 16 | dirs: [modName], 17 | files: [{ 18 | file: 'example.html', 19 | content: { 20 | template: taskDir + 'example.html.handlebars', 21 | data: { 22 | modName: modName 23 | } 24 | } 25 | }, { 26 | file: 'example.style', 27 | content: { 28 | template: taskDir + 'example.style.handlebars', 29 | data: { 30 | modName: modName 31 | } 32 | } 33 | }, { 34 | file: 'readme.template', 35 | content: { 36 | template: taskDir + 'readme.handlebars', 37 | data: { 38 | modName: modName, 39 | desc: desc 40 | } 41 | } 42 | }, { 43 | file: 'mixin.less', 44 | content: { 45 | template: taskDir + 'mixin.handlebars', 46 | data: { 47 | modName: modName, 48 | define: '.' 49 | } 50 | } 51 | }, { 52 | file: 'mixin.scss', 53 | content: { 54 | template: taskDir + 'mixin.handlebars', 55 | data: { 56 | modName: modName, 57 | define: '@mixin ' 58 | } 59 | } 60 | }, { 61 | file: 'mixin.styl', 62 | content: { 63 | template: taskDir + 'mixin.handlebars', 64 | data: { 65 | modName: modName, 66 | define: '' 67 | } 68 | } 69 | }] 70 | }); 71 | } 72 | 73 | grunt.registerTask('add', function(modName, desc) { 74 | // mixin module name must begin with 'x-' 75 | if (modName.substring(0, 2) != 'x-') { 76 | modName = 'x-' + modName; 77 | } 78 | 79 | generateFiles(modName, desc || ''); 80 | }); 81 | 82 | }; -------------------------------------------------------------------------------- /tasks/add/mixin.handlebars: -------------------------------------------------------------------------------- 1 | {{define}}{{modName}}() { 2 | 3 | } -------------------------------------------------------------------------------- /tasks/add/readme.handlebars: -------------------------------------------------------------------------------- 1 | ### **{{modName}}** 2 | 3 | > Description：{{desc}} 4 | 5 | **1. usage** 6 | 7 | syntax：<%=include%>{{modName}}(<%=variable%>param); 8 | 9 | params： 10 | 11 | **2. example** 12 | 13 | div { 14 | <%=include%>{{modName}}(); 15 | } 16 | 17 | **3. source** 18 | 19 | * []() 20 | 21 | -------------------------------------------------------------------------------- /tasks/generate/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview generate readme and example for mixin module 3 | */ 4 | module.exports = function(grunt) { 5 | 6 | 'use strict'; 7 | 8 | var fs = require('fs'); 9 | var path = require('path'); 10 | var globule = require('globule'); 11 | var mkfiles = require('mkfiles'); 12 | 13 | var keywordMap = { 14 | less: { 15 | include: '.', 16 | variable: '@' 17 | }, 18 | scss: { 19 | include: '@include ', 20 | variable: '$' 21 | }, 22 | styl: { 23 | include: '', 24 | variable: '$' 25 | } 26 | }; 27 | 28 | function convert(filepath, type) { 29 | var curKeywordMap = keywordMap[type]; 30 | var content = fs.readFileSync(filepath, { 31 | encoding: 'utf8' 32 | }); 33 | 34 | return content.replace(/<%=include%>/g, curKeywordMap.include) 35 | .replace(/<%=variable%>/g, curKeywordMap.variable); 36 | } 37 | 38 | function generateFiles(originFilePath) { 39 | var outputFileName = originFilePath.indexOf('readme') != -1 ? 'readme' : 'example'; 40 | 41 | mkfiles({ 42 | path: path.dirname(originFilePath), 43 | dirs: [''], 44 | files: [{ 45 | file: outputFileName + '.less.tmp', 46 | content: convert(originFilePath, 'less') 47 | }, { 48 | file: outputFileName + '.scss.tmp', 49 | content: convert(originFilePath, 'scss') 50 | }, { 51 | file: outputFileName + '.styl.tmp', 52 | content: convert(originFilePath, 'styl') 53 | }] 54 | }); 55 | } 56 | 57 | grunt.registerTask('generate', function() { 58 | globule.find({ 59 | src: ['**/readme.template', '**/example.style'], 60 | srcBase: grunt.config('srcDir') + '/', 61 | prefixBase: true 62 | }).forEach(generateFiles); 63 | }); 64 | 65 | }; -------------------------------------------------------------------------------- /tasks/version/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview set version for package.json, bower.json, and component.json 3 | * @usage grunt version:x.x.x 4 | */ 5 | module.exports = function(grunt) { 6 | 7 | 'use strict'; 8 | 9 | var fse = require('fs-extra'); 10 | var semver = require('semver'); 11 | 12 | grunt.registerTask('version', function(version) { 13 | if (!semver.valid(version)) { 14 | throw Error(version + ' is unvalid version !'); 15 | } 16 | 17 | var pkg = fse.readJsonSync('package.json'); 18 | var bower = fse.readJsonSync('bower.json'); 19 | var component = fse.readJsonSync('component.json'); 20 | 21 | pkg.version = version; 22 | bower.version = version; 23 | component.version = version; 24 | 25 | fse.writeJsonSync('package.json', pkg); 26 | fse.writeJsonSync('bower.json', bower); 27 | fse.writeJsonSync('component.json', component); 28 | 29 | console.log('The package version is set to ' + version + ' !'); 30 | }); 31 | 32 | }; -------------------------------------------------------------------------------- /test/less/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | x-mixins test page 6 | 7 | 25 | 26 | 27 |

28 | demo for less 29 | demo for sass 30 | demo for stylus 31 |

32 | 33 |
x-animation
34 |
35 |

x-appearance

36 | I like button 37 |
38 |
39 |

x-backface-visibility

40 | 44 |

45 | visible 46 | visible 47 |

48 |
49 |
50 |

x-background-clip

51 | border-box 52 | padding-box 53 | content-box 54 |
55 |
56 |

x-background-origin

57 | border-box 58 | padding-box 59 | content-box 60 |
61 |
62 |

x-background-retina

63 | 64 |
65 |
66 |

x-background-size

67 | 68 | 69 | 70 |
71 |
x-border-radius
72 |
x-border-radius top
73 |
x-border-radius right
74 |
x-border-radius bottom
75 |
x-border-radius left
76 |
77 |

x-border-triangle

78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 |
x-box-shadow
88 |
x-box-sizing
89 |
90 |

x-clearfix

91 |
92 |

see me by clearfix

93 |
94 |
95 |
96 |

x-font-face

97 | < 98 |
99 |
100 |

x-grayscale

101 | 102 |
103 |
104 |

x-hyphens

105 | The hyphens property controls hyphenation of text in block level elements. 106 |
107 |
108 |

x-inline-block

109 | A 110 | B 111 |
112 |
113 |

x-linear-gradient

114 |
115 |

to top

116 |

to right

117 |

to bottom

118 |

to left

119 |
120 |
121 |

0deg

122 |

90deg

123 |

180deg

124 |

270deg

125 |
126 |
127 |
x-min-height
128 |
x-opacity
129 |
130 |

x-perspective-origin

131 |
132 |

top left

133 |
134 |
135 |
136 |
137 |
138 |

default

139 |
140 |
141 |
142 |
143 |
144 |
145 |

x-perspective

146 |
147 |

100px

148 |
149 |
150 |
151 |
152 |
153 |

none

154 |
155 |
156 |
157 |
158 |
159 |
160 |

x-placeholder

161 | 162 |
163 |
164 |

x-radial-gradient

165 | 166 | 167 |
168 |
测试x-text-overflow，有看到省略号吗
169 |
170 |

x-transform-origin

171 | default 172 | top left 173 |
174 | 175 |
176 |

x-transform-style

177 |
178 | 179 | 180 |
181 |
182 | 183 | 184 |
185 |
186 |
x-transform
187 |
x-transition
188 |
189 |

x-user-select

190 | none 191 | text 192 |
193 | 194 | -------------------------------------------------------------------------------- /test/sass/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | x-mixins test page 6 | 7 | 25 | 26 | 27 |

28 | demo for less 29 | demo for sass 30 | demo for stylus 31 |

32 | 33 |
x-animation
34 |
35 |

x-appearance

36 | I like button 37 |
38 |
39 |

x-backface-visibility

40 | 44 |

45 | visible 46 | visible 47 |

48 |
49 |
50 |

x-background-clip

51 | border-box 52 | padding-box 53 | content-box 54 |
55 |
56 |

x-background-origin

57 | border-box 58 | padding-box 59 | content-box 60 |
61 |
62 |

x-background-retina

63 | 64 |
65 |
66 |

x-background-size

67 | 68 | 69 | 70 |
71 |
x-border-radius
72 |
x-border-radius top
73 |
x-border-radius right
74 |
x-border-radius bottom
75 |
x-border-radius left
76 |
77 |

x-border-triangle

78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 |
x-box-shadow
88 |
x-box-sizing
89 |
90 |

x-clearfix

91 |
92 |

see me by clearfix

93 |
94 |
95 |
96 |

x-font-face

97 | < 98 |
99 |
100 |

x-grayscale

101 | 102 |
103 |
104 |

x-hyphens

105 | The hyphens property controls hyphenation of text in block level elements. 106 |
107 |
108 |

x-inline-block

109 | A 110 | B 111 |
112 |
113 |

x-linear-gradient

114 |
115 |

to top

116 |

to right

117 |

to bottom

118 |

to left

119 |
120 |
121 |

0deg

122 |

90deg

123 |

180deg

124 |

270deg

125 |
126 |
127 |
x-min-height
128 |
x-opacity
129 |
130 |

x-perspective-origin

131 |
132 |

top left

133 |
134 |
135 |
136 |
137 |
138 |

default

139 |
140 |
141 |
142 |
143 |
144 |
145 |

x-perspective

146 |
147 |

100px

148 |
149 |
150 |
151 |
152 |
153 |

none

154 |
155 |
156 |
157 |
158 |
159 |
160 |

x-placeholder

161 | 162 |
163 |
164 |

x-radial-gradient

165 | 166 | 167 |
168 |
测试x-text-overflow，有看到省略号吗
169 |
170 |

x-transform-origin

171 | default 172 | top left 173 |
174 | 175 |
176 |

x-transform-style

177 |
178 | 179 | 180 |
181 |
182 | 183 | 184 |
185 |
186 |
x-transform
187 |
x-transition
188 |
189 |

x-user-select

190 | none 191 | text 192 |
193 | 194 | -------------------------------------------------------------------------------- /test/styl/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | x-mixins test page 6 | 7 | 25 | 26 | 27 |

28 | demo for less 29 | demo for sass 30 | demo for stylus 31 |

32 | 33 |
x-animation
34 |
35 |

x-appearance

36 | I like button 37 |
38 |
39 |

x-backface-visibility

40 | 44 |

45 | visible 46 | visible 47 |

48 |
49 |
50 |

x-background-clip

51 | border-box 52 | padding-box 53 | content-box 54 |
55 |
56 |

x-background-origin

57 | border-box 58 | padding-box 59 | content-box 60 |
61 |
62 |

x-background-retina

63 | 64 |
65 |
66 |

x-background-size

67 | 68 | 69 | 70 |
71 |
x-border-radius
72 |
x-border-radius top
73 |
x-border-radius right
74 |
x-border-radius bottom
75 |
x-border-radius left
76 |
77 |

x-border-triangle

78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 |
x-box-shadow
88 |
x-box-sizing
89 |
90 |

x-clearfix

91 |
92 |

see me by clearfix

93 |
94 |
95 |
96 |

x-font-face

97 | < 98 |
99 |
100 |

x-grayscale

101 | 102 |
103 |
104 |

x-hyphens

105 | The hyphens property controls hyphenation of text in block level elements. 106 |
107 |
108 |

x-inline-block

109 | A 110 | B 111 |
112 |
113 |

x-linear-gradient

114 |
115 |

to top

116 |

to right

117 |

to bottom

118 |

to left

119 |
120 |
121 |

0deg

122 |

90deg

123 |

180deg

124 |

270deg

125 |
126 |
127 |
x-min-height
128 |
x-opacity
129 |
130 |

x-perspective-origin

131 |
132 |

top left

133 |
134 |
135 |
136 |
137 |
138 |

default

139 |
140 |
141 |
142 |
143 |
144 |
145 |

x-perspective

146 |
147 |

100px

148 |
149 |
150 |
151 |
152 |
153 |

none

154 |
155 |
156 |
157 |
158 |
159 |
160 |

x-placeholder

161 | 162 |
163 |
164 |

x-radial-gradient

165 | 166 | 167 |
168 |
测试x-text-overflow，有看到省略号吗
169 |
170 |

x-transform-origin

171 | default 172 | top left 173 |
174 | 175 |
176 |

x-transform-style

177 |
178 | 179 | 180 |
181 |
182 | 183 | 184 |
185 |
186 |
x-transform
187 |
x-transition
188 |
189 |

x-user-select

190 | none 191 | text 192 |
193 | 194 | --------------------------------------------------------------------------------