今天总结一下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. LeetCode_509.斐波那契数

    LeetCode-cn_509 509.斐波那契数 斐波那契数,通常用 F(n) 表示,形成的序列称为斐波那契数列.该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和.也就是: F(0) ...

  2. SpringBoot(十二):SpringBoot整合Kafka

    https://blog.csdn.net/saytime/article/details/79950635

  3. day68—angularJS学习笔记之-过滤器

    转行学开发,代码100天——2018-05-23 今天学习angularJS的过滤器的使用. angular中的常用过滤器用来修改数据格式,主要有以下几类: 1.大写,| uppercase 2.小写 ...

  4. Excel表格数据导入MySQL数据库

    有时候项目需要将存在表格中的批量数据导入数据库,最近自己正好碰到了,总结一下: 1.将excel表格另存为.csv格式文件,excel本身的.xlsx格式导入时可能会报错,为了避免不必要的格式错误,直 ...

  5. 浅谈CSS的模块化

    一.简介 Web前端模块化:HTML模块化.CSS模块化以及JS模块化三个部分: 二.CSS模块化背景 对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目 ...

  6. Ubuntu 16.04系统挂载4T硬盘

    问题描述: Ubuntu 16.04系统,系统盘为240G固态硬盘,还有1T机械硬盘,现要再添加一个4T硬盘. 问题分析: 使用GTP对硬盘进行分区并挂载硬盘的方法,一般而言服务器上挂载的硬盘都是比较 ...

  7. 九、Zabbix-触发器

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

  8. Java基础语法--IDEA快捷键

    Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...

  9. Python web 面试题(一)

    1.列举django的内置组件? url .view.model.template.中间件 2.列举django中间件的5个方法?以及django中间件的应用场景? process_request(s ...

  10. 最全的DevOps自动化工具集合

    版本控制&协作开发:GitHub.GitLab.BitBucket.SubVersion.Coding.Bazaar 自动化构建和测试:Apache Ant.Maven .Selenium.P ...