Sass用法指南_20151109笔记
写在前面的话：随着CSS文件愈来愈大，内容愈来愈复杂，对其进行很好的维护将变的很困难。这时CSS预处理器就可以帮上大忙了，它们每每拥有变量、嵌套、继承等许多CSS不具有的特性。有不少CSS预处理器，这里总结Sass的使用方法。css
======正文开始======前端
咱们能够经过一种相似css的编程语言编写代码，保存为.scss后缀名的文件，而后使用Sass进行处理为css文件，而这种.scss文件中能够有变量、嵌套等功能，有些编程的味道,Sass简单介绍看这里：Sass；同时.scss文件也可以经过Sass处理为压缩的、缩进的等不一样风格的css代码，方便后期的部署。下面是个人一些学习总结。编程
1、环境布置bootstrap
1.安装rubby：windows
Sass是用ruby写的，须要ruby的运行环境，从如下连接下载rubyinstaller进行安装（windows）：http://rubyinstaller.org/sass
2.安装Sassruby
安装完成ruby后，接下来安装Sass。因为国内ruby源如今被墙，经过下面方式进行安装SASS，打开cmd命令行。app
（1）移除原有的ruby源地址less
gem sources --remove https://rubygems.org/编程语言
（2）新增可用的ruby源地址
gem sources -a https://ruby.taobao.org
（3） 安装Sass
gem install sass
（4）sublime支持scss文件高亮显示
借助package control安装sass插件，以后set syntax为sass便可。
（5）防止Sass中文注释乱码
后续写.scss代码过程当中中文注释会有乱码的状况，找到engine.rb文件（通常位于Ruby22\lib\ruby\gems\2.2.0\gems\sass-3.4.18\lib\sass目录下面），在全部的require后面新增以下代码：
Encoding.default_external = Encoding.find('utf-8')
至此，Sass环境部署完成。
2、编译.scss文件为css文件
总结具体Sass语法格式以前，先说一下如何编译.scss文件为css文件。
1.切换到.scss文件所在目录
命令行下切换到代码文件夹目录（如Z:\），假设有文件test.scss文件，里面内容以下：（SASS彻底支持css语法）
h1{
font-size:17px;
}
h2{
font-size:18px;
}
2.编译scss文件为css文件
运行命令：sass --style compressed test.scss test.css，便可生成压缩版的css文件，而且命名为test.css。几点说明：
（1）--style 后面能够有四个参数可选，分别为expanded、nested、compact、compressed，分别选用不一样参数的效果能够本身尝试体验。
（2）test.scss和test.css文件目录能够自定义，例如把Z盘sass目录下的test.scss文件编译为压缩版的文件，并放置在Z盘css目录下，那么命令即：sass --style compressed z:\sass\test.scss z:\css\test.css
（3）开发过程当中，只须要修改scss文件，而后编译；前端页面只须要引用相应的css文件便可。
3.侦听文件和文件夹
若是但愿某一个scss文件或者相应的文件夹下面文件修改后，自动进行编译，那么可使用侦听命令。
（1）侦听文件：
sass --watch --style compressed test.scss:test.css
当test.scss文件有修改后，会自动编译为test.css，而且是compressed的。
（2）侦听文件夹：
sass --watch --style compressed sass:css
当sass文件夹下.scss文件有修改的时候，会自动编译为与sass中文件同名的css文件。
备注：
（1）注意源文件和目标文件之间是冒号，与编译命令中为空格不一样。
（2）生成的map文件能够查找source map文件的做用。
3、Sass基本用法
下面对Sass基本的用法进行总结，SASS语法与CSS具备极高的类似度。
如下演示源代码放在test.scss文件中，编译后生成的css文件放在test.css文件中，侦听命令为：
sass --watch --style expanded sass/test.scss:css/test.css
1.变量：以$开头。
源代码：
|
1
2
3
4
|
$color
1:
#aeaeae
;
.div
1
{
background-color
:$color
1
;
}
|
编译后：
|
1
2
3
4
5
|
.div
1
{
background-color
:
#aeaeae
;
}
/*# sourceMappingURL=test.css.map */
|
2.变量嵌套在字符串之中：应该以#{}包裹。
源代码：
|
1
2
3
4
|
$
left
:
left
;
.div
1
{
border-#{$
left
}-
width
:
5px
;
}
|
编译后：
|
1
2
3
4
5
|
.div
1
{
border-left-width
:
5px
;
}
/*# sourceMappingURL=test.css.map */
|
3.容许进行计算：
源代码：
|
1
2
3
4
|
$
left
:
20px
;
.div
1
{
margin-left
:$
left
+
12px
;
}
|
编译后：
|
1
2
3
4
5
|
.div
1
{
margin-left
:
32px
;
}
/*# sourceMappingURL=test.css.map */
|
4.容许选择器嵌套：
源代码：
|
1
2
3
4
5
6
7
8
|
.div
1
{
.span
1
{
height
:
12px
;
}
.div
2
{
width
:
16px
;
}
}
|
编译后：
|
1
2
3
4
5
6
7
8
|
.div
1
.span
1
{
height
:
12px
;
}
.div
1
.div
2
{
width
:
16px
;
}
/*# sourceMappingURL=test.css.map */
|
5.使用&引用父元素
源代码：
|
1
2
3
4
5
|
.div
1
{
&:hover{
cursor
: hand;
}
}
|
编译后：
|
1
2
3
4
5
|
.div
1:
hover {
cursor
: hand;
}
/*# sourceMappingURL=test.css.map */
|
6.注释：
有三种形式：
（1）//comment：该注释只是在.scss源文件中有，编译后的css文件中没有。
（2）/*! */：重要注释，任何style的css文件中都会有，通常放置css文件版权说明等信息。
（3）/* */：该注释在compressed的style的css中没有，其余style的css文件都会含有。
备注：平时（1）（2）使用的多些
7.容许继承：@extend 类名
源代码：
|
1
2
3
4
5
6
7
|
.class
1
{
font-size
:
19px
;
}
.class
2
{
@extend .class
1
;
color
:
black
;
}
|
编译后：
|
1
2
3
4
5
6
7
8
9
|
.class
1
, .class
2
{
font-size
:
19px
;
}
.class
2
{
color
:
black
;
}
/*# sourceMappingURL=test.css.map */
|
注意：若是在class2后面有设置了class1的属性，那么也会影响class2，以下：
源代码：
|
1
2
3
4
5
6
7
8
9
10
|
.class
1
{
font-size
:
19px
;
}
.class
2
{
@extend .class
1
;
color
:
black
;
}
.class
1
{
font-weight
:
bold
;
}
|
编译后：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.class
1
, .class
2
{
font-size
:
19px
;
}
.class
2
{
color
:
black
;
}
.class
1
, .class
2
{
font-weight
:
bold
;
}
/*# sourceMappingURL=test.css.map */
|
可见sass不是单遍编译。
8.引用外部css文件（Partials）
有时网页的不一样部分会分红多个文件来写样式，或者引用通用的一些样式，那么可使用@import。
源代码：
|
1
2
3
|
@import
"_test1.scss"
;
@import
"_test2.scss"
;
@import
"_test3.scss"
;
|
编译后：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
h
1
{
font-size
:
17px
;
}
h
2
{
font-size
:
17px
;
}
h
3
{
font-size
:
17px
;
}
/*# sourceMappingURL=test.css.map */
|
其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。通常状况下，复用的文件名若是如下划线_开头的话，Sass会认为该文件是一个partial file，不会将其编译为css文件，主要功能是要经过import引用。
9.mixin和include：
mixin相似于C语音的宏，存储通用模块，经过@include引用。
源代码：
|
1
2
3
4
5
6
7
8
|
@mixin common{
display
:
block
;
margin
:
0
auto
;
}
.class
1
{
font-size
:
16px
;
@include common;
}
|
编译后：
|
1
2
3
4
5
6
7
|
.class
1
{
font-size
:
16px
;
display
:
block
;
margin
:
0
auto
;
}
/*# sourceMappingURL=test.css.map */
|
还能够更灵活，像函数同样，以下：
源代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@mixin common($value
1
,$value
2
,$defaultValue:
12px
){
display
:
block
;
margin-left
:$value
1
;
margin-right
:$value
2
;
padding
:$defaultValue;
}
.class
1
{
font-size
:
16px
;
@include common(
12px
,
13px
,
15px
);
}
.class
2
{
font-size
:
16px
;
@include common(
12px
,
13px
);
}
|
编译后：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.class
1
{
font-size
:
16px
;
display
:
block
;
margin-left
:
12px
;
margin-right
:
13px
;
padding
:
15px
;
}
.class
2
{
font-size
:
16px
;
display
:
block
;
margin-left
:
12px
;
margin-right
:
13px
;
padding
:
12px
;
}
/*# sourceMappingURL=test.css.map */
|
最后，bootstrap第四版发布了下载，而且从less转移到了sass，能够下载里面看看它里面的scss代码，体会一下，也许你会发现更多有趣的用法。
- 1. SASS用法指南
- 2. Sass 用法指南
- 3. [转]SASS用法指南
- 4. SASS用法指南-转
- 5. SASS用法指南(转)
- 6. sass使用指南
- 7. sass 使用指南
- 8. SASS入门教程及用法指南
- 9. sass入门指南
- 10. Sass入门指南
- 更多相关文章...
- • SQL 指南 - 网站建设指南
- • HTML 指南 - 网站建设指南
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 算法总结-双指针
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. SASS用法指南
- 2. Sass 用法指南
- 3. [转]SASS用法指南
- 4. SASS用法指南-转
- 5. SASS用法指南(转)
- 6. sass使用指南
- 7. sass 使用指南
- 8. SASS入门教程及用法指南
- 9. sass入门指南
- 10. Sass入门指南