一、为什么使用sass?
1. sass引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等,可以使css代码更容易编写并且更容易维护。
2. sass作为一种预处理语言,为css提供缩进语法。
二、sass基本用法
2.1 变量
使用$来定义变量,变量可以在css
规则块定义之外存在。变量支持块级作用域,与javascript中变量区别。在sass中$link-color
和$link_color
其实指向的是同一个变量,一般使用中划线。
数据类型:数字,字符串,颜色,布尔型,空值,数组,map
2.1.1 字符串
分为有引号字符串和无引号字符串,使用#{}可以把有引号字符串转化为无引号字符串(作用:可以传入参数并转化为选择器)
有引号+无引号=有引号 ps: "sans"+serif="sans=serif"
无引号+有引号=无引号 ps: sans+"serif"=sans=serif
2.1.2
2.2 css嵌套规则
2.2.1 &
article a {
color: blue;
&:hover { color: red }
}
使用&加到当前元素本身(比如上栗就是对article a:hover进行设置,而不是article a的子元素们的悬浮效果)
#content aside {
color: red;
body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }
使用&还可以把选择器添加到父元素前面
2.2.2 群组选择器的嵌套
.container {
h1, h2, h3 {margin-bottom: .8em}
}
2.2.3 子选择器和同层选择器
> 直接子元素选择器
+ 选择紧跟着的同层元素
~ 全体同层选择器 选择所有符合条件的同层元素
2.2.4 属性的嵌套
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
2.3 @import导入sass
2.3.1 css原本的@import
<style>
@import "@import.css";
#bgc{background-color: green}
</style>
注意事项:@imort一定要早于css样式引入
存在主要问题:破坏css的并行下载,变成css文件的同步下载
2.3.2 sass中的@import
引入sass文件可以写在css规则内
.blue-theme {
@import
"blue-theme"}
引入sass文件一个思考:如果先定义一个变量,引入的sass文件中有相同的变量名,变量覆盖了怎么办?
!default声明被引入的sass文件中变量默认值,如果先定义了变量根据先的来。(是!important的对立面)
2.3.3 区分sass中的@import和css中的
在sass中会使用css原有import的情况
1、引入文件是css文件(加.css后缀或者地址为css文件的地址)
2、引入一个url地址(比如http://www.sass.hk/css/css.css)
如何避免:
把后缀改成.scss(简单粗暴)
疑问:如果需要引入url地址呢?
思考:可以使用link直接引入url地址?
2.4 静默注释
使用//的注释在最后生成的css文件中不会出现
2.5 混合器
2.5.0 混合器和html类
之前写项目遇到相同的样式时的常用处理方法:给几个样式相同的元素加一个共同的html类然后添加样式,事实上这种做法并不好。类名主要是描述html元素的含义而不是样式,应该用混合器来实现。
2.5.1 栗子一个
@mixin link-colors(
$normal,
$hover: $normal
)
{
color: $normal;
&:hover { color: $hover; }
li {
list-style-type: none;
margin-left: 10px;
}
}
ul .plain {
color: #444;
@include link-colors(#333);
}
要点:
默认参数值,混合器传参,混合器中的css规则
2.6 继承
继承是建立在语义化的关系上,比如.error和.seriouserror
继承最简单的工作原理:如果.seriousError @extend .error
, 那么样式表中的任何一处.error
都用.error
.seriousError
这一选择器组进行替换
继承的要点
1.继承的css代码相对混合器较少
2.继承遵循css层叠的规则(因为混合器是直接把代码粘到对应位置,所以不存在css层叠的问题)
3. 尽量不要使用后代选择器来继承(sass会生成多种可能的选择器情况,css代码量容易失控),可以继承后代选择器
4. 存在限制 Sass 不可以将 @media
层外的 CSS 规则延伸给指令层内的 CSS,可能会导致需要重复不少css代码
2.7 运算
有数据类型均支持相等运算 ==
或 !=
数字类型的数据支持+ - * / %
颜色等也可以运算
2.8 控制指令
2.8.1 @if @else if @else
2.8.2 @for
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
$i是一个变量
through 和 to 的区别:through包含start 和 end 值,to只包含start不包含end
2.8.3@each
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
2.9 函数
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
2.10 输出格式
:nested 默认输出格式
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
: expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
: compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
: compressed
#main{color:#fff;background-color:#000}#main p{width:10em}
三、小结
多次出现的属性可以定义变量,多次使用的相同样式可以使用混合器,元素之间语义化的关系可以使用继承,在多个文件多个项目中出现的sass文件可以使用@import导入,sass使css编写更清晰容易且易于维护。