/*基础语法*/
h1{
color: red;
}

/*变量定义*/

$color: red;

/*嵌套*/
body{
header{

}
footer{

}
}

/*mixin函数*/
@mixin alert($color: blue){
color: $color;
}

/*继承*/
.blcok{
width: 100px;
height: 100px;
color: #f00;
}
p{
.block;
}

/*1)创建工程:1、使用sass创建;2、使用compass创建【compass create hello(工程名)】
创建成功后会有两个文件夹:
1、.sass-cache
2、hello(包含三个文件夹(.sass-cache、sass、stylesheets)和config.rb文件)

*/
/*2)使用命令行编译sass(将sass文件(如demo.scss)编译成为css文件)

1、在要编译的sass文件的目录下的地址栏输入“cmd”即可进入该sass文件所在目录
2、格式:sass demo.scss demo.css 回车即可
3、输出风格:nested(后大括号在最后一个样式的末尾)、
expanded(后大括号另起一行,跟平常一样)、
compact(一个选择器的样式占据一行)、
compressed(压缩过后的格式,去掉注释等)
4、watch监视,只要有改动就会自动编译到css文件
格式:sass --watch demo.scss:demo.css (监听一个文件)
格式:sass --watch sass:stylesheets (监听整个文件夹)
*/

/*3)compass编译:需要在sass工程(hello)的目录下输入cmd进入命令后台;
1、格式:compass compile (此命令只编译有改动的sass文件,监听后才看得出来效果)
2、若要强制编译所有的sass文件则使用命令:compass compile --force
3、格式:compass watch(监听)
4、输出风格:nested(后大括号在最后一个样式的末尾)、
expanded(后大括号另起一行,跟平常一样)、
compact(一个选择器的样式占据一行)、
compressed(压缩过后的格式,去掉注释等)
*/

/*4)输出风格格式:
comprass compile --force -s compressed
-s:outputstyle-tyle的缩写
*/

/*注意:运行编译命令后看到有write........时表示命令书写成功*/

/*5)理解config.rb文件
1、该文件定义了各种文件的路径:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

2、可设置输出风格:
output_style = :expanded # or :nested or :compact or :compressed
其中expanded为常用风格

自定义控制输出风格的常用方式:
environment = :development
output_style =(environment==:development) ? :expanded : :compressed
*/

/*6)sass的注释
1、单行注释 //:不会生成到css文件中
2、多行注释(标准的css多行注释):会被编译到css文件中
3、当我们使用的是多行注释,又将其输出格式为压缩后的css文件
就会去掉注释,要让其输出为压缩格式依然含有注释的话需要在注释内部最前面加上叹号。
步骤:
environment = :production(将环境的初始值改为production则输出格式将为压缩式,在算式“output_style =(environment==:development) ? :expanded : :compressed”中取了冒号后面的值)
命令行输入:compass watch --environment production 回车
compass watch

4、中文注释
在安装目录下D:\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.25\lib\sass 找到
engine.rb文件,打开文件后在require之后加上代码:
Encoding.default_external = Encoding.find('utf-8')即可。
注意:sass -v命令查出的sass版本号不一定就是要找的文件夹,也有可能是其他的,
我的sass -v查出的版本号是3.7.3,在安装目录下就有该文件夹,改了里面的engine.rb文件
后中文依然没有编译通过;最终改了sass-3.4.25文件夹下的文件编译才通过。
*/

