stylus预处理入门(一)——选择器
2019独角兽企业重金招聘Python工程师标准>>>
stylus预处理入门(一)——选择器
转载:原地址http:http://www.jianshu.com/p/5838497ec56e
相关网站
- 官网:stylus
- 中文文档:stylus中文版参考文档 by 张鑫旭
- 理解css预处理器:css预处理器初识 by 栓萝卜的棍子
- 三种css预处理器语言详解:less|sass|stylus by 开源中国
CSS预处理器语言的个人理解
- 用另外一种可读性高、语法性强的语言来写CSS。stylus可以使用循环、分支、定义变量和函数结构来写css,这样写起来既方便又快捷。
- 通过一种转换机制将这种语法转化为原生css。每种语言的转化机制也有很多种,可以使用各种语言官网的方法转化,例如less。也可以使用构建工具webpack的stylus-loader来将stylus语言转化为原生css。
stylus的特点
- 官网可以直接将stylus代码放在官网这一页测试生成原生css(本人硬加上去的特点)
- 通过缩进来解释语言(喜欢python的geek应该会比较喜欢)。
- 待补充..
bodydivcolor white
转化:
body div {color:#fff;
}
stylus的优点
- 类python语法(官网称stylus为pythonic)。
- 语法灵活(可选的括号,冒号,分号等)。
stylus的缺点
- 由于其语法灵活的问题,如果没有团队规范,那么就会带来团队开发混乱,维护起来比较麻烦,各种语法混杂。
stylus语法介绍
选择器(selectors)
缩进(换行缩进表示语句前进)
bodycolor:white;
转化:
body{color:white;
}
同级选择器
- element,element
div
pcolor:white;
转化:
div,p{color:white;
}
- element element
divpcolor:white;
转化:
div p{color:white;
}
- element >element
div>pcolor:white;
转化:
div >p{color:white;
}
- element +element
div+pcolor:white;
转化:
div +p{color:white;
}
例外:
foo bar baz
>spancolor:white;
注:上面代码的foo bar baz编译器解析有可能是"标签 属性 属性",有可能是"标签 标签 标签"(有可能是自定义的标签)(编译器只会识别文档结构而不是标签或者属性)
建议写成下面这样(在最后的选择器后面加一个逗号[comma]):
foo bar baz,
>span
注:上面的同级选择器是这里的优化,没有提到的其他选择器大多数保留原来的语法,或者与上面的语法类似,当然上面提到的选择器也可以使用原来的语法
引用父级选择器
使用&指向父级选择器,有可能是选择器数组,也有可能是单独的一个选择器。
div
pcolor:#FFF;&:hovercolor:#000;
转化:
div,
p {color: #fff;
}
div:hover,
p:hover {color: #000;
}
解释:其实"&"可以理解为代替了上一层的选择器,比如上面例子,"&"的上一层是"div,p",这样说比较好理解。
下面是引用父级选择器的另一个例子
box-shadow()-webkit-box-shadow arguments-moz-box-shadow argumentsbox-shadow argumentshtml.ie8 &,html.ie7 &,html.ie6 &border 2px solid arguments[length(arguments) - 1]body#loginbox-shadow 1px 1px 3px #eee
转化:
body #login {-webkit-box-shadow: 1px 1px 3px #eee;-moz-box-shadow: 1px 1px 3px #eee;box-shadow: 1px 1px 3px #eee;}html.ie8 body #login,html.ie7 body #login,html.ie6 body #login {border: 2px solid #eee;}
注:如果想在代码里使用"&"符号而不是stylus的"&",可以在&字符前加一个反斜杠并加上引号,如下:
.foo[title*='\&'] /*.foo[title*='&']*/
部分引用父级选择器之单层选择器
使用^ [N] 引用第N层父级选择器。如果N是正数,这里的第N层指的是最上层上层选择器到第N层选择器,如果N是负数,这里的第N层指的是最上层选择器到倒数第|N|层选择器。
- 有&的情况:
.foo&__barwidth: 10px^[0]:hover &width: 20px
转化:
.foo__bar {width: 10px;
}
.foo:hover .foo__bar {width: 20px;
}
- 没有&的情况:
.foo.barwidth: 10px^[0]:hover &width: 20px
转化:
.foo .bar {width: 10px;
}
.foo:hover .foo .bar {width: 20px;
}
- N为0或者正数则从最上层开始到最下层,N为负数则从最下层开始到最上层。其实第N层的选择器是包含了上一层的选择器的,例如下面的例子,第一层选择器是foo,第二层就是foo bar,第三层是foo bar baz,如此类推(官网说的是嵌套)。
.foobarbazwidth: 10px^[-1]:hover &width: 20px
转化:
.foo bar baz {width: 10px;
}
.foo bar:hover .foo bar baz {width: 20px;
}
注:如果写在mixins里的话,推荐将N写成负数。因为你并不知道你在调用哪一层( 有可能还有隐藏的上层选择器)
部分引用父级选择器之范围选择器
^ [N..M] 引用第N层选择器到第M层选择器组成的选择器。
注:这里有些跟引用单层选择器有点不同,这里的第几层是不包括上层选择器的,具体来看例子感受一下。
.foobarbaztestwidth: 10px^[-1]:hover ^[-2..-1]width: 20px
转化:
.foo bar baz test {width: 10px;
}
.foo bar baz:hover baz test {width: 20px;
}
其他部分引用父级选择器
- 最上层父级选择器(~/),相当于^ [0]
.block&__element~/:hover &color: red
转化:
.block:hover .block__element {color: #f00;
}
- 相对父级选择器(../)
.foobarbaztestwidth: 10px../:hover ^[-1..-2]width: 20px
转化:
.foo .bar .baz .test {width: 10px;
}
.foo .bar .baz:hover .baz .test {width: 20px;
}
- 脱离嵌套的选择器(/)
div
pspancolor #A7A7A7&:hover,/.is-hoveredcolor #000
转化:
div span,
p span {color: #a7a7a7;
}
div span:hover,
p span:hover,
.is-hovered {color: #000;
}
上面的例子里,转化后的代码.is-hovered已经脱离了嵌套结构了,已经不在任何选择器嵌套里。
选择器的值
selector()获取当前嵌套层的值,selectors()获取从最上层到当前层每一层的选择器的list
.foo&:hoverclass selector()color blackspancolor white
转化:
.foo:hover {class: '.foo:hover'; /*这个是selector()的值*/color: #000;
}
.foo:hover span {color: #fff;
}
.a.b&__ccontent: selectors()spancolor white
转化:
.a .b__c {content: '.a', '& .b', '&__c';
}
.a .b__c span {color: #fff;
}
转载于:https://my.oschina.net/fadoudou/blog/1477102
stylus预处理入门(一)——选择器相关推荐
- jQurey入门以及选择器
<html> <head> <meta charset="utf-8" /> <title> ...
- jQuery入门基础——选择器
jQuery01-入门-选择器 目标:jQuery第一次课 入门 和 选择器 重点:选择器 问: 3W1H: What:jQuery是什么? Why:为什么要学jQuery? Where:什么情况下用 ...
- Pug+Stylus+Bootstrap入门
2019独角兽企业重金招聘Python工程师标准>>> 本文说明 博主最近在学习Express.js,里面涉及到Pug,Stylus和Bootstrap的使用.为了使文章主题专一,故 ...
- 小汤学编程之jQuery学习day01——简介、入门、选择器
一.简介 1.下载 2.导入 二.入门 1.jQuery对象 2.jQuery对象与js对象相互转换 3.页面载入 三.选择器 1.基本选择器 2.层级选择器 ...
- JQuery入门(1) - 选择器
JQuery入门(1) - 选择器 $("元素") // 选取元素 $("元素.类名") // 选取元素中class为"类名"的元素 $(& ...
- jQuery入门、选择器、事件、静态方法、动画
目录 第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuer ...
- 浅谈对html css的理解,HTML+CSS入门 CSS选择器 、属性和值浅谈
body { font-size: 0.8em; color: navy; } 上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时, ...
- 机器学习中数据清洗预处理入门完整指南
点击我爱计算机视觉标星,更快获取CVML新技术 本文经机器之心(微信公众号:almosthuman2014)授权转载, 禁止二次转载. 选自towardsdatascience 作者:Anne Bon ...
- Python数据清洗 预处理入门完整指南!
凡事预则立,不预则废,训练机器学习模型也是如此.数据清洗和预处理是模型训练之前的必要过程,否则模型可能就「废」了.本文是一个初学者指南,将带你领略如何在任意的数据集上,针对任意一个机器学习模型,完成数 ...
最新文章
- jQuery性能优化指南
- 【redis】布隆过滤器详解
- https 不会被中间人攻击——因为中间人即使拿到了数据,也是加密的
- 圭古文化获数百万天使轮融资 ,持续探索原创漫画IP变现
- 台虚拟机更改计算机名,检查虚拟机的硬件信息、更改虚拟机名称、查看虚拟机配...
- MSYS2 + MinGW-w64 + Git + gVim 环境配置
- TextScanner:旷视新作文字识别新突破,确保字符阅读顺序
- java画虚线_在java中绘制虚线
- 无稽之谈--关于我自己的程序世界
- 遇到“此网站的安全证书有问题”怎么办
- adb shell and docker_k8s
- python两个表格相同数据筛选_python筛选出两个文件中重复行的方法
- java模拟KTV点歌系统
- ddl是什么(ddl是什么软件)
- 浏览器产生乱码的原因
- python11.23
- Jeremy Cole大神关于Innodb的文章分享
- 最大公约数、最小公倍数
- Elasticsearch语法知多少之Term query
- WIN10使用内置Check Point Capsule
热门文章
- ant-design中 ProTable隐藏查询重置、设置或某一搜索框
- php连接数据库404错误代码,访问编码后的中文URL返回404错误的解决方法,url404_PHP教程...
- FPGA—按键控制呼吸灯的时间
- Robot in a Hallway
- dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib解决办法
- Linux系统上安装Windows虚拟机【VMware】
- HTTP 响应码大全
- 曼哈顿距离(Manhattan)
- 字符串拆分出单个字符
- AI:拿来主义——预训练网络(一)