├── .gitignore
├── README.md
├── RECURSOS.md
├── Sesion0
├── PostCSS-Sesion-0.pdf
└── demo
│ ├── dist
│ └── style.css
│ └── style.css
├── Sesion1-Entornos-de-trabajo
├── PostCSS-Sesion1-Entornos-de-desarrollo.pdf
├── gulp
│ ├── dest
│ │ └── style.css
│ ├── gulpfile.js
│ ├── package.json
│ └── src
│ │ └── style.css
└── npm
│ ├── config-postcss.json
│ ├── dest
│ ├── style.css
│ └── style.css.map
│ ├── package.json
│ └── src
│ └── style.css
├── Sesion2-CSS-del-Futuro
├── dest
│ └── style.css
├── gulpfile.js
├── package.json
└── src
│ ├── style.css
│ └── utils
│ └── vars.css
└── Sesion3-de-Sass-a-PostCSS
├── PostCSS-Sesion3-De-Sass-a-PostCSS.pdf
├── with-sass
├── dest
│ └── style.css
├── gulpfile.js
├── package.json
└── src
│ └── style.scss
├── without-sass-precss
├── dest
│ └── style.css
├── gulpfile.js
├── package.json
└── src
│ ├── style.css
│ └── utils
│ ├── mixin.css
│ └── vars.css
└── without-sass
├── dest
└── style.css
├── gulpfile.js
├── package.json
└── src
├── style.css
└── utils
├── mixin.css
└── vars.css
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /**/node_modules
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # PostCSS
2 | ##
3 |
4 | [SESIÓN 0 - PostCSS: Lo que necesitas saber
5 | Origen, ¿Qué es PostCSS?, ¿Qué no es PostCSS?, ¿Por qué usarlo?](https://github.com/EscuelaIt/PostCSS-2016/blob/master/Sesion0/PostCSS-Sesion-0.pdf)
6 |
7 | [SESIÓN 1 - Entornos de desarrollo
8 | Herramientas para usar Gulp, Grunt, npm, PostCSS, Codepen, Prepros](https://github.com/EscuelaIt/PostCSS-2016/blob/master/Sesion1-Entornos-de-trabajo/PostCSS-Sesion1-Entornos-de-desarrollo.pdf)
9 |
10 |
11 | [SESIÓN 2 - De Sass a PostCSS
12 | Cómo configurar PostCSS para desarrollar como si fuera Sass](https://github.com/EscuelaIt/PostCSS-2016/tree/master/Sesion2-CSS-del-Futuro)
13 |
14 |
15 | [SESIÓN 3 - CSS del futuro
16 | Cómo configurar PostCSS para desarrollar con la próxima generación de CSS](https://github.com/EscuelaIt/PostCSS-2016/blob/master/Sesion3-de-Sass-a-PostCSS/PostCSS-Sesion3-De-Sass-a-PostCSS.pdf)
17 |
18 |
19 | SESIÓN 4 - Plugins
20 | Veremos los plugins más conocidos e interesantes y aprenderemos a crear nuestro propio plugin PostCSS
--------------------------------------------------------------------------------
/RECURSOS.md:
--------------------------------------------------------------------------------
1 | ### Recursos
2 |
3 | * [PostCSS](http://postcss.org/)
4 | * [PostCSS GitHub](https://github.com/postcss)
5 | * [PostCSS.parts](http://postcss.parts/)
6 | * [1.5x faster](https://evilmartians.com/chronicles/postcss-1_5x-faster)
7 | * [An Introduction to PostCSS](http://www.sitepoint.com/an-introduction-to-postcss/)
8 | * [PostCSS Deep Dive](http://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889)
9 | * [PostCSS Articles](http://heydesigner.com/postcss/)
10 | * [PostCSS Tutorials](https://leveluptutorials.com/tutorials/postcss-tutorials)
11 | * [Why you should use PostCSS and 10 plugins you really want to try](https://codepicnic.com/posts/why-you-should-use-postcss-and-10-plugins-you-really-want-to-try-cfecdb276f634854f3ef915e2e980c31)
12 | * [Grunt-PostCSS-Boilerplate](https://github.com/peterdillon/Grunt-PostCSS-Boilerplate)
13 | * [CSSnext](http://cssnext.io/)
14 | * [Fix Global CSS with PostCSS](http://ai.github.io/postcss-isolation)
15 | * [10 Awesome PostCSS Plugins to Make You a CSS Wizard](http://www.hongkiat.com/blog/postcss-plugins/?platform=hootsuite)
16 |
17 | --
18 |
19 | * [PostCSS, cssnext and the future of CSS](https://vimeo.com/159185299)
20 | * [PostCSS Playground](https://sneakertack.github.io/postcss-playground/)
21 | * [How to Build Your Own CSS Preprocessor With PostCSS](http://www.sitepoint.com/build-css-preprocessor-postcss/)
22 | * [PostCSS Plugin Boilerplate](https://github.com/postcss/postcss-plugin-boilerplate)
23 |
24 | --
25 |
26 | * [Introducción a PostCSS](http://octuweb.com/introduccion-a-postcss)
27 | * [PostCSS: ¿Qué es? ¿es mejor que SASS, LESS, Stylus?](http://www.bufa.es/postcss-que-es/)
28 | * [PostCSS en profundidad: Lo que necesitas saber](http://webdesign.tutsplus.com/es/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535)
29 | * [Guía rápida de PostCSS: Configurando Gulp](http://webdesign.tutsplus.com/es/tutorials/postcss-quickstart-guide-gulp-setup--cms-24543)
30 | * [Guía rápida de PostCSS: Configurando Grunt](http://webdesign.tutsplus.com/es/tutorials/postcss-quickstart-guide-grunt-setup--cms-24545)
31 | * [Entradas de PostCSS de Jorge Atgu](http://jorgeatgu.com/blog/archivo/#postcss)
32 | * [PostCSS: qué es y por qué es tan popular](http://www.bbvaopen4u.com/es/actualidad/postcss-que-es-y-por-que-es-tan-popular)
33 | * [Presentación PostCSS (WIP)](http://slides.com/joanleon/postcss)
34 |
35 | --
36 |
37 | * [Gitter PostCSS](https://gitter.im/postcss/postcss)
38 |
--------------------------------------------------------------------------------
/Sesion0/PostCSS-Sesion-0.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EscuelaIt/PostCSS-2016/9be098c4f72055a033fc42b4bbdd188e89c28627/Sesion0/PostCSS-Sesion-0.pdf
--------------------------------------------------------------------------------
/Sesion0/demo/dist/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: -webkit-box;
3 | display: -webkit-flex;
4 | display: -ms-flexbox;
5 | display: flex;
6 | }
--------------------------------------------------------------------------------
/Sesion0/demo/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | }
--------------------------------------------------------------------------------
/Sesion1-Entornos-de-trabajo/PostCSS-Sesion1-Entornos-de-desarrollo.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EscuelaIt/PostCSS-2016/9be098c4f72055a033fc42b4bbdd188e89c28627/Sesion1-Entornos-de-trabajo/PostCSS-Sesion1-Entornos-de-desarrollo.pdf
--------------------------------------------------------------------------------
/Sesion1-Entornos-de-trabajo/gulp/dest/style.css:
--------------------------------------------------------------------------------
1 | /*autoprefixer*/
2 | .container {
3 | display: -webkit-box;
4 | display: -webkit-flex;
5 | display: -ms-flexbox;
6 | display: flex;
7 | -webkit-transform: scale(2);
8 | transform: scale(2);
9 | }
10 |
11 | /*custom properties*/
12 |
13 | .custom {
14 | background: #000;
15 | }
16 |
17 | /*variables sass*/
18 |
19 | .bg {
20 | background: #000;
21 | }
--------------------------------------------------------------------------------
/Sesion1-Entornos-de-trabajo/gulp/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var postcss = require('gulp-postcss');
3 | var autoprefixer = require('autoprefixer');
4 | var cssnext = require('cssnext');
5 | var precss = require('precss');
6 |
7 | gulp.task('css', function() {
8 | var processors = [
9 | autoprefixer,
10 | cssnext,
11 | precss
12 | ];
13 | return gulp.src('./src/*.css')
14 | .pipe(postcss(processors))
15 | .pipe(gulp.dest('./dest'));
16 | });
17 |
18 | gulp.task('watch', function() {
19 | gulp.watch('src/**/*.css', ['css']);
20 | });
21 |
22 |
23 | gulp.task('default', ['css', 'watch']);
24 |
--------------------------------------------------------------------------------
/Sesion1-Entornos-de-trabajo/gulp/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gulp",
3 | "version": "0.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "autoprefixer": "^6.3.6",
13 | "cssnext": "^1.8.4",
14 | "gulp-postcss": "^6.1.0",
15 | "precss": "^1.4.0"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/Sesion1-Entornos-de-trabajo/gulp/src/style.css:
--------------------------------------------------------------------------------
1 | /*autoprefixer*/
2 | .container {
3 | display: flex;
4 | transform: scale(2);
5 | }
6 |
7 | /*custom properties*/
8 | :root {
9 | --color: #000;
10 | }
11 |
12 | .custom {
13 | background: var(--color);
14 | }
15 |
16 | /*variables sass*/
17 | $color: #000;
18 |
19 | .bg {
20 | background: $color;
21 | }
--------------------------------------------------------------------------------
/Sesion1-Entornos-de-trabajo/npm/config-postcss.json:
--------------------------------------------------------------------------------
1 | {
2 | "use": [
3 | "autoprefixer",
4 | "cssnext",
5 | "precss"
6 | ],
7 | "autoprefixer": {
8 | "browsers": ["last 1 version"]
9 | },
10 | "input": "src/style.css",
11 | "output": "dest/style.css"
12 | }
--------------------------------------------------------------------------------
/Sesion1-Entornos-de-trabajo/npm/dest/style.css:
--------------------------------------------------------------------------------
1 | .nak {
2 | background: #000;
3 | display: -webkit-box;
4 | display: -webkit-flex;
5 | display: -ms-flexbox;
6 | display: flex;
7 | }
8 | /*# sourceMappingURL=style.css.map */
--------------------------------------------------------------------------------
/Sesion1-Entornos-de-trabajo/npm/dest/style.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../src/style.css"],"names":[],"mappings":"AAAA;EACE,iBAAiB;EACjB,qBAAc;EAAd,sBAAc;EAAd,qBAAc;EAAd,cAAc;CACf","file":"style.css","sourcesContent":[".nak {\n background: #000;\n display: flex;\n}"]}
--------------------------------------------------------------------------------
/Sesion1-Entornos-de-trabajo/npm/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "EscuelaIT-postcss-npm",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "build:css": "postcss -c config-postcss.json -w --no-map.inline"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "autoprefixer": "^6.3.6",
14 | "cssnext": "^1.8.4",
15 | "postcss-cli": "^2.5.1",
16 | "precss": "^1.4.0"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/Sesion1-Entornos-de-trabajo/npm/src/style.css:
--------------------------------------------------------------------------------
1 | .nak {
2 | background: #000;
3 | display: flex;
4 | }
--------------------------------------------------------------------------------
/Sesion2-CSS-del-Futuro/dest/style.css:
--------------------------------------------------------------------------------
1 | /* custom properties */
2 |
3 | /* custom media queries */
4 |
5 | /* custom selectors */
6 |
7 | /* some var() & calc() */
8 |
9 | body {
10 | color: rgba(18, 52, 86, 0.47059);
11 | font-size: 16px;
12 | font-size: 1rem;
13 | line-height: 24px;
14 | line-height: 1.5rem;
15 | padding: calc(0.5rem + 1px);
16 | }
17 |
18 | /* custom media query usage */
19 |
20 | @media (max-width: 50rem) {
21 | body {
22 | font-size: 1.2rem;
23 | }
24 | }
25 |
26 | h1,
27 | h2,
28 | h3,
29 | h4,
30 | h5,
31 | h6 {
32 | margin-top: 0
33 | }
34 |
35 | button,
36 | .button {
37 | background-color: lightcoral;
38 | }
39 |
40 | button:hover,
41 | .button:hover,
42 | button:focus,
43 | .button:focus {
44 | background-color: lightblue;
45 | }
46 |
47 | /* colors stuff */
48 |
49 | a {
50 | color: rgb(89, 185, 204);
51 | -webkit-transition: color 1s;
52 | transition: color 1s;
53 | /* autoprefixed ! */
54 | }
55 |
56 | a:hover {
57 | color: rgba(255, 255, 255, 0.5)
58 | }
59 |
60 | a:active {
61 | color: rgb(102, 51, 153)
62 | }
63 |
64 | a:link,a:visited {
65 | color: rgb(89, 142, 153)
66 | }
67 |
68 | /* font stuff */
69 |
70 | h2 {
71 | -webkit-font-feature-settings: "c2sc";
72 | font-feature-settings: "c2sc";
73 | font-variant-caps: small-caps;
74 | }
75 |
76 | table {
77 | -webkit-font-feature-settings: "lnum";
78 | font-feature-settings: "lnum";
79 | font-variant-numeric: lining-nums;
80 | }
81 |
82 | /* filters */
83 |
84 | .blur {
85 | filter: url('data:image/svg+xml;charset=utf-8,#filter');
86 | -webkit-filter: blur(15px);
87 | filter: blur(15px);
88 | }
89 |
90 | .sepia {
91 | filter: url('data:image/svg+xml;charset=utf-8,#filter');
92 | -webkit-filter: sepia(.8);
93 | filter: sepia(.8);
94 | }
95 |
--------------------------------------------------------------------------------
/Sesion2-CSS-del-Futuro/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp')
2 | var postcss = require('gulp-postcss')
3 | var cssnext = require('postcss-cssnext')
4 | var atImport = require('postcss-import')
5 |
6 | gulp.task('css', function () {
7 | var processors = [
8 | atImport,
9 | cssnext()
10 | ]
11 | return gulp.src('./src/style.css')
12 | .pipe(postcss(processors))
13 | .pipe(gulp.dest('./dest'))
14 | })
15 |
16 | gulp.task('watch', function () {
17 | gulp.watch('src/**/*.css', ['css'])
18 | })
19 |
20 | gulp.task('default', ['css', 'watch'])
21 |
--------------------------------------------------------------------------------
/Sesion2-CSS-del-Futuro/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Sesion2-CSS-del-Futuro",
3 | "version": "1.0.0",
4 | "description": "Ejemplo para la clase de CSS del Futuro",
5 | "scripts": {
6 | "test": "echo \"Error: no test specified\" && exit 1"
7 | },
8 | "keywords": [
9 | "postcss",
10 | "cssnext",
11 | "EscuelaIT"
12 | ],
13 | "author": {
14 | "name": "Joan Leon",
15 | "github": "http://github.com/nucliweb",
16 | "email": "joan.leon@gmail.com",
17 | "twitter": "@nucliweb"
18 | },
19 | "license": "MIT",
20 | "devDependencies": {
21 | "gulp": "^3.9.1",
22 | "gulp-postcss": "^6.1.0",
23 | "postcss-cssnext": "^2.5.2",
24 | "postcss-import": "^8.1.0"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/Sesion2-CSS-del-Futuro/src/style.css:
--------------------------------------------------------------------------------
1 | @import 'utils/vars';
2 |
3 | /* some var() & calc() */
4 | body {
5 | color: var(--mainColor);
6 | font-size: var(--fontSize);
7 | line-height: calc(var(--fontSize) * 1.5);
8 | padding: calc((var(--fontSize) / 2) + 1px);
9 | }
10 |
11 | /* custom media query usage */
12 |
13 | @media (--viewport-medium) {
14 | body {
15 | font-size: calc(var(--fontSize) * 1.2);
16 | }
17 | }
18 |
19 |
20 | :--heading {
21 | margin-top: 0
22 | }
23 |
24 | :--button {
25 | background-color: lightcoral;
26 | }
27 | :--button:--enter {
28 | background-color: lightblue;
29 | }
30 |
31 |
32 | /* colors stuff */
33 |
34 | a {
35 | color: var(--highlightColor);
36 | transition: color 1s;
37 | /* autoprefixed ! */
38 | }
39 | a:hover {
40 | color: gray(255, 50%)
41 | }
42 | a:active {
43 | color: rebeccapurple
44 | }
45 | a:any-link {
46 | color: color(var(--highlightColor) blackness(+20%))
47 | }
48 |
49 | /* font stuff */
50 |
51 | h2 {
52 | font-variant-caps: small-caps;
53 | }
54 | table {
55 | font-variant-numeric: lining-nums;
56 | }
57 |
58 | /* filters */
59 |
60 | .blur {
61 | filter: blur(15px);
62 | }
63 | .sepia {
64 | filter: sepia(.8);
65 | }
66 |
--------------------------------------------------------------------------------
/Sesion2-CSS-del-Futuro/src/utils/vars.css:
--------------------------------------------------------------------------------
1 | /* custom properties */
2 |
3 | :root {
4 | --fontSize: 1rem;
5 | --mainColor: #12345678;
6 | --highlightColor: hwb(190, 35%, 20%);
7 | }
8 |
9 | /* custom media queries */
10 |
11 | @custom-media --viewport-medium (width <=50rem);
12 |
13 | /* custom selectors */
14 |
15 | @custom-selector :--heading h1, h2, h3, h4, h5, h6;
16 | @custom-selector :--button button, .button;
17 | @custom-selector :--enter :hover, :focus;
18 |
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/PostCSS-Sesion3-De-Sass-a-PostCSS.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EscuelaIt/PostCSS-2016/9be098c4f72055a033fc42b4bbdd188e89c28627/Sesion3-de-Sass-a-PostCSS/PostCSS-Sesion3-De-Sass-a-PostCSS.pdf
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/with-sass/dest/style.css:
--------------------------------------------------------------------------------
1 | .escuelaIT {
2 | background: pink;
3 | }
4 |
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/with-sass/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var sass = require('gulp-sass');
3 | var prefix = require('gulp-autoprefixer');
4 |
5 | gulp.task('sass', function() {
6 | gulp.src('./src/*.scss')
7 | .pipe(sass({
8 | outputStyle: 'expanded'
9 | }))
10 | .pipe(gulp.dest('./dest'))
11 |
12 | });
13 |
14 | gulp.task('watch', function () {
15 | gulp.watch('src/**/*.scss', ['sass'])
16 | })
17 |
18 | gulp.task('default', ['sass', 'watch'])
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/with-sass/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "with-sass",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "autoprefixer": "^6.3.6",
14 | "gulp": "^3.9.1",
15 | "gulp-sass": "^2.3.1"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/with-sass/src/style.scss:
--------------------------------------------------------------------------------
1 | $color: pink;
2 |
3 | .escuelaIT {
4 | background: $color;
5 | }
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass-precss/dest/style.css:
--------------------------------------------------------------------------------
1 | /*variable sass*/
2 | /*custom properties*/
3 | /*mixin*/
4 |
5 | .sass {
6 | background: pink;
7 | }
8 |
9 | .sass-custom {
10 | background: red;
11 | }
12 |
13 | .sass-custom .child {
14 | background: white;
15 | }
16 |
17 | .sass-custom .child .nieto {
18 | background: pink;
19 | }
20 |
21 | .sass-custom:hover {
22 | background: black;
23 | }
24 |
25 | .escuelaIT{
26 | display: flex;
27 | }
28 |
29 | .escuelaIT .sass-custom {
30 | background: red;
31 | }
32 |
33 | .escuelaIT .sass-custom .child {
34 | background: white;
35 | }
36 |
37 | .escuelaIT .sass-custom .child .nieto {
38 | background: pink;
39 | }
40 |
41 | .escuelaIT .sass-custom:hover {
42 | background: black;
43 | }
44 |
45 | .notice--clear {
46 | background: blue
47 | }
48 |
49 |
50 |
51 | .b-1 {
52 | width: 1px;
53 | }
54 |
55 |
56 |
57 | .b-2 {
58 | width: 2px;
59 | }
60 |
61 |
62 |
63 | .b-3 {
64 | width: 3px;
65 | }
66 |
67 | .icon-foo {
68 | background: url('icons/foo.png');
69 | }
70 |
71 | .icon-bar {
72 | background: url('icons/bar.png');
73 | }
74 |
75 | .icon-baz {
76 | background: url('icons/baz.png');
77 | }
78 |
79 | .search {
80 | padding-left: 16px;
81 | }
82 |
83 | .search::after {
84 | content: "";
85 | /*background-url: url(/icons/$(name).png);*/
86 | background: url(/icons/search.png);
87 | }
88 |
89 | .notice--clear {
90 | background: green;
91 | }
92 |
93 |
94 |
95 |
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass-precss/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var postcss = require('gulp-postcss');
3 | var precss = require('precss');
4 |
5 |
6 | gulp.task('css', function() {
7 | var processors = [
8 | precss
9 | ];
10 | return gulp.src('./src/*.css')
11 | .pipe(postcss(processors))
12 | .pipe(gulp.dest('./dest'));
13 | });
14 |
15 | gulp.task('watch', function() {
16 | gulp.watch('src/**/*.css', ['css']);
17 | });
18 |
19 |
20 | gulp.task('default', ['css', 'watch']);
21 |
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass-precss/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "without-sass-precss",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "gulp": "^3.9.1",
14 | "gulp-postcss": "^6.1.0",
15 | "precss": "^1.4.0"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass-precss/src/style.css:
--------------------------------------------------------------------------------
1 | @import "utils/vars.css";
2 | @import "utils/mixin.css";
3 |
4 | .sass {
5 | background: $color;
6 | }
7 |
8 | .sass-custom {
9 | background: var(--color2);
10 | &:hover {
11 | background: black;
12 | }
13 | .child {
14 | background: white;
15 | .nieto {
16 | background: pink;
17 | }
18 | }
19 | }
20 |
21 | .escuelaIT{
22 | @mixin escuelaIT;
23 | display: flex;
24 | }
25 |
26 | .notice--clear {
27 | @if 7 < 5 {
28 | background: green;
29 | }
30 | @else {
31 | background: blue;
32 | }
33 | }
34 |
35 |
36 |
37 | @for $i from 1 to 3 {
38 | .b-$i { width: $(i)px; }
39 | }
40 |
41 | @each $icon in (foo, bar, baz) {
42 | .icon-$(icon) {
43 | background: url('icons/$(icon).png');
44 | }
45 | }
46 |
47 |
48 |
49 | .search {
50 | @mixin icon search;
51 | }
52 |
53 | @define-extend bg-green {
54 | background: green;
55 | }
56 |
57 | .notice--clear {
58 | @extend bg-green;
59 | }
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass-precss/src/utils/mixin.css:
--------------------------------------------------------------------------------
1 | /*mixin*/
2 |
3 | @define-mixin escuelaIT {
4 | .sass-custom {
5 | background: var(--color2);
6 | &:hover {
7 | background: black;
8 | }
9 | .child {
10 | background: white;
11 | .nieto {
12 | background: pink;
13 | }
14 | }
15 | }
16 | }
17 | @define-mixin icon $name {
18 | padding-left: 16px;
19 |
20 | &::after {
21 | content: "";
22 | /*background-url: url(/icons/$(name).png);*/
23 | background: url(/icons/$(name).png);
24 | }
25 | }
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass-precss/src/utils/vars.css:
--------------------------------------------------------------------------------
1 | /*variable sass*/
2 | $color: pink;
3 |
4 | /*custom properties*/
5 | :root {
6 | --color2: red;
7 | }
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass/dest/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --color2: red;
3 | }
4 |
5 | .escuelait {
6 | background: pink;
7 | }
8 |
9 | /*.postcss {
10 | background: var(--color2);
11 | }*/
12 |
13 | .postcss {
14 | background: pink;
15 | width: 300px;
16 | -webkit-transform: scale(3);
17 | transform: scale(3);
18 | }
19 |
20 | .postcss .child{
21 | background: pink;
22 | }
23 |
24 | .postcss .child:hover{
25 | background:white;
26 | display: -webkit-box;
27 | display: -webkit-flex;
28 | display: -ms-flexbox;
29 | display: flex;
30 | }
31 |
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp')
2 | var postcss = require('gulp-postcss')
3 | var atImport = require('postcss-import')
4 | var mixins = require('postcss-mixins')
5 | var nested = require('postcss-nested')
6 | var simplevars = require('postcss-simple-vars')
7 | var autoprefixer = require('autoprefixer')
8 |
9 |
10 | gulp.task('css', function () {
11 | var processors = [
12 | atImport,
13 | mixins,
14 | nested,
15 | simplevars,
16 | autoprefixer
17 | ]
18 | return gulp.src('./src/style.css')
19 | .pipe(postcss(processors))
20 | .pipe(gulp.dest('./dest'))
21 | })
22 |
23 | gulp.task('watch', function () {
24 | gulp.watch('src/**/*.css', ['css'])
25 | })
26 |
27 | gulp.task('default', ['css', 'watch'])
28 |
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "without-sass",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "autoprefixer": "^6.3.6",
14 | "gulp": "^3.9.1",
15 | "gulp-postcss": "^6.1.0",
16 | "postcss-import": "^8.1.0",
17 | "postcss-mixins": "^4.0.1",
18 | "postcss-nested": "^1.0.0",
19 | "postcss-simple-vars": "^1.2.0"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass/src/style.css:
--------------------------------------------------------------------------------
1 | @import "utils/vars";
2 | @import "utils/mixin";
3 | .escuelait {
4 | background: $color;
5 | }
6 |
7 | /*.postcss {
8 | background: var(--color2);
9 | }*/
10 |
11 | .postcss {
12 | @mixin postcss 300px, 3;
13 | .child{
14 | background: pink;
15 | &:hover{
16 | background:white;
17 | display: flex;
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass/src/utils/mixin.css:
--------------------------------------------------------------------------------
1 | @define-mixin postcss $vars,$scale {
2 | background: $color;
3 | width: $vars;
4 | transform: scale($scale);
5 | }
--------------------------------------------------------------------------------
/Sesion3-de-Sass-a-PostCSS/without-sass/src/utils/vars.css:
--------------------------------------------------------------------------------
1 | $color: pink;
2 |
3 | :root {
4 | --color2: red;
5 | }
--------------------------------------------------------------------------------