Stylus-富有表现力的、动态的、健壮的CSS
今天总结一下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的更多相关文章
- 一、富有表现力的JavaScript
第一章:富有表现力的JavaScript 1.1 JavaScript的灵活性 1.2 弱类型语言 1.3 函数是一等对象 1.4 对象的易变性 1.5 继承 1.6 JavaScript ...
- 【总结】富有表现力的JavaScript
1.JavaScript的灵活性 JavaScript是目前最流行.应用最广泛的语言之一,它是一种极富表现力的语言,它具有C家族语言所罕见的特性.这种语言允许我们使用各种方式来完成同一个任务或者功能, ...
- 富有表现力的javascript
1.javascript的灵活性,你可以把它写的很简单,也可以写的很复杂,简直就是随心所欲: 2.javascript是弱类型语言,定义变量的时候不用声明变量类型,不声明类型,并不是说,javascr ...
- JS设计模式——1.富有表现力的JS
创建支持链式调用的类(构造函数+原型) Function.prototype.method = function(name, fn){ this.prototype[name] = fn; retur ...
- 《JavaScript设计模式》笔记之第一、二章:富有表现力的JavaScript 和 接口
第一章 创建一个类 方法一: var Anim = function() { ... }; Anim.prototype.start = functi ...
- 8款极具表现力的jQuery/CSS3网页菜单
上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向 ...
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 动态加载js css 插件
简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两 ...
- js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...
- 动态为页面添加CSS样式文件引用
动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...
随机推荐
- 每日踩坑 2019-08-23 button 元素点击后刷新页面
button标签按钮会提交表单. 解决方案: <button class="btn btn-primary" type="button" id=" ...
- 使用resultMap定义查询结果集,实现关联查询
接下来介绍resultMap定义查询结果集,实现关联查询 1 首先在接口中定义操作的方法 public interface EmployeeMapperPlus { public Employee g ...
- PLSQL导出还原数据库
1 导出存储过程,触发器,序列等所有用户对象.(备份) 导出所有的表,存储过程,触发器,序列等所有的创建语句(.sql文件) 在PL/SQL Developer的菜单Tools(工具) => ...
- 七、SpringBoot项目集成JSP以及项目不同启动方式及访问路径配置
1.创建JSP目录 在src/main目录下创建目录webapp/WEB-INF/jsp用于存放jsp页面,如下图: 然后再改文件夹下面我们创建JSP文件: 大家在使用IDEA 的new菜单创建JSP ...
- 用Vue来实现音乐播放器(二十一):歌手详情数据抓取
第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...
- 在VSCode中开启ESLint风格审查
最近一直在学习开发一个VUE项目,几乎没有前端基础摸爬滚打,就一边摸索HTML,JS,CSS一边模仿着已有代码开发,也还算能学到东西. VSCode确实还不错,很轻量.在刚开始学写vue的时候,后台总 ...
- linux常用终端指令+如何用vim写一个c程序并运行
在装好ubuntu之后今天学习了一些linux的一些基础知识: windows里面打开命令窗口是win+r,在linux系统里面,ctrl+alt+t打开终端,今天的一些指令都是围绕终端来说的 首先s ...
- Chapter02 第四节 函数
2.4 函数 2.4.1 有返回值的函数 函数定义.函数原型.函数调用 函数定义即定义一个函数:形如 :double sqrt(double x){····} 函数调用即调用这个函数,形如 :doub ...
- java 多线程并发问题总结
java 多线程并发主要通过关键字synchronized实现 Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问 ...
- .net 与directX
微软早期出过managed assembly.但后来因为XXX的原因,没有继续出,只支持c++了..net的开发者就哭了.这篇博客解释了前世今生: https://blogs.msdn.microso ...