hamlscss转换编写htmlcss的前期工作

作者:网络    软件教程库   2020-05-22

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的前期工作

原文地址:http://www.cnblogs.com/hao5599/p/4481389.html

软件教程库 原文地址:https://www.itjcku.com/9999/1091576.html

阅读全部内容


Tags:转换编写前期工作

返回首页



推荐内容

解析this.initialize.apply(this,arguments)

摘自:http://www.cnblogs.com/uedt/archive/2010/06/24/1764561.ht ...

FU-A分包方式,以及从RTP包里面得到H.264数据和AAC数据的方法

fu-a分包方式,以及从rtp包里面得到h.264数据和aac数据的方法 rfc3984是h.264的baseline码 ...

java面试题之ssh

1、写出你熟悉的开源框架以及各自的作用(项目中为什么使用ssh) 答:框架:hibernate,spring,strut ...

JDBC连接数据库的过程

以连接mysql为例: (1)加载mysql数据库连接的驱动程序。到mysql官网下载该驱动程序jar包,然后把包复制到 ...

ORACLEno1存储过程插入更新表数据

create or replace procedure sp_cust_main_data_yx(instrdate i ...

win使用telnet到ubuntu下vim显示中文为乱码的解决方法~

1.几个路径: ubuntu: /etc/default/locale 相当于 centos:/etc/sysconfi ...

mediawiki的安装与配置

apache的配置: 1. 开启php module 查看mods-enabled/php5.load 是否存在,不存在 ...

C#随机数

c#中有个random类可以非常方便的产生一个随机数,但是在使用中你会发现这个类并不是特别好用,偶尔会一直提供同一 ...

shell-入门

dos2unix start.sh 在windows系统下编写的shell脚本 在liunx下进行一次转译,否则会爆出 ...

团队开发——软件需求分析报告(HelloWorld团队)

一.项目名称超级迷宫二.设计背景随着生活节奏加快,游戏更新速度的加快,游戏大同小异缺少新颖度,同时为了满足多游戏的结合, ...

MSSQl事务的使用

注册了博客这么久没还好好写过文章呢?昨天看了我同学的博客,写的很好,每次用到以前的知识我就会去看看她写的博客,现在 ...

NSDictionary转化为NSData

之前自己写了nsdictionary转化为nsdata的一种方法如下 nsmutabledata *data = ...

nginx关键字

反向代理: proxy_pass: 负载均衡: upstream 负载均衡,有四种方式:     a/ 轮询 ...

Java设计模式之简单工厂模式

设计模式之简单工厂举例: l简单工厂模式概述 又叫静态工厂方法模式,它定义一个具体的工厂类负责创建一些类的实例 l优点 ...

解题报告之POJ3686TheWindy's

解题报告 之 poj3686 the windy‘s description the windy‘s i ...

【ThinkingInJava】18、关于java中的闭包与回调

/** * 书本:《thinking in java》 * 功能:关于java中的闭包与回调,这里回调区别于c++,c+ ...

TreasureHunting (hdu3468二分匹配+bfs最短路径)

treasure hunting time limit: 4000/2000 ms (java/others)mem ...

【ThinkingInJava】19、控制框架的实现

/** * 书本:《thinking in java》 * 功能:控制框架的实现 * 文件:event.java * 时 ...

【ThinkingInJava】20、控制框架的使用(初始化系统使用)

/** * 书本:《thinking in java》 * 功能:控制框架的实现,1、控制框架的完整实现是由单个的类创建 ...

最小汉密尔顿回路问题状态压缩dp

给定n个顶点做成的图,要求从顶点0出发经过所有点一次然后回到0点的一条权#20540;之和最小的一条路的权#20540; ...

POJ1966.CableTVNetwork——无向图的点连通度

http://poj.org/problemid=1966 题目描述: 有线电视网络中,中继器的连接是双向的。如果网 ...

Oracle备忘录1

数据库管理员:安装升级oracle数据库建库,表空间,表,视图,索引。。。制定并实施备份和修复计划数据库权限管理,调优, ...

FileStream文件流

使用文件流拷贝一个较大的多媒体文件: public static void copyfile(string soucr ...

C语言BFS(5)___TT与魔法师(swustoj2464)

description tt生活在一个充满魔法的国度,为了便于管理,国王请魔法师在一些重要的城市之间造出 ...

进程类Process与多线程Thread

进程类(process)的基本操作: //通过进程类查询系统所有进程 process[] pr ...

Xml解析方式之Pull解析器的使用

xml有多种解析的方式,这篇文章只介绍用pull解析器来解析xml文件,接下来我会说明使用pull解析器来读取xml文件 ...

enum,EnumMap,EnumSet

enum基本使用 : package com.enumtest; enum shrubbery { gr ...

Hibernate乱码问题解决

乱码问题其实归根接地就是两端的字符集不统一。 解决思路也有两种: 1. 修改两端字符集统一。 2. 通过代码进行转 ...

eclipse集成struts2.3.20

需要强调的是,这里介绍的是在eclipse工具下集成struts2.3.20而不是myeclipse添加对struts2 ...

ubi文件系统制作,还是"-c"选项的问题

以下是分析记录: --------------------------------------------------- ...


本网站部分内容来自互联网,版权归原作者所有,文章内容仅代表原作者个人观点。如有侵权请联系我们删除 电子邮件 itjcku@foxmail.com