强大的stylus！

百闻不如一用。
我今天对stylus的用处有了非常直观的认识。
Talk is cheap,show you the code.
使用前：

.lottery-sector li:nth-child(1) {background-color: #fff;transform: rotate(0deg) skew(54deg);
}.lottery-sector li:nth-child(2) {background-color: rgb(254, 246, 225);transform: rotate(36deg) skew(54deg);
}.lottery-sector li:nth-child(3) {background-color: #fff;transform: rotate(72deg) skew(54deg);
}.lottery-sector li:nth-child(4) {background-color: rgb(254, 246, 225);transform: rotate(108deg) skew(54deg);
}.lottery-sector li:nth-child(5) {background-color: #FFF;transform: rotate(144deg) skew(54deg);
}.lottery-sector li:nth-child(6) {background-color: rgb(254, 246, 225);transform: rotate(180deg) skew(54deg);
}.lottery-sector li:nth-child(7) {background-color: #FFF;transform: rotate(216deg) skew(54deg);
}.lottery-sector li:nth-child(8) {background-color: rgb(254, 246, 225);transform: rotate(252deg) skew(54deg);
}.lottery-sector li:nth-child(9) {background-color: #FFF;transform: rotate(288deg) skew(54deg);
}.lottery-sector li:nth-child(10) {background-color: rgb(254, 246, 225);transform: rotate(324deg) skew(54deg);
}

使用后：

.lottery-sector for row in 1..10 li:nth-child({row}) if (row % 2 == 0) background-color: rgb(254, 246, 225);else background-color: #fff;transform: rotate((row * 36)deg) skew(54deg);

是不是觉得清爽了很多！这里有用到stylus的几个语法：插值、嵌套、计算、条件、循环、省略花括号、取一段值的简便写法。

嵌套

lottery-sector的子元素li的样式直接定义在了它里面

插值

变量文本要作为内容的一部分，用{}括起来，比如 li:nth-child({row})
计算

比如row * 36，row % 2 == 0

这边我感觉是我踩的一个坑，不过也应该成为编写代码的习惯，变量和计算符号之间要有空格

条件

if和else语句的使用是允许的
循环

用for in循环，这边值得夸奖的是它的简便写法，循环1～10可以直接写成1…10(包含边界，即包含10)，1…10(不包含边界，不包含10)。

强大的stylus！相关推荐

stylus 在静态页面上的使用经验
前段时间做vue项目,用到了css的提升开发效率的工具stylus,感觉很好用.现在又开始写静态页面了,于是将强大的stylus拿过来继续用.于是就写了这篇使用经验,算是自己总结一下. stylus的 ...
Yar的RPC的应用-php
RPC,即 Remote Procedure Call(远程过程调用),调用远程计算机上的服务,就像调用本地服务一样.RPC可以很好的解耦系统.RPC 可基于 HTTP 或 TCP 协议,Web Se ...
Stylus插件开发教程
由于Stylus的强大,它支持SCSS LESS 灵活的书写方式,然后它不用像SCSS安装Ruby,不是特别出名,流行的工具没有使用它,只是在小的圈子里面挺火滴.它的强大不用赘述了,我正在使用了它开始 ...
python和sass区别_CSS 的预处理程序（Sass、LESS、Stylus 等）分别都有哪些优缺点？...
三种CSS 预处理器(框架) 历史: LESS & Sass LESS是受Sass启发而开发的工具,它列出了如下开发的理由:"为什么要开发一个Sass的替代品呢?原因很简单:首先是语 ...
Stylus插件开发教程 1
由于Stylus的强大,它支持SCSS LESS 灵活的书写方式,然后它不用像SCSS安装Ruby,不是特别出名,流行的工具没有使用它,只是在小的圈子里面挺火滴.它的强大不用赘述了,我正在使用了它.开 ...
『前端干货篇』：你不知道的Stylus
最近沉迷学习(其实大部分时间都在看英雄联盟S8总决赛),把这几天在学的Stylus做个总结.这篇文章对学习Stylus的新手来说应该会有帮助~ 为了让大家代码观赏性更好,这里的代码都以截图的方式呈现, ...
Pug+Stylus+Bootstrap入门
2019独角兽企业重金招聘Python工程师标准>>> 本文说明博主最近在学习Express.js,里面涉及到Pug,Stylus和Bootstrap的使用.为了使文章主题专一,故 ...
关于sass（scss）、less、postcss、stylus等的用法与区别
一. Sass/Scss.Less.stylus是什么? 它们都是css预处理器.css预处理器的概念:CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项 ...
stylus之方法(Functions)
方法(Functions): 函数:Stylus强大之处就在于其内置的语言函数定义.定义与混入(mixins)一致却可以返回值返回值: 很简单的例子,两数值相加的方法我们可以在特定条件下使用该方法 ...

强大的stylus！

强大的stylus！相关推荐

最新文章

热门文章