En construcción

Propiedades

Al igual que en CSS, una propiedad es una instrucción que describe un estilo en concreto, dado que son las mismas que se escribirían en CSS, me limitaré a describir solo las peculiaridades.

En BC, se considera como una propiedad, toda instrucción que contenga:

  1. Nombre de propiedad: un conjunto de caracteres sin espacios intermedios, que pueden ser números, letras y/o los caracteres -, _.
  2. Separador de propiedad: todas las propiedades se separan con un solo carácter de dos puntos (:), este carácter puede tener los espacios (\s o \t), que se necesiten, tanto antes como después.
  3. Valor de propiedad: cualquier carácter posterior a dos puntos (:), se considerará como parte de los valores de la propiedad. Excepto por cualquier carácter como puede ser un salto de línea o carácter especial de terminación.

ejemplo:

border :   solid   1   rgba (   0 ,   0 ,   0 ,   .5   )

Relación

En cuanto a las relaciones con otras instrucciones, una propiedad no puede tener hijas, una propiedad puede no tener ninguna instrucción madre. En este caso, la propiedad es aplicada al componente como tal.

En caso de que una propiedad tenga mayor sangría que otra propiedad, la instrucción madre de ambas, será el selector inmediato con menor sangría. La sangría entre instrucciones puede ser espacios o tabulaciones e incluso una combinación de ambas.

Variables CSS

En BC, se facilita el uso de las variables CSS, estas pueden pueden consumirse anteponiendo el carácter $ a el nombre de la variable, si necesitamos establecer valores por defecto, debemos indicar una coma (,), inmediatamente después del nombre y a continuación el valor por defecto que se usará, por ejemplo:

:: root
--color-ejemplo :   red
. ejemplo
background :   $color-ejemplo , blue

Transpila a:

: root   {
--color-ejemplo :   red ;
}
. ejemplo   {
background :   var ( --color-ejemplo ,   blue ) ;
}

Números con escala "ajustable"

Asi le llamo a todos los números enteros que no tienen una unidad CSS definida por el programador y la propiedad a la que pertenece, se encuentran en la lista de propiedades reservadas, y a estos números se les colocara una escala especial, una vez que se compilen los archivos y según se establezcan en las configuraciones del proyecto, concretamente la propiedad: css_auto_unit, por ejemplo:

:: root
--color-ejemplo :   red
. ejemplo
border :   solid   1   $color-ejemplo

Transpila a:

: root   {
--color-ejemplo :   red ;
}
. ejemplo   {
border :   solid   1 px   var ( --color-ejemplo ) ;
}

En este caso el número con escala ajustable es el 1, al no tener una propiedad definida por nosotros, el compilador la transpilara a 1px, si tenemos la configuración por defecto en el proyecto, o por ejemplo podría transpirarla a: calc( ( 1 * 100vw ) / var(--xs) ); en caso de que hayamos ajustado la propiedad css_auto_unit con el valor auto-viewport-width. Igualmente podríamos ajustar la propiedad css_auto_unit a cualquier unidad de CSS válida y el compilador transpilaria todos los números con escala ajustable a números con esa unidad.

Propiedades reservadas

Las propiedades reservadas, son aquellas en las que los números sin unidad CSS, son reemplazados por valores calculados, según se indique en la configuración, concretamente la propiedad css_auto_unit.

Las propiedades reservadas, son: background-position-x, background-position-y, block-size, border, border-block, border-block-end, border-block-end-width, border-block-start, border-block-start-width, border-block-width, border-bottom, border-bottom-left-radius, border-bottom-right-radius, border-bottom-width, border-inline, border-inline-end, border-inline-start, border-inline-width, border-left, border-left-width, border-radius, border-right, border-right-width, border-spacing, border-top, border-top-left-radius, border-top-right-radius, bottom, box-shadow, clip, column-rule-width, column-width, flex-basis, font-size, gap, grid, grid-gap, grid-template, height, inline-size, inset, inset-block, inset-block-end, inset-block-start, inset-inline, inset-inline-end, inset-inline-start, left, letter-spacing, line-height, margin, margin-block, margin-block-end, margin-bottom, margin-inline, margin-inline-end, margin-inline-start, margin-left, margin-right, margin-top, mask-size, max-block-size, max-height, max-inline-size, max-width, min-block-size, min-height, min-inline-size, min-width, offset, offset-anchor, offset-distance, outline-offset, outline-width, padding, padding-block, padding-block-end, padding-block-start, padding-bottom, padding-inline, padding-inline-end, padding-inline-start, padding-left, padding-right, padding-top, perspective, right, row-gap, scroll-padding, scroll-padding-block, scroll-padding-block-end, scroll-padding-block-start, scroll-padding-bottom, scroll-padding-inline, scroll-padding-inline-end, scroll-padding-inline-start, scroll-padding-left, scroll-padding-right, scroll-padding-top, scroll-snap-coordinate, scroll-snap-destination, shape-margin, stroke-width, tab-size, top, width, word-spacing.