stylus(css预编译器)
推荐去张鑫旭大神这里详细了解:http://www.zhangxinxu.com/jq/stylus/
安装
npm install -g stylus
自动编译
$ stylus -w demo.styl -o dist / demo.styl是styl文件,dist是要生成样式的目录文件名,-w 是自动监视文件 ,-o 是将编译后的CSS文件输出到指定文件中
压缩
stylus --compress < test.styl > test.css //stylus文件编译并压缩成css文件
导入(@import)
@import "./demo1"
变量(Variables)
font-size = 14px
body
font font-size Arial, sans-seri
body {
font:14px Arial, sans-seri;
}
媒体(@media)
——stylus——
.widget
padding 10px
@media screen and (min-width: 600px)
padding 20px
——css——
.widget {
padding: 10px;
}
@media screen and (min-width: 600px) {
.widget {
padding: 20px;
}
}
好像传不了文件,有初始化样式,和兼容样式的两个小文件,传不送来,需要的留言我就行。
stylus(css预编译器)的更多相关文章
- 在 CSS 预编译器之后:PostCSS
提到css预编译器(css preprocessor),你可能想到Sass.Less以及Stylus.而本文要介绍的PostCSS,正是一个这样的工具:css预编译器可以做到的事,它同样可以做到. “ ...
- CSS预编译器
零.CSS预编译器 CSS预处理器是指对生成CSS前的某一语法的处理.CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,供项目使用 CSS预处理器为CSS增加一 ...
- CSS预编译器配置-------LESS Sass Stylus webstorm
预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处 ...
- css预编译器——Less的使用
方法一:仅介绍在客户端环境下使用的方法 1 新建test.less并引入.less该文件(和css一样在head处引入),注意rel="stylesheet/less": &l ...
- 前端学习笔记系列一:6 一种新的css预编译器stylus
stylus是 CSS 的预处理框架.CSS 预处理,顾名思义,预先处理 CSS.那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变 ...
- CSS预编译器:Sass(入门),更快的前端开发
SASs是由美国注册会计师协会(AICPA)下属审计准则委员会(ASB)发布,是为了便于注册会计师执行和落实一般公认审计准则(GAAS). Sass 扩展了 CSS3,增加了规则.变量.混入.选择器. ...
- CSS预编译器less简单用法
1.变量 定义变量 @变量名:值; @test_width:100px; 使用变量 .box{ width:@test_width; height:@test_width; background-co ...
- CSS预编译器:Sass(进阶),更快的前端开发
1.@if @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块 在 Sass 中除了 @if 之,还 ...
- CSS预编译与PostCSS以及Webpack构建CSS综合方案
CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...
随机推荐
- LinearLayout中的android:layout_garvity的center_vertical和center_horizontal
当LinearLayout的排列方向是 horizontal时,只有垂直方向上的对齐方式才会生效.因为此时水平方向上的长度是不固定的,每添加一个控件,水平方向上的长度都会改变,因而无法指定该方向上的对 ...
- js实现数组内数据的上移和下移
var swapItems = function(arr, index1, index2){ arr[index1] = arr.splice(index2,1,arr[index1])[0] ret ...
- SQLite入门(二)读写二进制数据
//读二进制数据的函数 BOOL OpenBinDataFile(BYTE **pBUf,UINT &len) { if (pBUf == NULL) { re ...
- python 二叉树计算器
例子:计算1+2+3+4的值 代码: class Buffer(object): """字符串处理函数""" def __init__(se ...
- windows生成硬链接
因工作电脑需要同时使用pl/sql和toad工具需要同时配置32位和64位oracle client如此增加了维护tnsnames.ora的复杂程度使用windows硬链接可以减少工作量,每次只修改源 ...
- Fcoin和Coinex,谁更值得投资?
2018年是数字货币市场很熊的一年,大部分币种在这一年下跌超过了90%.但是这一年对于数字货币的发展也是不平凡的,可以说是至关重要的一年.通证经济商业模型在这一年萌芽,并茁壮成长,2018是通证经济元 ...
- linux-记录
查看运行的进程 ps -aux|grep java 找到要删除的进程的编号 杀死进程 kill -9 1883(进程编号) 重启服务 sh satrtBussinessService.sh
- vs2017 git到oschina 方法
vs2017中git基本使用方法: 1.开发环境vs2017,git服务器使用git.oschina.net 2.打开vs2017 创建项目 如果已有项目则: 3.完成后在文件前面会有小锁的图标,说明 ...
- slf4j-log4j12-1.5.8.jar有什么用
slf4j是hibernate的日志接口,通常我们用log4j.jar来实现hibernate的记录日志功能,slf4j-log4j.jar可以看成是用来把slf4j的接口转换成适合log4j的接口的 ...
- mvc:view-controller 标签
一.SpringMVC 会把ModelAndView 的model中的数据放到request 域中 二.如果不想让请求经过任何handler,而直接响应页面,可以使用 mvc:view-control ...