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的前期工作的更多相关文章

  1. SCSS(SASS、CSS)学习

    看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展,增加了规则嵌套.变量.混合.选择器继承等等.通过使用命 ...

  2. Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧

    <!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...

  3. scss牛刀小试:解决css中适配浏览器前缀问题

    在css中为适配浏览器,新特性总加 -webkit,-o, -moz 来适配浏览器,写的烦心,看着也臃肿,让css可读性降低,下面以阴影为例,如何使用scss让我们的css看起来更简洁. 本人使用的I ...

  4. 《基于Node.js实现简易聊天室系列之项目前期工作》

    前期工作主要包括:项目的创建,web服务器的创建和数据库的连接. 项目创建 网上关于Node.js项目的创建的教程有很多,这里不必赘述.Demo所使用的Node.js的框架是express,版本为4. ...

  5. Zen Coding 快速编写HTML/CSS代码的实现

    在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...

  6. 如何编写轻量级 CSS 框架

    Github 地址: https://github.com/nzbin/snack Demo 演示: https://nzbin.github.io/snack/ 前言 这篇文章我已经酝酿了半年之久, ...

  7. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  8. 快速编写HTML,CSS代码的有力工具Emmet插件

    Emmet 是一个编辑器插件,它以一种简写的语法规则可用于快速编写html或css文档内容,它支持多种编辑器. 从官网:http://emmet.io/ 可下载各个编辑器的插件.notepad++ 插 ...

  9. Sublime Text、webstorm等编译器快速编写HTML/CSS代码的技巧

    Sublime Text.webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演 ...

随机推荐

  1. mysql 快捷键

    1.ctrl+q           打开查询窗口2.ctrl+/            注释sql语句3.ctrl+shift +/  解除注释4.ctrl+r           运行查询窗口的s ...

  2. Ubuntu18.04安装和配置Java JDK11并卸载自带OpenJDK

    卸载自带的OpenJDK方法: 在终端执行命令:sudo apt-get remove openjdk* Ubuntu18.04安装JDK11.0.2 前面步骤一样,可参考:https://www.c ...

  3. C#简单的国际化

    1.新建一个资源文件夹,并在资源文件夹新建中英问的资源文件,如图: 2.中英文资源文档添加资源,如图: 3.Program.cs中添加根据系统语言确定中英文,这里默认为英文: using Intern ...

  4. 程序兵法:Java String 源码的排序算法(一)

    摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 这是泥瓦匠的第103篇原创 <程序兵法:Java Str ...

  5. IOS Carthage安装、使用

    一.Carthage的安装和使用1.安装homebrew后输入如下命令 $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercont ...

  6. HDU5908【模拟】

    思路: 找到约数k,然后算一下1-k区间里的数的个数. 中间交换一下就好了,然后把后面每个区间里的数减减,然后再判断一下满足不满足= = #include <bits/stdc++.h> ...

  7. Pycharm 配置autopep8到菜单

    Pycharm 可以自动检测PEP8规范. 我们可以安装autopep8来自动修改文件实现PEP8规范. 1.通过Pycharm安装autopep8 2.File->Setting->Ex ...

  8. 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:5. 设置设备属性

    文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...

  9. LVS 负载均衡器总结

    下面部分原理部分,是从网上摘录,源网址已经无从获取,我将其中一小部分模糊的说明加入了一些自己的理解,仅最大可能让全文容易阅读,也方便自己以后参考,若你是大牛希望能给我一些宝贵的建议,将理解有误的地方加 ...

  10. StringUitl工具类中的一种写法

    typeHandlersPackageArray = StringUtils.tokenizeToStringArray(this.typeAliasesPackage, ",; \t\n& ...