文档章节

stylus预处理入门(一)——选择器

法斗斗
 法斗斗
发布于 2017/07/21 15:02
字数 1466
阅读 59
收藏 0

stylus预处理入门(一)——选择器

转载:原地址http:http://www.jianshu.com/p/5838497ec56e

相关网站

CSS预处理器语言的个人理解

  • 用另外一种可读性高、语法性强的语言来写CSS。stylus可以使用循环、分支、定义变量和函数结构来写css,这样写起来既方便又快捷。
  • 通过一种转换机制将这种语法转化为原生css。每种语言的转化机制也有很多种,可以使用各种语言官网的方法转化,例如less。也可以使用构建工具webpack的stylus-loader来将stylus语言转化为原生css。

stylus的特点

  • 官网可以直接将stylus代码放在官网这一页测试生成原生css(本人硬加上去的特点)
  • 通过缩进来解释语言(喜欢python的geek应该会比较喜欢)。
  • 待补充..
body
  div
      color white

转化:

body div {
    color:#fff;
}

stylus的优点

  • 类python语法(官网称stylus为pythonic)。
  • 语法灵活(可选的括号,冒号,分号等)。

stylus的缺点

  • 由于其语法灵活的问题,如果没有团队规范,那么就会带来团队开发混乱,维护起来比较麻烦,各种语法混杂。

stylus语法介绍

选择器(selectors)

缩进(换行缩进表示语句前进)

body
  color:white;

转化:

body{
    color:white;
}

同级选择器

  • element,element
div
p
    color:white;

转化:

div,p{
    color:white;
}
  • element element
div
    p
        color:white;

转化:

div p{
    color:white;
}
  • element >element
div
    >p
      color:white;

转化:

div >p{
    color:white;
}
  • element +element
div
    +p
        color:white;

转化:

div +p{
    color:white;
}

例外:

foo bar baz
>span
    color:white;

注:上面代码的foo bar baz编译器解析有可能是"标签 属性 属性",有可能是"标签 标签 标签"(有可能是自定义的标签)(编译器只会识别文档结构而不是标签或者属性)

建议写成下面这样(在最后的选择器后面加一个逗号[comma]):

foo bar baz,
>span

注:上面的同级选择器是这里的优化,没有提到的其他选择器大多数保留原来的语法,或者与上面的语法类似,当然上面提到的选择器也可以使用原来的语法

引用父级选择器

使用&指向父级选择器,有可能是选择器数组,也有可能是单独的一个选择器。

div
p
    color:#FFF;
    &:hover
        color:#000;

转化:

div,
p {
  color: #fff;
}
div:hover,
p:hover {
  color: #000;
}

解释:其实"&"可以理解为代替了上一层的选择器,比如上面例子,"&"的上一层是"div,p",这样说比较好理解。

下面是引用父级选择器的另一个例子

  box-shadow()
    -webkit-box-shadow arguments
    -moz-box-shadow arguments
    box-shadow arguments
    html.ie8 &,
    html.ie7 &,
    html.ie6 &
      border 2px solid arguments[length(arguments) - 1]

  body
    #login
      box-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
  &__bar
    width: 10px

    ^[0]:hover &
      width: 20px

转化:

.foo__bar {
  width: 10px;
}
.foo:hover .foo__bar {
  width: 20px;
}
  • 没有&的情况:
.foo
  .bar
    width: 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,如此类推(官网说的是嵌套)。
.foo
  bar
    baz
      width: 10px

      ^[-1]:hover &
        width: 20px

转化:

.foo bar baz {
  width: 10px;
}
.foo bar:hover .foo bar baz {
  width: 20px;
}

注:如果写在mixins里的话,推荐将N写成负数。因为你并不知道你在调用哪一层( 有可能还有隐藏的上层选择器)

部分引用父级选择器之范围选择器

^ [N..M] 引用第N层选择器到第M层选择器组成的选择器。
注:这里有些跟引用单层选择器有点不同,这里的第几层是不包括上层选择器的,具体来看例子感受一下。

.foo
  bar
    baz
      test
         width: 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;
}
  • 相对父级选择器(../)
.foo
  bar
    baz
      test
         width: 10px
         ../:hover ^[-1..-2]
             width: 20px

转化:

.foo .bar .baz .test {
  width: 10px;
}
.foo .bar .baz:hover .baz .test {
  width: 20px;
}
  • 脱离嵌套的选择器(/)
div
p
   span
      color #A7A7A7
      &:hover,
      /.is-hovered
        color #000

转化:

div span,
p span {
  color: #a7a7a7;
}
div span:hover,
p span:hover,
.is-hovered {
  color: #000;
}

上面的例子里,转化后的代码.is-hovered已经脱离了嵌套结构了,已经不在任何选择器嵌套里。

选择器的值

selector()获取当前嵌套层的值,selectors()获取从最上层到当前层每一层的选择器的list

.foo
  &:hover
       class selector()
       color black
       span
          color white

转化:

.foo:hover {
  class: '.foo:hover'; /*这个是selector()的值*/
  color: #000;
}
.foo:hover span {
  color: #fff;
}
.a
  .b
    &__c
      content: selectors()
      span
            color white

转化:

.a .b__c {
  content: '.a', '& .b', '&__c';
}
.a .b__c span {
  color: #fff;
}
 

本文转载自:

法斗斗
粉丝 22
博文 368
码字总数 17774
作品 0
杨浦
程序员
私信 提问
Sass和LESS-动态CSS技术

一、简介 二、Sass/Scss的使用 变量 注释 中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写,以及简单的样式说明。但是,你也并不希望每个浏览网站源码的人都能看到所...

dhb_oschina
2016/05/17
60
0
谈谈PostCSS

前言 现在的前端,javascript的发展有目共睹,框架林立。同时,html也是齐头并进,推出了HTML5标准,并且得到了普及。这样的发展却唯独少了一个角色? CSS,就是这个看似不起眼的家伙,却在开...

zimo
2017/10/17
0
0
Vue中使用CSS预处理器 stylus以及配置全局变量的方法

前言 不得不说CSS预处理器(Sass/Less/Stylus)极大的方便了前端研发攻城狮编写CSS样式,提供了变量定义、可嵌套的选择器、mixins混合书写、函数定义等诸多便捷的能力。 今天呢,胡哥就以stylu...

JustBeCoder
2018/07/12
0
0
『前端干货篇』:你不知道的Stylus

最近沉迷学习(其实大部分时间都在看英雄联盟S8总决赛),把这几天在学的Stylus做个总结。这篇文章对学习Stylus的新手来说应该会有帮助~ 为了让大家代码观赏性更好,这里的代码都以截图的方式...

steins丶gate
2018/10/22
0
0
为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。 首先我们来简单介绍下...

彭博
2012/11/27
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
15
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
10
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
14
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
14
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部