sass
Compass CSS3 Mixins
Buscar..
Introducción
Guía de introducción utilizando Sass exentsion Compass. Compass es muy útil cuando se trata de CSS3, ya que proporciona combinaciones para escribir 1 línea con el fin de admitir todos los navegadores que utilizan las características de CSS3. También es genial incluir imágenes de sprites.
Establecer entorno
Abre tu línea de comando
Instalación utilizando Ruby
gem update --system
gem install compass
Crear un proyecto
compass create <myproject>
Esto inicializará un proyecto de brújula. Se agregará una carpeta llamada. La carpeta se verá como si tuviera la siguiente estructura:
| Archivo / Carpeta | descripción |
|---|---|
| hablar con descaro a/ | Pon tus archivos sass / scss en esta carpeta |
| hojas de estilo / | En esta carpeta se almacenará tu css compilado. |
| config.rb | Configure la brújula, por ejemplo, la ruta de la carpeta, la compilación de sass |
Usar brújula
compass watch
Esto compilará tus archivos sass cada vez que los cambies. La ruta de la carpeta sass se puede cambiar dentro de config.rb
Usando CSS3 con brújula
Puede encontrar una referencia completa de qué componentes CSS3 son compatibles en esta página
Para utilizar CSS3 en su proyecto, Compass proporciona combinaciones para soportar las características de CSS3 en cada navegador. En la parte superior de su archivo Sass / Scss, debe especificar que desea utilizar una brújula
@import "compass/css3";
Radio de la frontera
Incluya radio de borde con brújula en su archivo sass:
div {
@include border-radius(4px);
}
Salida CSS
div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Como puedes ver puedes usar el nombre normal de CSS. Simplemente ponga @include delante de él y use () para establecer su valor.
Ejemplo de Flexbox
.row {
@include display-flex;
@include flex-direction(row);
}
Salida CSS
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
Conclusión
Estos son solo dos ejemplos. Compass proporciona mucho más mixins CSS3. Es muy útil utilizar Compass y no tiene que preocuparse por haber olvidado la definición de un componente CSS3 para un navegador específico. Si el navegador admite la función CSS3, la brújula lo definirá por usted.