haml scss转换编写html css的前期工作
http://www.w3cplus.com/sassguide/install.html
先下载ruby
$ gem sources
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -1
$ gem install haml
$ gem install scss
$ gem install sass
$ gem install rails
$ gem install compass
$ compass -v
$gem install hpricot ---html转换haml
$ html2haml index.html index.haml
--- --- --- --- --- ----
添加目录 |
--- --- --- --- --- ----
mkdir css 添加
rmdir css 删掉
--- --- --- --- --- ----
添加目录 |
--- --- --- --- --- ----
--- --- --- --- --- ----
scss转换 |
--- --- --- --- --- ----
$ cd\
$ cd scss
//scss目录有一个scss
$ scss --watch style.scss:style.css
//scss目录的scss已经转换为css了
--- --- --- --- --- ----
scss转换 |
--- --- --- --- --- ----
--- --- --- --- --- ----
haml转换 |
--- --- --- --- --- ----
$ cd\
$ cd haml
//haml目录有一个scss
$ haml style.haml style.html
//haml目录的haml已经转换为haml了
--- --- --- --- --- ----
haml转换 |
--- --- --- --- --- ----
--- --- --- --- --- ----
html转换 |
--- --- --- --- --- ----
$ cd\
$ cd html
//html目录有一个index.html
$ html2haml index.html:index.haml
//html目录的index.html已经转换为haml了
--- --- --- --- --- ----
html转换 |
--- --- --- --- --- ----
--- --- --- --- --- ----
退出目录 |
--- --- --- --- --- ----
cd...
cd: css/
_
_
ctrl + c
--- --- --- --- --- ----
退出目录 |
--- --- --- --- --- ----
--- --- --- --- --- ----
查看文件 |
--- --- --- --- --- ----
$ cd\
$ cd web
$ type index.scss
$ scss --watch index.scss:index.css
--- --- --- --- --- ----
查看文件 |
--- --- --- --- --- ----
haml scss转换编写html css的前期工作的更多相关文章
- SCSS(SASS、CSS)学习
看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展,增加了规则嵌套.变量.混合.选择器继承等等.通过使用命 ...
- Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧
<!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...
- scss牛刀小试:解决css中适配浏览器前缀问题
在css中为适配浏览器,新特性总加 -webkit,-o, -moz 来适配浏览器,写的烦心,看着也臃肿,让css可读性降低,下面以阴影为例,如何使用scss让我们的css看起来更简洁. 本人使用的I ...
- 《基于Node.js实现简易聊天室系列之项目前期工作》
前期工作主要包括:项目的创建,web服务器的创建和数据库的连接. 项目创建 网上关于Node.js项目的创建的教程有很多,这里不必赘述.Demo所使用的Node.js的框架是express,版本为4. ...
- Zen Coding 快速编写HTML/CSS代码的实现
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...
- 如何编写轻量级 CSS 框架
Github 地址: https://github.com/nzbin/snack Demo 演示: https://nzbin.github.io/snack/ 前言 这篇文章我已经酝酿了半年之久, ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- 快速编写HTML,CSS代码的有力工具Emmet插件
Emmet 是一个编辑器插件,它以一种简写的语法规则可用于快速编写html或css文档内容,它支持多种编辑器. 从官网:http://emmet.io/ 可下载各个编辑器的插件.notepad++ 插 ...
- Sublime Text、webstorm等编译器快速编写HTML/CSS代码的技巧
Sublime Text.webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演 ...
随机推荐
- CodeForces 1098D. Eels
题目简述:对一个非空正整数(可重)集合$S$,从中选出两个元素$a, b (a \leq b)$,将他们从$S$中删除并将$a+b$加入$S$,重复这个操作直到$S$中只剩下一个元素为止,称为一次[竞 ...
- dom4j的解析实例
book.xml数据如下: <books> <book> <author>Thomas</author> <title>Java从入门到放弃 ...
- 7 二分搜索树的原理与Java源码实现
1 折半查找法 了解二叉查找树之前,先来看看折半查找法,也叫二分查找法 在一个有序的整数数组中(假如是从小到大排序的),如果查找某个元素,返回元素的索引. 如下: int[] arr = new in ...
- 洛谷 - P4450 - 双亲数 - 整除分块
https://www.luogu.org/fe/problem/P4450 应该不分块也可以. 求\(F(n,m,d)=\sum\limits_{i=1}^{n}\sum\limits_{j=1}^ ...
- PhpStorm插件之Translation
安装插件 File->Setting->Pluugins 搜索 Translation 如何使用 安装完插件后,RESTART IDE 快捷键 Ctrl+Shift+Y OR 选 ...
- js对象 数组Array详解 (参照MDN官网:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
一:数组的创建方式: 1.采用直接量创建 var arr = [];//创建一个空数组 var arr2 = [1,2,3];//创建一个有三个元素的数组 2.采用构造函数创建 a.var arr1 ...
- 笔记-JavaWeb学习之旅13
验证码案列 昨天晚上出现的500错误原因在于验证码没有获取到,获取验证码是应该获取的是共享域中的验证码,而我把获取值得键给写成了jsp中的键,而不是内存生成图片中,然后把图片上传到共享域中的键.这两个 ...
- Win7下Intellij开发Scala环境搭建
1.Scala下载并安装 1.Scala的安装时需要依赖JDK的,目前我的电脑上,jdk是已经安装好了,这里就不再说明 2.在地址http://www.scala-lang.org/download/ ...
- iOS开发 - 多线程实现方案之NSThread篇
NSThread API //类方法:创建一个线程 + (void)detachNewThreadWithBlock:(void (^)(void))block API_AVAILABLE(macos ...
- Python -3-列表和元组
1.用list就可以像修改列表那样修改字符串了 >>> list('Hello') ['H', 'e', 'l', 'l', 'o'] 可将任何序列作为list的参数 2.列表的 ...