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 ...
随机推荐
- java.io.FileNotFoundException
1. 概述 上传图片到 o:/mmfiles_2017/39973/25444/333.jpg目录下 目录不存在会报标题中的错误 必须先创建目录 2. 方法 File filePath = new F ...
- UNIX/Linux系统管理技术手册(3)----bash 数组和算术运算
复杂的数据结构和计算不是 bash 的特长.但它的确至少提供了数组和算术运算. 1.算术运算 所有的 bash 变量的值都是字符串,所以 bash 在赋值的时候并不区分数字 1 和 字符串 " ...
- 利用NVM在系统中维护多个版本的nodejs
0. 背景 开发时可能同时进行多个项目,而这些项目所依赖的node版本又不是一样的.比如我现在的angular项目采用的node是8.9.3版本,而vue项目的vue-cli则依赖更高.由于ang ...
- 微信小程序——初始化一个小程序项目
最近准备学习一下微信小程序,因为之前有react native项目经验,学习起来应该困难不大 微信小程序官网地址:https://mp.weixin.qq.com/debug/wxadoc/dev/i ...
- 第四次工业革命:人工智能(AI)入门
转载自 http://www.infoq.com/cn/articles/the-fourth-industrial-revolution-an-introduction-to-ai "过去 ...
- Linux下分布式项目部署环境搭建与使用(druid-1.0.25.jar)数据库连接加密
一.JDK安装 1.执行命令:cd Downloads/ 2.上 传:jdk-8u111-linux-x64.tar.gz 到Downloads 3.执行命令:tar -zxvf jdk-8u111- ...
- 面对IBM与亚马逊的犄角攻势,微软云如何招架?
亚马逊AWS和微软Azure是全球公有云的焦点.不就前公布的财报不久前公布的财报,这两家公司云计算的收入越来越接近,从数据显示来看,亚马逊的利润比微软稍高,有人称微软云的高增长来自于捆绑销售,背后真正 ...
- Razor模板引擎 (RazorEngine)
Razor模板引擎不仅在ASP.NET MVC中内置了Razor模板引擎,还有一个开源的RazorEngine, 这样以来我们可以在非ASP.NET MVC项目中使用Razor引擎,甚至在控制台,Wi ...
- shell 脚本中后台执行命令 &
最近遇到一个问题, 执行脚本,脚本调用 一个命令,命令(deamon)是一个守护进程,为了调试,取消了守护进程模式.导致命令后边的其他命令(echo "456")都无法执行. de ...
- 如何深入理解一套MQ消息中间件
怎样算是理解了一套MQ中间件呢?原来一知半解的我列了几个维度:demo跑起来,理解其投递次数的语义,理解其事务的特性等等.这是一种角度,但总有种看山不是山的一知半解的感觉.再问一层,比如为什么Kafk ...