Sass scss文件中的自定义指令?也许是为了一个新的伪类?
是否可以使用某种@directive创建语法,类似于创建@mixin?其次,是否可以创建仅限SASS的伪类? 我想声明我自己的SASS指令,尽管我不想强迫我的队友安装额外的ruby gem来使用它,所以我想将它存储在scss部分中。我知道它们是复杂程度的顺序,所以也许这是不可能的 除了可能创建一个新的仅限于scss的伪类(例如:parent、:clicked、:unchecked等),我还对一个定制指令感兴趣,该指令可以帮助使用复选框来指导css动画(“css复选框hack”)。下面是我的scss伪代码,用于概括我要做的事情:Sass scss文件中的自定义指令?也许是为了一个新的伪类?,sass,pseudo-class,Sass,Pseudo Class,是否可以使用某种@directive创建语法,类似于创建@mixin?其次,是否可以创建仅限SASS的伪类? 我想声明我自己的SASS指令,尽管我不想强迫我的队友安装额外的ruby gem来使用它,所以我想将它存储在scss部分中。我知道它们是复杂程度的顺序,所以也许这是不可能的 除了可能创建一个新的仅限于scss的伪类(例如:parent、:clicked、:unchecked等),我还对一个定制指令感兴趣,该指令可以帮助使用复选框来指导css动画(“css复选框hack”)。下面是我的scs
// 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的维护者在添加新指令时犹豫不决,除非有可靠的使用案例。如果我猜的话,我会说这可能不是这些案例中的一个。我很惊讶地看到&在这一行的末尾。原因是它不起作用。它需要出现在不幸的是,这是一个开始,如果它真的开始了,那就太好了。