Currently sass-lint generates the following warnings on 3 files:

warning Pseudo-elements must start with double colons pseudo-element

These files are:

  • sass\base\links\_links.scss
  • sass\base\text\_text.scss
  • sass\init\clearfix\_clearfix.scss

The W3c specification does recommend using single-colon notation for backwards compatibility:

CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors#CSS3_pseu...

In order to turn off those warnings you need to add pseudo-element: 0 in the file .sass-lint.yml

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

e.r.n.i.e created an issue. See original summary.

amourow’s picture

Version: 7.x-6.4 » 7.x-6.x-dev
Assigned: Unassigned » amourow
Issue tags: +sass-lint

I have the same issue, and also add the property to my .sass-lint.yml.

here is the patch to the issue

amourow’s picture

ckrina’s picture

In https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors#CSS3_pseu... it says:

the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after

It asks to use single colon pseudo-elements for backwards compatibility, and it refers to Internet Explorer 8:. But Drupal 8 & Zen 8.x-7.x/7.x-6.x are not supporting IE8 anymore right?

$support-for: (
  // IE 9-11
  ie:  9,
  // The last 4 versions of all other browsers.
  '*': -4,
);

I would suggest to change the selectors adding the double colon instead of disabling the scss-lint rule.

thanhdo1991’s picture

The single-colon will support most of the browsers
The double colon will only support safari, chrome
The single-colon is better than double colon.
Should add the property `pseudo-element: 0` to .sass-lint.yml.

andypost’s picture