Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frontainer/autocss
「Automation of CSS」 Samples
https://github.com/frontainer/autocss
Last synced: about 7 hours ago
JSON representation
「Automation of CSS」 Samples
- Host: GitHub
- URL: https://github.com/frontainer/autocss
- Owner: frontainer
- Created: 2015-11-18T03:34:38.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2015-11-18T03:39:23.000Z (about 9 years ago)
- Last Synced: 2025-01-18T01:35:21.091Z (19 days ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Automation of CSS
=======
## Node.js
[Node.js](https://nodejs.org/en/)がインストールされているか確認
```
# node
node -v
# npm
npm -v
```
適当なディレクトリを作成して実行
```
npm init
```
## Gulp.js
インストール
```
npm i gulp -g
```
[Gulp.js](http://gulpjs.com/)がインストールされているか確認
```
gulp -v
```
## 今日使うパッケージをまとめてインストール
```
npm i gulp-sass --save-dev
npm i gulp-sass-lint --save-dev
npm i gulp-csso --save-dev
npm i gulp-postcss --save-dev
npm i autoprefixer --save-dev
npm i doiuse --save-dev
npm i css-mqpacker --save-dev
```
※ わかりやすくするためにワンライナーにはしてません
## gulpfile.js
```js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var postcss = require('gulp-postcss');
var csso = require('gulp-csso');
gulp.task('default', function () {
return gulp.watch('*.scss',['css']);
});
var browsers = [
//'last 2 versions',
// 'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
//.pipe(sassLint())
//.pipe(sassLint.format())
//.pipe(sassLint.failOnError())
.pipe(sass())
//.pipe(postcss([
// require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
// require('autoprefixer')({browsers: browsers}),
// require('css-mqpacker')
//]))
//.pipe(csso())
.pipe(gulp.dest('dest'));
});
```
## gulp-sass
[gulp-sass](https://www.npmjs.com/package/gulp-sass)
style.scss
```css
$font-size: 30px;
$link-color: #ff290e;
.test {
.test-heading {
font-size: $font-size;
font-weight: bold;
}
.test-content {
padding: 10px 10px 10px 10px;
}
}
```
実行するコマンド
```
gulp css
```
## gulp-sass-lint
[gulp-sass-lint](https://www.npmjs.com/package/gulp-sass-lint)
.sass-lint.yml
```
# sass-lint config generated by make-sass-lint-config v0.0.3
#
# The following scss-lint Linters are not yet supported by sass-lint:
# BemDepth, DisableLinterReason, ElsePlacement, PropertyCount
# PropertyUnits, SelectorDepth, SelectorFormat, SpaceAroundOperator
# TrailingWhitespace, UnnecessaryMantissa, UnnecessaryParentReference, Compass::*
#
# The following settings/values are unsupported by sass-lint:
# Linter Indentation, option "allow_non_nested_indentation"
# Linter Indentation, option "character"
# Linter NestingDepth, option "ignore_parent_selectors"
# Linter PropertySortOrder, option "ignore_unspecified"
# Linter PropertySortOrder, option "min_properties"
# Linter PropertySortOrder, option "separate_groups"
# Linter SpaceBeforeBrace, option "allow_single_line_padding"
# Linter VendorPrefix, option "identifier_list"
files:
include: '**/*.scss'
options:
formatter: stylish
merge-default-rules: false
rules:
border-zero:
- 1
- convention: zero
brace-style:
- 1
- allow-single-line: true
clean-import-paths:
- 1
- filename-extension: false
leading-underscore: false
empty-line-between-blocks:
- 0
- ignore-single-line-rulesets: true
extends-before-declarations: 1
extends-before-mixins: 1
final-newline:
- 0
- include: true
force-attribute-nesting: 1
force-element-nesting: 1
force-pseudo-nesting: 1
function-name-format:
- 1
- allow-leading-underscore: true
convention: hyphenatedlowercase
hex-length:
- 1
- style: short
hex-notation:
- 1
- style: lowercase
indentation:
- 1
- size: 4
leading-zero:
- 1
- include: false
mixin-name-format:
- 1
- allow-leading-underscore: true
convention: hyphenatedlowercase
mixins-before-declarations: 1
nesting-depth:
- 1
- max-depth: 3
no-color-keyword: 1
no-color-literals: 0
no-css-comments: 0
no-debug: 1
no-duplicate-properties: 1
no-empty-rulesets: 1
no-extends: 0
no-ids: 1
no-important: 1
no-invalid-hex: 1
no-mergeable-selectors: 0
no-misspelled-properties:
- 1
- extra-properties: []
no-qualifying-elements:
- 1
- allow-element-with-attribute: false
allow-element-with-class: false
allow-element-with-id: false
no-trailing-zero: 0
no-transition-all: 0
no-url-protocols: 1
no-vendor-prefixes:
- 1
- additional-identifiers: []
excluded-identifiers: []
placeholder-in-extend: 1
placeholder-name-format:
- 1
- allow-leading-underscore: true
convention: hyphenatedlowercase
property-sort-order: 0
quotes:
- 1
- style: single
shorthand-values:
- 1
- allowed-shorthands:
- 1
- 2
- 3
single-line-per-selector: 1
space-after-bang:
- 1
- include: false
space-after-colon:
- 1
- include: true
space-after-comma:
- 1
- include: true
space-before-bang:
- 1
- include: true
space-before-brace:
- 1
- include: true
space-before-colon: 1
space-between-parens:
- 1
- include: false
trailing-semicolon: 1
url-quotes: 1
variable-for-property:
- 0
- properties: []
variable-name-format:
- 1
- allow-leading-underscore: true
convention: hyphenatedlowercase
zero-unit: 1
```
## gulp-csso
[gulp-csso](https://www.npmjs.com/package/gulp-csso)
## gulp-postcss
[gulp-postcss](https://www.npmjs.com/package/gulp-postcss)
## autoprefixer
[autoprefixer](https://www.npmjs.com/package/autoprefixer)
style.scss
```css
a {
&:hover {
transform: scale(1.2);
}
}
```
## doiuse
[doiuse](https://www.npmjs.com/package/doiuse)
style.scss
```css
a {
&:hover {
transform: scale(1.2);
filter: blur(10px);
}
}
```
## css-mqpacker
[css-mqpacker](https://www.npmjs.com/package/css-mqpacker)
style.scss
```css
@media screen and (max-width: 800px) {
.test {
width: 100px;
}
}
@media screen and (max-width: 800px) {
.test2 {
width: 200px;
}
}
```
## watch
```
gulp
```