Rackcode - Blog: CSS3

Mostrando entradas con la etiqueta CSS3. Mostrar todas las entradas

5 utilidades sencillas que todo diseñador web debería usar

<div class="separator" style="clear: both; text-align: center;">
<a href="https://static.tiendy.com/shops/animum/uploads/lateral_01_inicio-dise%C3%B1o-grafico-en-malaga.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="388" src="https://static.tiendy.com/shops/animum/uploads/lateral_01_inicio-dise%C3%B1o-grafico-en-malaga.jpg" width="640" /></a></div>
<h2>
5 utilidades sencillas que todo diseñador web debería usar </h2>
<div class="separator" style="clear: both; text-align: center;">
</div>
 Los recursos de un diseñador web ayudan a facilitar tanto el diseño, y hemos seleccionado 5 utilidades en esta ocasión para diseño que permitirán ayudarte a ahorrar tiempo en tus tareas diarias. Lista de Utilidades para diseño <a href="https://resizeappicon.com/" target="_blank">Resizeappicon </a>nos permite lo posibilidad de subir un logo cuadrado y especificar el tamaño, además de poder descargarlos en distintos tamaños al mismo tiempo una herramienta muy útil si necesitamos exportar nuestros logos a dispositivos móviles o para otros usos. <a href="http://firesize.com/" target="_blank">Firesize </a>esta pagina nos permite alterar el tamaño de nuestras imágenes, esta es una herramienta muy útil, debido a que si tenemos una imagen de proporciones grandes supongamos 2000x1200 con una dirección http://rackcode.como.mx/img/Rackcode.png esta aplicación nos permite tener una versión de tamaños distintos por ejemplo 200x100 lo que permite que tengamos una versión mas ligera de nuestras imágenes. Una utilidad que nos puede salvar. <a href="http://www.wirin.es/userfiles/images/iconos-android.png" target="_blank">Iconos Gratuitos</a> es importante que cuando iniciamos tener contenido multimedia hemos recopilado en nuestro anteriores post una serie de sitios en los que puedes encontrar iconos gratuitos de excelente calidad. <a href="https://buffer.com/pablo" target="_blank">Pablo</a>, es una pagina donde puedes diseñar banners simples con una imagen de fondo y texto principal y secundario. Muy buena herramienta que nos permite compartir rápidamente a través de las redes sociales y también descargar la misma imagen creada. Excelente herramienta recomendada para que hagan uso de ella. <a href="http://vectormagic.com/home" target="_blank">Vectormagic </a>este sitio nos permite trasforma imágenes que tengamos en vectores casi perfectos lo que nos ayuda cuando queremos agrandar las imágenes sin perder tanta calidad. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.indole.es/files/img/estudio/33.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://www.indole.es/files/img/estudio/33.jpg" width="400" /></a></div>
 
<blockquote class="tr_bq">
Estas fueron algunas de las Utilidades para Diseñadores, si conoces alguna comenta abajo cuales son tus preferidas y porque.</blockquote>

5 utilidades sencillas que todo diseñador web debería usar

5 utilidades sencillas que todo diseñador web debería usar Los recursos de un diseñador web ayudan a facilitar tanto el diseño, y hemo...

+ Leer más »

Preprocessors código CSS e sua função na web

<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="200" src="http://www.indole.es/files/img/estudio/38.jpg" width="400" /></div>
<h2 style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: Montserrat; font-size: 36px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 44px; margin: 10px 0px; orphans: auto; padding: 0px 0px 5px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
Trabalhando com preprocessors CSS</h2>
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Um pré-processador CSS é uma ferramenta que nos permite escrever pseudo CSS que mais tarde se tornaria CSS.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Este pseudocódigo pode ser constituído pelas variáveis, funções e operações.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Que nos ajudam a gerenciar e otimizar CSS, a travez destas ferramentas fornecidos trabalho é feito de uma forma mais ordenada e rápida, permitindo economia de tempo e resultados facilmente.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Por que é um CSS pré-processador é usado?<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">A resposta é simples "Para escrever e manter mais rápido e com menos esforço código CSS." Como isso é feito?<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Através de uma organização de código.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Os pré-processadores nos dar os seletores CSS capacidade Ealth com grande facilidade e poder envolve uma prestação de contas.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Porque o assentamento traz muitos problemas ao executar qualquer manutenção neste mesmo código.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
 
