文档章节

「续集」Sass简易指南:多风格编译和运行以及文件注释

G
 GeCoder
发布于 2018/04/24 17:30
字数 581
阅读 12
收藏 0

1.使用Compass创建工程

一般情况下可以在编辑器中直接创建Sass或者Scss文件。如果项目比较复杂那么我们可以使用Compass创建工程,命令如下:

compass create

这样创建出的项目会自带几个文件夹:

sass文件夹存放sass文件或scss文件,stylesheets存放css文件,config.rb是设置文件,后面会有介绍。

同时,可以带参数创建:

compass create --bare --sass-dir "sass" --css-dir "css" --images-dir "img" --javascripts-dir "js"

很明显其中的各个参数是分别设置 sass文件、css文件、图片文件和js文件的保存路径。

config.rb文件是设置文件,内容如下:

可以分别修改配置参数以便修改保存目录。

2.使用sass命令编译生成css文件

编译单个文件

sass <sass file> <css file> --style [nested|expanded|compact|compressed]

编译监视单个文件

sass --watch <sass file>:<css file>

编译监视文件夹

sass --watch <sass folder>:<css folder>

3.使用compass命令编译生成css文件

compass compile

此命令只会编译有变化的Sass文件,如果要强制编译所有的Sass文件,可以使用:

compass compile --force

监视文件夹:

compass watch

4.编译的四种风格

不管是sass方式编译还是compass方式编译,都可以设置所生成的css文件的代码风格。

操作方式是在命令行中添加 --style 参数 ,参数的取值可以是 nested、expanded、compact 和 compressed四种,分别如下:

nested

expanded

compact 单行

compressed 压缩

5. Sass文件中的注释

单行注释 //注释

多行注释 /*注释*/

重要注释 /*!xxx*/ 重要注释,压缩模式也会编译到css文件。

中文注释

注释中如果有中文,编译时会出错。需要设置sass的字符集为utf-8.

设置方式是修改engine.rb文件,在文件中添加如下内容

Encoding.default_external = Encoding.find('utf-8')

如有任何问题欢迎加群523916260一起交流学习,有经验丰富的技术大牛坐镇~

engine.rb文件路径:

C:Ruby22-x64lib ubygems .2.0gemssass-3.4.15libsass

© 著作权归作者所有

G
粉丝 12
博文 13
码字总数 16057
作品 0
长沙
私信 提问
SASS用法指南

学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有...

阮一峰
2012/06/19
0
0
SASS入门教程及用法指南

作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。面对这...

进步的蜗牛
2016/02/26
75
0
SASS 用法指南

学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有...

小编辑
2012/06/25
6.8K
13
Sass 书写指南

由于Sass的使用人数超出以往的任何时候,我们在怎样将其格式化的问题上需要多加思考。CSS样式指南(CSS style guides)是比较常见的,因此也许我们可以扩展他们,来覆盖Sass的各种选择。 这是...

曾沙
2013/06/07
3.4K
5
foundation的sass版本

sass是css预处理器的一种,我们也听说过less,less与sass的最大区别就是,less是基于JavaScript,所以,是在客户端处理的,Sass是基于Ruby的,所以是在服务器端处理的。 想要支持sass,那必然...

百变茄
2014/02/21
254
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
1K
13
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部