less封装样式有规律的类选择器-遁地龙卷风

1.解决的问题

.class-rule(p,2,width 20px animation-dely 0.1s);可以生成下列css样式

.p2 {
  animation-dely: 0.2s;
  width: 40px;
}
.p1 {
  animation-dely: 0.1s;
  width: 20px;
}

2.less 代码

.class-rule(@name,@number,@rest) when(@number > 0){

	@max-index:length(@rest) / 2;
	[email protected]{name}@{number}{
		.setAttribute(@max-index,@number,@rest,@name);
	}
	.class-rule(@name,@number - 1,@rest);
	.setAttribute(@index,@number,@rest,@name) when(@index > 0){

		@initialValue:extract(@rest,(@index - 1) * 2 + 2);
		@attribute:extract(@rest,(@index - 1) * 2 + 1);
		@{attribute}:@initialValue * @number;
		.setAttribute(@index - 1,@number,@rest,@name);
	}
}

  .class-index(p,3,animation-delay 0.1s );
  .class-index(p,3,animation-delay 0.1s width 20px);
  *@number 需大于1
  animation-delay 0.1s
  这样的参数会被认为是一个列表,列表中有两个元素,下标从1开始
  .class-rule和.setAttribute都会在第二个参数大于0的时候递归调用自己
  前者用于类选择器的输出后者用于样式的输出

时间: 2024-10-06 02:26:52

less封装样式有规律的类选择器-遁地龙卷风的相关文章

ID选择器和类选择器的合理使用

一.什么是ID选择器和类选择器 作为CSS选择器的最主要的两大选择器:ID选择器主要指的是通过DOM(Document Object Model)节点的ID选取节点,例如代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ID选择器</title> 6 <style type="text/css"

Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)

一.兄弟选择器 相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 - 使用加号(+)作为结合符 通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符,即 element1~element2 - 两种元素必须拥有相同的父元素,但是element2不必直接紧随element1 二.属性选择器 属性选择器 - 属性选择器能够将元素附带的属性用于选择器中,从而对带

巧用CSS3伪类选择器自定义checkbox和radio的样式

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio. 例如这种: 用其他元素模拟(以checkbox为例): <div class='checkbox'></div> $('.checkbox').click(function(){

CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式

转自爱设计 原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹.虽 然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一

CSS3 nth 伪类选择器

考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</section> <ul> <li>item 1</li> <li> <ul> <li>sub item 1</li> <li>sub item 2</li> <li>sub item

CSS系列(7)CSS类选择器Class详解

这一篇文章,以笔记形式写. 1,  CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1)    使用类选择器的前提是给标签添加上类属性,比如<p class="important"></p> (2)    类选择器的语法为:*.important {color:red;},不过一般省略前面的通配符选择器,写成 .important {color:red;},这样就会给所

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

CSS3 结构性伪类选择器(2)

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>

小程序样式表不支持级联选择器

WXSS支持以.开始的类选择器.如: .normal_view { color: #000000; padding: 10px; } 可以使用标签选择器,控制同一类组件的样式.如:使用input标签选择器控制<input/>的默认样式. input { width: 100px; }