├── .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 | } --------------------------------------------------------------------------------