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代码编写的速度,比如下面的演 ...
随机推荐
- caller和callee的解析与使用-型参与实参的访问
caller:是一个函数引用(当前执行函数”被调用的地方”{即这个”被调用的地方”函数引用},如果这个”被调用的地方”是window,则返回[null]),是函数名的属性: var a = funct ...
- [Xcode 实际操作]一、博主领进门-(1)iOS项目的创建和项目模板的介绍
目录:[Swift]Xcode实际操作 本文将演示iOS项目的创建和项目模板的介绍. [Create a new Xcode project]创建一个新的项目. 在弹出的模板窗口中,显示了所有的项目模 ...
- 第二章 "我要点爆"微信小程序点爆页面的实现与云函数和云存储的应用
点爆页面的实现与云函数和云存储的应用以及录音功能讲解 点爆页面制作 点爆页面主要提供文字记录和语音记录两种爆文记录方式,在本页面内输入文字或录入语音后选择心情点击点爆按钮,跳转到点爆方式选择界面. 首 ...
- c语言里面你不知道的break与switch,contiune的用法
前言:最近上完课在宿舍闲来无事,就拿起了C Primer Plus 这本书看,是自己入门编程的第一门语言:看了一些基本语法知识点,最让我需要总一下的是就是标题所说的这个语法知识点,记得大一的时候去考计 ...
- Execution failed for task ':app:installDebug'.
解决方案:重新起服务(react-native start),重新起项目(react-native run-android)
- java操作mongodb数据库实现新建数据库,新建集合,新建文档
*首先明确一点,要通过java代码创建mongodb数据库实例,需要同时创建集合和文档. 代码实现: /* 建立与mongodb数据库的连接,可指定参数,如:MongoClient client = ...
- Linux (三)
chmod :用来改变文件或目录的访问权限 语法格式:chmod [参数选项] [mode][文件或者目录] 参数选项: -v :显示权限变更的详细信息 -R :对当前目录下的所有文件以及子目录进行相 ...
- (洛谷 P1429 平面最近点对(加强版) || 洛谷 P1257 || Quoit Design HDU - 1007 ) && Raid POJ - 3714
这个讲的好: https://phoenixzhao.github.io/%E6%B1%82%E6%9C%80%E8%BF%91%E5%AF%B9%E7%9A%84%E4%B8%89%E7%A7%8D ...
- oracle把一个表的数据复制到另一个表中
http://blog.csdn.net/my_name_nb/article/details/64128015 ........................ 1. 新增一个表,通过另一个表的结构 ...
- gem install 提示rubygems.org连接不上的问题
周五的时候安装compass时遇到的,总是报错,后来反应过来是被墙了.解决办法就是使用淘宝的rubygem的镜像 gem sources --remove https://rubygems.org/ ...