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

--- --- --- --- --- ----
查看文件 |
--- --- --- --- --- ----

时间: 2024-10-28 21:29:46

haml scss转换编写html css的前期工作的相关文章

SCSS(SASS、CSS)学习

看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展,增加了规则嵌套.变量.混合.选择器继承等等.通过使用命令行的工具或WEB框架插件把它转换成标准的.格式良好的CSS代码. SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS. SASS与SCSS的区别如下: Sass 有两种语法规则(syntaxes),目前新的语法规则(从

Zen Coding: 一种快速编写HTML/CSS代码的方法[Emmet]

译自:[Smashing Magazine](http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/)中文:[Zen Coding: 一种快速编写HTML/CSS代码的方法](http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html) 请尊重版权,转载请注明来源! - - - - - - 在本文中我们将展示

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

在css中为适配浏览器,新特性总加 -webkit,-o, -moz 来适配浏览器,写的烦心,看着也臃肿,让css可读性降低,下面以阴影为例,如何使用scss让我们的css看起来更简洁. 本人使用的IDE为intellij_idea,关于scss怎么用,出门左转 以阴影为例:当你在test.scss中写: 1 @import "Function";//引入自定义Function函数 2 div{ 3 width: 200px; 4 height: 200px; 5 margin: 40

20140526-一个从pdf转换成图片的类,工作当中有用到

20140526-一个从pdf转换成图片的类,工作当中有用到 package com.jako.database.model; import java.awt.Image; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import

Li的前期工作Level_Set_Evolution_Without_Re-initialization_A_New_Variational_Formulation

注意:由于页面显示原因,里头的公式没能做到完美显示,有需要的朋友请到我的资源中下载 无需进行重新初始化的水平集演化:一个新的变分公式 Chunming Li , Chenyang Xu , Changfeng Gui , and Martin D. Fox 1.Department of Electrical and 2.Department of Imaging 3.Department of Mathematics Computer Engineering      and Visualiz

如何编写轻量级 CSS 框架

Github 地址: https://github.com/nzbin/snack Demo 演示: https://nzbin.github.io/snack/ 前言 这篇文章我已经酝酿了半年之久,或者说拖沓了这么久吧.想说的东西很多,却又无从说起.如今轻量级框架如雨后春笋,层出不穷.我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架.在之前的文章中,我提到了面向对象的 CSS(比如 BEM.OOCSS.SMACSS,详见 http://vanseodesign.com

20个编写现代CSS代码的建议

明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习: .square { width: 80px; height: 80px; } .red { background-color: #F44336; margin-bottom: 40px; } .blue { background-color: #2

oracle10g安装前期工作准备脚本

每次安装oracle10g前期重复的工作让我十分讨厌,所以编写了一个前期准备工作的脚本,跑完此脚本后,直接就可以安装oracle介质了!! 注意: 此脚本是在redhat5.5下编写的,脚本中标红的地方,可根据自己的环境修改,依赖包是通过本地yum安装的! -------------脚本开始------------- #!/bin/sh cat <<EOF  >  /etc/sysconfig/network NETWORKING=yes NETWORKING_IPV6=no HOSTN

oracle11g安装前期工作准备脚本

每次安装oracle11g前期重复的工作让我十分讨厌,所以编写了一个前期准备工作的脚本,跑完此脚本后,直接就可以安装oracle介质了!! 注意: 此脚本是在redhat6.4下编写的,脚本中标红的地方,可根据自己的环境修改,依赖包是通过本地yum安装的! -------------脚本开始------------- #!/bin/sh cat <<EOF  >  /etc/sysconfig/network NETWORKING=yes HOSTNAME=DB88 EOF hostna