Sass学习与理解

一 前言 Sass 和 SCSS 区别

最开始,Sass 是Haml的一部分,Haml 是一种预处理器,由 Ruby 开发者设计和开发。因为这样,Sass 使用类似 Ruby的语法,没有花括号,没有分号,具有严格的缩进,严格的缩进是用来区别语义范围的,由于有严格的缩进
所以写起不很是很方便.所以后来他们也开发了SCSS,更贴近CSS的语法,使用了符号 { }代替了严格缩进,使学习起来几乎为零学习曲线,更易于阅读,融合了Sass的语法,使用起来更强大.

  • Sass,一种缩进语法 预处理器
  • SCSS(Sassy CSS),一种 CSS-like 语法 预处理器

二 Sass特性

变量

使用 $ 定义变量,例如:

$highlight-color: #F90;

1
2
3
4
5
6
7
8
9
10
11
12
13
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}

//编译后

nav {
width: 100px;
color: #F90;
}

变量不区分中划线或者下划线

1
2
3
4
5
6
7
8
9
10
$link-color: blue;
a {
color: $link_color;
}

//编译后

a {
color: blue;
}

嵌套CSS 规则

css中重复写选择器是繁复的。如果要写一大串指向页面中同一块的样式时,往往需要 一遍又一遍地写同一个ID父类很多次来定义样式于是:

1
2
3
4
5
6
7
8
9
10
11
12
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}

/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

使用伪类嵌套时需要使用 $ 来连接父类

1
2
3
4
5
6
7
8
#content aside {
color: red;
body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

嵌套属性

1
2
3
4
5
6
7
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}

静默注释

sass另外提供了一种不同于css标准注释格式//的注释语法,即静默注释,其内容不会出现在生成的css文件中。静默注释的语法跟JavaScript``Java等类C的语言中单行注释的语法相同,它们以//开头,注释内容直到行末。

1
2
3
4
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

混合器mixin

1
2
3
4
5
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

然后就可以在你的样式表中通过@include来使用这个混合器,放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}

//sass最终生成:

.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

量的重用混合器可能会导致生成的样式表过大,导致加载缓慢。要注意使用混合器的场合.

选择器继承

  • 混合器主要用于展示性样式的重用
  • 类名继承主要用于语义化样式的重用

选择器继承使用环境:

  • 样式表同一地方重复样式可以使用,选择器组.
  • 分散在样式表不同地方,可以使用混合器.
  • 分散在样式表各处时,你需要更清晰地表达这种关系,应该使用@extend 继承.
1
2
3
4
5
6
7
8
9
//通过选择器继承继承样式
.error {
border: 1px red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}

.seriousError不仅会继承.error自身的所有样式,任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承,如下代码:

1
2
3
4
5
6
7
8
//.seriousError从.error继承样式
.error a{ //应用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //应用到hl.seriousError
font-size: 1.2rem;
}

注意:不要用后代选择器去继承

参考文章

Sass用法指南 阮一峰 http://www.ruanyifeng.com/blog/2012/06/sass.html
Sass基础教程 http://www.sasschina.com/guide/

感谢你对我的支持 让我继续努力分享有用的技术和知识点.
0%