<div class="separator" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; clear: both; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<img border="0" height="295" src="http://www.cssnewbie.com/wp-content/uploads/2015/01/css-organization.jpg" style="border: medium none; box-sizing: border-box; height: auto; margin: 0px; max-width: 100%; padding: 0px; vertical-align: middle;" width="400" /></div>
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Usando variáveis em CSS.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Como você sabe que é uma das principais deficiências do CSS como língua porque ele não permite que variáveis como em outras línguas, mas este é arrglado com o uso de variáveis com pré-processadores em vez de executar uma pesquisa e substituir uma cor a um grupo de elementos apenas definir uma variável com grande satisfação que o design.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Reutilizar código.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Depois de outras características variáveis dos problemas com CSS como uma língua não é o que nos permite reutilizar o código, o que fazer repetidas e às vezes cansada ao escrever CSS,mas os mixins seletores e marcadores permitem que você re-uso outros blocos de código de os benefícios da pré-processadores.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
<div class="separator" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; clear: both; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<img border="0" height="267" src="http://www.nubelo.com/blog/wp-content/uploads/2013/05/preprocesadores_css.gif" style="border: medium none; box-sizing: border-box; height: auto; margin: 0px; max-width: 100%; padding: 0px; vertical-align: middle;" width="400" /></div>
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Tornando as operações e funções.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Sem dúvida, os pré-processadores têm alimentado a CSS, permitindo que as mesmas características que qualquer língua da web, é fazer operação ou implementar funções.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"><span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Incluindo arquivos.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Finalmente, a adição de arquivos a partir de fontes externas é uma opção muito útil permitindo segmentado em vários arquivos css manter nossa regra básica para ter um arquivo mestre e que incluem todos os outros, permitindo muitas coisas não se repitam.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Os pré-processadores CSS tornaram-se uma das ferramentas do fron-end que os desenvolvedores usam para os seus projectos, os benefícios de fluxo, deixando de ser uma moda de ser uma técnica que não pode perder se você quer ser um profissional na indústria.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
<div class="separator" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; clear: both; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<img border="0" height="110" src="http://l4c.me/uploads/pre-procesadores-1385326266_full550.jpg" style="border: medium none; box-sizing: border-box; height: auto; margin: 0px; max-width: 100%; padding: 0px; vertical-align: middle;" width="320" /></div>
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<blockquote class="tr_bq" style="-webkit-text-stroke-width: 0px; background: rgb(243, 243, 243); border: 1px solid rgb(230, 230, 230); box-sizing: border-box; color: #6a6a6a; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 10px 0px 20px; orphans: auto; padding: 15px 20px 15px 55px; position: relative; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
Que envolve aprender algumas preprocessors CSS que estão no mercado que são menos, SASS e nossa STYLUS favorito.</blockquote>

Preprocessors código CSS e sua função na web

Trabalhando com preprocessors CSS Um pré-processador CSS é uma ferramenta que nos permite escrever pseudo CSS que mais tarde s...

+ Leer más »

Vorprozessoren CSS-Code und seine Funktion in der Bahn

<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="233" src="https://static.tiendy.com/shops/animum/uploads/lateral_02_master-dise%C3%B1o-grafico-en-malaga.jpg?fecha=20140806" width="400" /></div>
<h2 style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: Montserrat; font-size: 36px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 44px; margin: 10px 0px; orphans: auto; padding: 0px 0px 5px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
Arbeiten mit CSS Präprozessoren</h2>
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Ein CSS-Präprozessor ist ein Werkzeug, das uns pseudo CSS CSS, die später sein wird zu schreiben.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"><span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Dieser Pseudocode kann von Variablen, Funktionen und Operationen bestehen.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Die uns helfen, einfach zu verwalten und zu optimieren CSS, um travez dieser Lieferumfang Werkzeuge Arbeit in einer geordneten und schnelle Weise durchgeführt, so dass Zeitersparnis und Ergebnisse.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Warum wird ein CSS-Präprozessor wird verwendet?<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Die Antwort ist einfach "So schreiben und schneller und mit weniger Aufwand CSS-Code. Aufrechtzuerhalten" Wie wird das erreicht?<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Durch eine Organisation des Codes.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Die Pre-Prozessoren geben uns die Möglichkeit, CSS-SelektorenESUNDHEIT mit großer Leichtigkeit und Leistung beinhaltet eine Rechenschaftspflicht.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Da der Brut bringt viele Probleme bei der Durchführung von Wartungsarbeiten an diesem gleichen Code.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
<div class="separator" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; clear: both; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<img border="0" height="295" src="http://www.cssnewbie.com/wp-content/uploads/2015/01/css-organization.jpg" style="border: medium none; box-sizing: border-box; height: auto; margin: 0px; max-width: 100%; padding: 0px; vertical-align: middle;" width="400" /></div>
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Die Verwendung von Variablen in CSS.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Wie Sie wissen, es ist eines der wichtigsten Mängel der CSS als eine Sprache, weil sie nicht als Variablen in andere Sprachen zu ermöglichen, aber das ist arrglado mit der Verwendung von Variablen mit Präprozessoren statt der Suche und ersetzen Sie eine Farbe, um eine Gruppe von Elementen nur definieren eine Variable gibt große Zufriedenheit auf das Design.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Wiederverwendung von Code.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Nach anderen Variablen der Probleme mit CSS als eine Sprache ist nicht so dass wir den Code, der wiederholt machen und manchmal müde, beim Schreiben von CSS wiederverwenden, aber die Wähler Mixins und Platzhaltern können Sie wiederverwenden andere Codeblöcke der Vorteile der Pre-Prozessoren.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
 
