今天总结一下Stylus记一些常用的也是最基本的用法

一.  选择器

Stylus是基于缩进的这让我们可以更快捷的编写css比如

body {
margin:;
paddind:;
font-size: 12px;
background: red;
} 使用stylus基于缩进的写法:
body
margin 0;
padding 0;
font-szie 12px;
background red

 规则级

我们常常将重复的代码写在一起这样能让我们少些很多代码,

.header, .main {
margin: 5px;
border: 1px solid orange
}

Stylus就跟css一样使用,分隔同时为多个元素定义属性

.header,  .main
margin 5px;
border 1px solid orange

 父级引用

字符&指向父选择器

a
color red
&:hover
color orange

就相当于

a {
color: red
} a:hover {
color: orange
}

二:变量

变量(Variables)

变量

我们可以指定表达式为变量,然后在我们的样式中贯穿使用:

font-size = 14px

header
font-size font-size

三.插值(Interpolation)

插值

Stylus支持通过使用{}字符包围表达式来插入值,其会变成标识符的一部分。例如,-webkit-{'border' + '-radius'}等同于-webkit-border-radius.

partOfProp = radius
value = 10px
div
border-{partOfProp} value /*切记属性值这里不可以使用插值*/

四:运算符

comWidth = 980px

.innerWidth
width: comWidth - 20px;

五:混合书写

混入

混入和函数定义方法一致,但是应用却大相径庭。

例如,下面有定义的border-radius(n)方法,其却作为一个mixin(如,作为状态调用,而非表达式)调用。

border-radius()选择器中调用时候,属性会被扩展并复制在选择器中。

border-radius(n)
-webkit-border-radius n
-moz-border-radius n
-o-border-radius n
border-radius n .innerWidth
width 200px
height 200px
border 1px solid red
border-radius(50%)

六:方法(Functions)

函数

Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致;却可以返回值。

返回值
add(a, b)
a + b .innerWidth
width add(50px, 5)
height add(20px, 5)
border 1px solid red
默认参数

可选参数往往有个默认的给定表达。在Stylus中,我们甚至可以超越默认参数。

add(a, b = a)
a + b .innerWidth
width add(50px, 5)
height add(20px)
border 1px solid red

当没有指定第二个参数就会使用默认参数b=a 也就是加上20

我们可以把简单的add()方法更进一步。通过内置unit()把单位都变成px, 因为赋值在每个参数上,因此,我们可以无视单位换算。

add(a, b=a)
a = unit(a, px)
b = unit(b, px)
a + b .innerWidth
width add(15%, 10deg)
height 200px;
border 1px solid red

Stylus-富有表现力的、动态的、健壮的CSS的更多相关文章

  1. 一、富有表现力的JavaScript

    第一章:富有表现力的JavaScript 1.1  JavaScript的灵活性 1.2  弱类型语言 1.3  函数是一等对象 1.4  对象的易变性 1.5  继承 1.6  JavaScript ...

  2. 【总结】富有表现力的JavaScript

    1.JavaScript的灵活性 JavaScript是目前最流行.应用最广泛的语言之一,它是一种极富表现力的语言,它具有C家族语言所罕见的特性.这种语言允许我们使用各种方式来完成同一个任务或者功能, ...

  3. 富有表现力的javascript

    1.javascript的灵活性,你可以把它写的很简单,也可以写的很复杂,简直就是随心所欲: 2.javascript是弱类型语言,定义变量的时候不用声明变量类型,不声明类型,并不是说,javascr ...

  4. JS设计模式——1.富有表现力的JS

    创建支持链式调用的类(构造函数+原型) Function.prototype.method = function(name, fn){ this.prototype[name] = fn; retur ...

  5. 《JavaScript设计模式》笔记之第一、二章:富有表现力的JavaScript 和 接口

    第一章 创建一个类 方法一:      var Anim = function() {           ...      };      Anim.prototype.start = functi ...

  6. 8款极具表现力的jQuery/CSS3网页菜单

    上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向 ...

  7. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  8. 动态加载js css 插件

    简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两 ...

  9. js动态加载js css文件,可以配置文件后辍,防止浏览器缓存

    js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...

  10. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

随机推荐

  1. net.sf.json和com.alibaba.fastjson两种json加工类的相关使用方法

    com.alibaba.fastjson Fastjson是一个Java语言编写的高性能功能完善的JSON库.它采用一种“假定有序快速匹配”的算法,把JSON Parse的性能提升到极致,是目前Jav ...

  2. JS实现数组排序:升序和降序

    如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序.即 a 和 b 是两个将要被比较的元素: 如果 compareFunction(a, b) 小于 0 ,那么 a 会 ...

  3. 测开之路一百二十七:flask之构造response对象

    可以使用flask.make_response构造自定义响应信息 构造一个响应信息为文本,状态码为404 响应 响应数据为json,状态码为200 返回html # coding:utf-8from ...

  4. IDEA给类和方法配置注释模板(参数换行显示)

    创建类模板 1.打开设置:File–>settings–>Editor–>File and Code Templates–>Includes 2.输入注释模板 #if (${P ...

  5. IntlliJ IDEA 注册码获取或离线破解

    JB 的软件还是挺好用的,建议有钱的话支持正版.. IntelliJ IDEA 有开源版,但是要想玩企业级开发,还是得用收费版. 不管哪种方式,使用前都需要把"0.0.0.0 account ...

  6. 在树莓派上搭建jupyter notebook server

    自从搬家后,树莓派闲置了好一段时间,最近打算将其利用起来.想来想去,搭个jupyter notebook用要靠谱的,毕竟经常要实验一些Python脚本. 具体过程参考以下链接: https://www ...

  7. 【Qt开发】Qt在Windows下的三种编程环境搭建

    从QT官网可以得知其支持的平台.编译器和调试器的信息如图所示: http://qt-project.org/doc/qtcreator-3.0/creator-debugger-engines.htm ...

  8. 网络编程.TCP分块接收数据(AIO)(IOCP)

    1.前提:每次投递的接收缓冲区 在它返回后 就不再用它进行2次投递了 于是 接收缓冲区 在返回的时候,数据都是 从接收缓冲区的偏移[0]处开始填充的,且 接收缓冲区 可能被填满 也可能未被填满. 1. ...

  9. ZABBIX_PROXy

    ProxyMode=0 Server=172.19.30.50 ServerPort=10051 Hostname=172.17.26.102 ListenPort=10051 LogFile=/va ...

  10. 九、Zabbix-触发器

    1.触发器是用来触发报警,或这其他动作的机制,它需要依赖监控项,以监控项为基础创建 3.创建触发器 (1)配置—>模板—>需要调整的模板—>触发器 (2)编辑触发器