sass基础—具体编译步骤及对应命令:详细的更多相关文章

  1. Sass 基础教程

    0. Sass 文件后缀名 sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号:另一种就是我们这里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分 ...

  2. sass基础编写流程

    这是之前整理在word上的基础流程 sass是Ruby语言开发的一个用于动态编程css文件的框架 所以sass的运行依赖Ruby环境 所以要先安装Ruby 参见详细教程(安装参照慕课网有详细的教程) ...

  3. [转]前端利器:SASS基础与Compass入门

    [转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...

  4. Nodejs+Grunt配置SASS项目自动编译

    Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...

  5. sass基础学习(一)

    移动端布局各种问题 pc端布局各种问题sass 组件模块化面向对象编程ajax 框架学习 webpack 打包 性能优化 gulp是基于Nodejs的自动任务运行器她能自动化地完成 javascrip ...

  6. Linux-编译器gcc/g++编译步骤

    gcc和g++现在是gnu中最主要和最流行的c&c++编译器.g++是c++的命令,以.cpp为主:对于c语言后缀名一般为.c,这时候命令换做gcc即可.编译器是根据gcc还是g++来确定是按 ...

  7. sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

    这一篇主要详述保持sass条理性和可读性的3个最基本方法--嵌套.导入和注释. 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后 ...

  8. sass基础学习

    2015.6.281.安装ruby2.运行gem安装sass-->gem install sass3.编译命令行sass --watch 文件路径/test.scss:编译后文件路径/test. ...

  9. zlib库VS2015编译步骤

    [点击这里下载zlib1.2.8源码](http://zlib.net/zlib128.zip) [点击这里下载zlib1.2.8编译动态库](http://zlib.net/zlib128-dll. ...

随机推荐

  1. 全国人口 信息(NCIIC)接口开发纪要

    阶段一:根据wsdl2java命令解析https://ws.nciic.org.cn/nciic_ws/services/NciicServices?wsdl以生成接口调用的对象类: wsdl2jav ...

  2. openstack Q版部署-----虚拟机密码修改问题

    一.修改镜像密码 1.打开一个要修改的镜像 随便找一台centos服务器 [root@linux-node1 ~]#wget http://cloud.centos.org/centos/7/imag ...

  3. 利用jTessBoxEditor工具进行Tesseract-OCR样本训练

    jTessBoxEditor依赖java虚拟机 , 所以要先安装 java. jTessBoxEditor下载地址: https://sourceforge.net/projects/vietocr/ ...

  4. Linux动态库的编译与使用 转载【转】

    转自:http://www.cnblogs.com/leaven/archive/2010/06/11/1756294.html http://hi.baidu.com/linuxlife/blog/ ...

  5. 10分钟搭建Kubernetes容器集群平台【转】

    官方提供3种方式部署Kubernetes minikube Minikube是一个工具,可以在本地快速运行一个单点的Kubernetes,尝试Kubernetes或日常开发的用户使用.不能用于生产环境 ...

  6. 待解决new int(i*j)

    这里的确应该用new int [i*j] 来申请一片空间,但new int(i)的含义就像是给p指针指向的内容赋值了,相当于只申请了一个4个字节. 问题是,为什么后面b不能输出结果呢? #includ ...

  7. CORS(Cross-origin resource sharing) “跨域资源共享”

    CORS与JSONP的比较 在出现CORS标准之前, 我们还只能通过jsonp的形式去向“跨源”服务器去发送 XMLHttpRequest 请求,这种方式吃力不讨好,在请求方与接收方都需要做处理,而且 ...

  8. Power Network POJ - 1459 [网络流模板]

    http://poj.org/problem?id=1459 嗯,网络流模板...多源点多汇点的图,超级汇点连发电厂,用户连接超级汇点 Status Accepted Time 391ms Memor ...

  9. CSRFGuard工具介绍

    理解CSRFGuard的基础:http://www.runoob.com/jsp/jsp-tutorial.html 1:您需要做的第一件事是将OWASP.CSRFARGAD.JAR库复制到类路径中. ...

  10. 缓存系列之四:redis持久化与redis主从复制

    一:redis 虽然是一个内存级别的缓存程序,即redis 是使用内存进行数据的缓存的,但是其可以将内存的数据按照一定的策略保存到硬盘上,从而实现数据持久保存的目的,redis支持两种不同方式的数据持 ...