Re: [csswg-drafts] [css-images] @image rule for manipulating images (#6807)

> > > That @image / @image-manipulation block surely looks a lot like [@mixin](https://sass-lang.com/documentation/at-rules/mixin), no?
> > 
> > 
> > Can you elaborate on this? I don't see any resemblance.
> 
> If you look at this example _(as seen in the first post)_…
> 
> … it’s an at-rule, an identifier, and a block with bunch of properties with assigned values _(except for `src` which isn’t a CSS property)_.
> 
> A basic mixin such as the one below …

The suggested at-rule shares the syntax with a mixin like basically any at-rules with bodies but besides that there is no relation to mixins at all.
An `@mixin` in Sass can have arbitrary properties and nested rules within it. The at-rule suggested here is restricted to a bunch of descriptors resembling properties (but which _aren't_ properties) that are used to manipulate the given image. E.g. it does not allow `padding: 0;` or `list-style: none;`.

To summarize them, the descriptors proposed so far are:

* `src`
* `aspect-ratio`
* `width`
* `height`
* `inline-size`
* `block-size`
* `object-fit`
* `margin`
* `filter`
* `opacity`
* `transform`
* `scale`
* `rotate`
* `translate`
* `clip-path`
* `mask`
* `border-radius`
* `corner-shape`
* `will-change`
* `animation`

Which ones actually make it into the at-rule is still to be discussed.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6807#issuecomment-1224912571 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 23 August 2022 21:37:33 UTC