<div class="separator" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; clear: both; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<img border="0" height="428" src="http://www.nubelo.com/blog/wp-content/uploads/2013/05/preprocesadores_css.gif" style="border: medium none; box-sizing: border-box; height: auto; margin: 0px; max-width: 100%; padding: 0px; vertical-align: middle;" width="640" /></div>
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Erstellen Operationen und Funktionen.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Kein Zweifel, die pre-Prozessoren haben, CSS, indem es die gleichen Eigenschaften wie jeder Sprache der Bahn betrieben wird, ist, um den Betrieb zu tun oder implementieren Funktionen.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Einschließlich Dateien.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"> <span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Schließlich wird die Zugabe von Dateien aus anderen Quellen ist eine sehr nützliche Option Lassen css Aufrechterhaltung unserer Grundregel, um eineMaster-Datei und die alle anderen so viele Dinge, die nicht wiederholt werden müssen sind in mehrere Dateien segmentiert.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<span class="notranslate" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">Die CSS-vor-Prozessoren haben sich zu einem der Fron-End-Tools, die Entwickler verwenden für ihre Projekte, die Vorteile fließt, aufzuhören, eine Modeerscheinung sein, eine Technik, die man nicht verpassen, wenn Sie sein wollen ein Profi in der Branche.<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #484848; display: inline !important; float: none; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">  
 
<div class="separator" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; clear: both; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 0px; orphans: auto; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<img border="0" height="110" src="http://l4c.me/uploads/pre-procesadores-1385326266_full550.jpg" style="border: medium none; box-sizing: border-box; height: auto; margin: 0px; max-width: 100%; padding: 0px; vertical-align: middle;" width="320" /></div>
<br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #484848; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;" />
<blockquote class="tr_bq" style="-webkit-text-stroke-width: 0px; background: rgb(243, 243, 243); border: 1px solid rgb(230, 230, 230); box-sizing: border-box; color: #6a6a6a; font-family: 'playfair display', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 300; letter-spacing: normal; line-height: 23.1000003814697px; margin: 10px 0px 20px; orphans: auto; padding: 15px 20px 15px 55px; position: relative; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
Was beinhaltet das Lernen einige CSS Präprozessoren, die auf dem Markt, die weniger, SASS und unser Lieblings STYLUS sind.</blockquote>

Vorprozessoren CSS-Code und seine Funktion in der Bahn

Arbeiten mit CSS Präprozessoren Ein CSS-Präprozessor ist ein Werkzeug, das uns pseudo CSS CSS, die später sein wird zu sch...

+ Leer más »

Preprocessors CSS code and its function in the web

<h2 style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="209" src="https://embed-ssl.wistia.com/deliveries/54a62c8d230f5fb5944b94c7bd4e7aea87fe00d3.jpg" width="400" /></div>
Working with CSS preprocessors</h2>
 
A CSS preprocessor is a tool that allows us to write pseudo CSS that will later become CSS. This pseudocode may be comprised of variables, functions and operations. Which help us to easily manage and optimize CSS , to travez of these Supplied tools work is done in a more orderly and quick way , allowing time savings and results. 
 
For why a CSS preprocessor used? The answer is simple " To write and maintain faster and with less effort CSS code. " How is this accomplished ? Right through an organization of code. CSS preprocessors give us the ability to selectors with great ease and power comes great responsibility . Because the nesting brings many problems when performing any maintenance on this same code 
 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="294" src="http://www.cssnewbie.com/wp-content/uploads/2015/01/css-organization.jpg" width="400" /> </div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
Using variables in CSS. As you know it is one of the main shortcomings of CSS as a language because it does not allow variables as in other languages but this is arrglado with the use of variables with preprocessors instead of performing a search and replace a color to a group of elements just define a variable gives great satisfaction to the design . 
 
Reusing code. After other variables of the problems with CSS as a language is not allowing us to reuse the code , which make repeated and sometimes tired when writing CSS, but the selectors mixins and placeholders let you re- use other code blocks of the benefits of preprocessors . 
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="267" src="http://www.nubelo.com/blog/wp-content/uploads/2013/05/preprocesadores_css.gif" width="400" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
Making operations and functions. No doubt the pre - processors have powered to CSS by allowing the same characteristics as any language of the web , is to do operation or implement functions. Including files . Finally the addition of files from external sources is a very useful option allowing segmented into multiple files css maintaining our basic rule to have a master file and which include all the other allowing many things are not repeated. 
 
 
CSS preprocessors have become one of the fron-end tools that developers use for their projects, the benefits flowing , ceasing to be a fad to be a technique that can not miss if you want to be a professional industry.

<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="110" src="http://l4c.me/uploads/pre-procesadores-1385326266_full550.jpg" width="320" /> </div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
 
<blockquote class="tr_bq">
Which involves learning some CSS preprocessors that are on the market that are LESS, SASS and our favorite STYLUS .</blockquote>

Preprocessors CSS code and its function in the web

Working with CSS preprocessors A CSS preprocessor is a tool that allows us to write pseudo CSS that will later become CSS . This ps...

+ Leer más »