新建一个文件夹
1 cd 进入文件夹 ,cd E:\360data\重要数据\桌面\sass,
2 compass creat hello:当前目录创建sass工程,
3 sass文件夹放置sass文件,stylesheets生成的css文件,
4 compass create --bare --sass-dir "sass" --css-dir "css" --images-dir "img" --javascripts-dir "js" 指定创建的目录
5 E:\360data\重要数据\桌面\sass\hello\sass ,创建demo1.scss文件写样式,编译sass demo1.scss demo1.css编译成css文件,
6 sass -watch demo1.scss:demo1.css当scss文件变化的时候css文件自动变化
7 compass compile 编译文件 compass watch 监视文件的变化
8 config.rb:config.rubby文件,定义了一些路径。 require 'compass/import-once/activate'
# Require any additional compass plugins here. # Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line):输出风格
# output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment: 是否使用绝对路径
# relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment:是否使用注释
# line_comments = false
9 中文注释
Encoding.default_external = Encoding.find('utf-8') engine.rb文件路径:
C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.15\lib\sass

demo1.scss

body{
background: lightgray;
font-size: 14px;
margin:0px;
margin-left:0px;
// this is the header style.
header{
font-weight: bold;
} footer{/*! This is the footer style.重要注释,压缩模式也会编译到css文件*/
text-align: center;
}
}

demo1.css

@charset "UTF-8";
body {
background: lightgray;
font-size: 14px; }
body header {
font-weight: bold; }
body footer {
/*! This is the footer style.重要注释,压缩模式也会编译到css文件*/
text-align: center; } /*# sourceMappingURL=demo1.css.map */

sass02的更多相关文章

随机推荐

  1. UVA-12186 Another Crisis 树形dp

    题目链接:https://cn.vjudge.net/problem/UVA-12186 题意 给出n, T和一棵树,树上每个节点需要选择T%个直属子节点. 问根节点一共需要选择几个节点. 思路 思路 ...

  2. Vue style里面使用@import引入外部css, 作用域是全局的解决方案

    问题描述 使用@import引入外部css,作用域却是全局的 <template> </template> <script> export default { na ...

  3. 紫书 例题8-10 UVa 714 (二分答案)

    这道题让最大值最小, 显然是二分答案 当题目求的是最大值最小, 最小值最大, 这个时候就要想到二分答案 为什么可以二分答案呢, 因为这个时候解是单调性的, 如果简单粗暴一点 就全部枚举一遍, 验证答案 ...

  4. 紫书 例题 11-6 UVa 658 (状态压缩+隐式图搜索+最短路)

    这道题用到了很多知识点, 是一道好题目.      第一用了状态压缩, 因为这里最多只有20位, 所以可以用二进制来储存状态 (要对数据范围敏感), 然后 涉及到了一些位运算.     第二这里是隐式 ...

  5. Spring学习总结(14)——Spring10种常见异常解决方法

    在程序员生涯当中,提到最多的应该就是SSH三大框架了.作为第一大框架的Spring框架,我们经常使用. 然而在使用过程中,遇到过很多的常见异常,我在这里总结一下,大家共勉. 一.找不到配置文件的异常 ...

  6. Docker和虚拟机的区别

    这是docker官网的图,可以看到虚拟化技术通过Hypervisor(虚拟机管理系统)为每个app启动一个Guest OS(客户机操作系统),也就是为每个app启动一个虚拟机.比较直观地说,vm通过H ...

  7. mysql中文乱码解决方式

    近期项目使用到mysql.却突然出现了中文乱码问题.尝试了多种方案,最终解决乱码问题,总结一下解决方式,给遇到同样问题的人一点參考. 中文乱码的原因 1.安装mysqlserver的时候编码集设定有问 ...

  8. android仿最新版本号微信相冊--附源代码

    更改排版为 markdown: http://blog.csdn.net/self_study/article/details/69397859

  9. PHP第九课 正則表達式在PHP中的使用

    今天内容 1.正則表達式 2.数学函数 3.日期函数 4.错误处理 正則表達式: 1.模式修正符 2.五个经常使用函数 另外一个正則表達式的站点:http://www.jb51.net/tools/z ...

  10. storm trident function函数

    package cn.crxy.trident; import java.util.List; import backtype.storm.Config; import backtype.storm. ...