Sass scss文件中的自定义指令?也许是为了一个新的伪类?

Sass scss文件中的自定义指令?也许是为了一个新的伪类?,sass,pseudo-class,Sass,Pseudo Class,是否可以使用某种@directive创建语法,类似于创建@mixin?其次,是否可以创建仅限SASS的伪类? 我想声明我自己的SASS指令,尽管我不想强迫我的队友安装额外的ruby gem来使用它,所以我想将它存储在scss部分中。我知道它们是复杂程度的顺序,所以也许这是不可能的 除了可能创建一个新的仅限于scss的伪类(例如:parent、:clicked、:unchecked等),我还对一个定制指令感兴趣,该指令可以帮助使用复选框来指导css动画(“css复选框hack”)。下面是我的scs

是否可以使用某种@directive创建语法,类似于创建@mixin?其次,是否可以创建仅限SASS的伪类?

我想声明我自己的SASS指令,尽管我不想强迫我的队友安装额外的ruby gem来使用它,所以我想将它存储在scss部分中。我知道它们是复杂程度的顺序,所以也许这是不可能的

除了可能创建一个新的仅限于scss的伪类(例如:parent、:clicked、:unchecked等),我还对一个定制指令感兴趣,该指令可以帮助使用复选框来指导css动画(“css复选框hack”)。下面是我的scss伪代码,用于概括我要做的事情:

//  this code monitors when a checkbox (#someinput) is checked,
//  then applies style to div #target div.  Basically an 'onClick' event in scss.
body {
  #wrapper {
    #targetdiv {
      @spotcheck(#someinput) {                 #
        color: red; border: 2px solid blue;    # <-- move this ...
      }                                        #

      color: blue; border: 0;
      #someinput {
        width: 20px; height: 20px;
      }
    }
  }
}

// ... the above scss should be converted to this pre-compiled state, also scss
body {
  #someinput:checked ~ #targetdiv {           #
    color: red; border: 2px solid blue;       # <-- ..to here. it needs to be 
  }                                           #       above the #targetdiv

  #wrapper {
    #targetdiv {
      color: blue; border: 0;
      #someinput {
        width: 20px; height: 20px;
      }
    }
  }
}
//此代码监视何时选中复选框(#someinput),
//然后将样式应用于div#target div。基本上是scss中的“onClick”事件。
身体{
#包装纸{
#targetdiv{
@抽查(#someinput){#

颜色:红色;边框:2px纯蓝色;#使您的选择器只根据其绝对需要而定,而不是更多。混音只会更加冗长,没有真正的好处

#targetdiv {
    color: blue; border: 0;

    #someinput:checked ~ & {
        color: red; border: 2px solid blue;
    }
}

#someinput {
    width: 20px; height: 20px;
}
输出:

#targetdiv {
  color: blue;
  border: 0;
}
#someinput:checked ~ #targetdiv {
  color: red;
  border: 2px solid blue;
}

#someinput {
  width: 20px;
  height: 20px;
}
或者,这将产生相同的结果,并且能够根据需要过度限定:

#targetdiv {
    color: blue; border: 0;
}

#someinput {
    width: 20px; height: 20px;

    ~ #targetdiv {
        color: red; border: 2px solid blue;
    }
}

这是实际的Sass语法,其中“&”表示父元素吗?:#someinput:checked ~&是的,普通的Sass(scss)。我不知道它存在,谢谢。顺便问一下,你对提出的主要问题有什么想法,它涉及到创建“@指令”或伪类的方法,可能是在导入的scss文件(而不是ruby)中创建?我的意见并不重要,但是Sass的维护者在添加新指令时犹豫不决,除非有可靠的使用案例。如果我猜的话,我会说这可能不是这些案例中的一个。我很惊讶地看到&在这一行的末尾。原因是它不起作用。它需要出现在不幸的是,这是一个开始,如果它真的开始了,那就太好了。