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 ...
随机推荐
- mysql数据库详解
001 数据库应用系统设计 1.规划 2.需求分析 3.概念模型设计 4.逻辑设计 5.物理设计 6.程序编制及调试 7.运行及维护. 002 创建数据库 CREATE DAT ...
- react相关知识点链接整理
1.React组件之间的通信 2.中间件做代理解决跨域问题 3.不要再问我跨域的问题了 4.React 组件数据流 && 组件间沟通 5.如何理解虚拟DOM 6.react性能调谐与d ...
- 项目经验:GIS<MapWinGIS>建模第七天
终天完成了管网地图的附加功能..实现了了管网与地图结合
- Codeforces Round #415 (Div. 2) B. Summer sell-off
B. Summer sell-off time limit per test 1 second memory limit per test 256 megabytes Summer hol ...
- 01_编程规约——OOP规约
1.[强制]避免通过一个类的对象引用访问此类的静态变量或静态方法,避免增加编译器解析成本,直接用“类名.变量名”访问即可. 2.[强制]所有的覆盖方法,必须加@Override注解 说明:加@Over ...
- 【Machine Learning】监督学习、非监督学习及强化学习对比
Supervised Learning Unsupervised Learning Reinforced Learning Goal: How to apply these methods How t ...
- SVNKit学习——基于Repository的操作之print repository tree、file content、repository history(四)
此篇文章同样是参考SVNKit在wiki的官方文档做的demo,每个类都可以单独运行.具体的细节都写到注释里了~ 开发背景: SVNKit版本:1.7.14 附上官网下载链接:https://www. ...
- Java程序中解决数据库超时与死锁
Java程序中解决数据库超时与死锁 2011-06-07 11:09 佚名 帮考网 字号:T | T Java程序中解决数据库超时与死锁,每个使用关系型数据库的程序都可能遇到数据死锁或不可用的情况 ...
- 安装Access Database Engine后,提示未注册Microsoft.ACE.OLEDB.12.0
未注册Microsoft.ACE.OLEDB.12.0 ,下载安装 Microsoft Access Database Engine:https://www.microsoft.com/en-us/d ...
- MyEclipse中关于JRE System Library、Web App Libraries的疑惑
简要说明一下:其实,这三个都是jar包的存放集合. 1.JRE System Library主要存放J2SE的标准jar,一般不需要调整. 2.Referenced Libraries是存放第三方的j ...