Sass
学习 Sass 为的是要紧跟技术流行趋势, 提高项目组织与维护. Sass 中增加了规则, 变量, 继承等特性. 大大的提高了 CSS 的可编辑性与维护性.
首先我们最需要用的就是使用变量
sass 最重要的一个特性就是它为 css 引入了变量, 你可以反复的使用 css 属性值
例如你的项目现在需要把主题色改一下, 那么在没有 sass 的时候你只能一个颜色一个颜色的改, 现在你只需要把共同的颜色提取出来设为变量, 当要修改主题色时你就只需要改一个变量值就可以搞定了.
- // 我们来说下怎么使用 sass 变量
- //sass 使用 $ 符号来标识变量
- $subject-color: #F90;
- header{
- color:$subject-color;// 头部内颜色就是 #F90
- }
Sass 中嵌套 css 规则
css 中总是有很多父级选择器, 为了提高元素的优先级, 但是这样确让我们写着一遍又一遍的重复 ID 和 class.Sass 很好的为我们解决了这一烦恼
- // 原 css 我们大概要这么写
- #content .content-top .subnav p{color:#333}
- #content .content-top .subnav ul{margin-top:10px}
- #content .content-top .subnav ul li{width:100px}
- #content .content-top h2{padding:10px 0}
- //Sass 嵌套规则
- #content{
- .content-top{
- .subnav{
- p{color:#333}
- ul{
- margin-top:10px;
- li{
- width:100px;
- }
- }
- }
- h2{padding:10px 0}
- }
- }
注意: css 中有伪类选择器, 对于伪类选择器我们可以用 & 来实现
- article a {
- color: blue;
- &:hover { color: red }
- }
- // 转换成 css
- article a { color: blue }
- article a:hover { color: red }
我们还经常会写一种多个选择去使用一套相同的属性样式. 例如
- .main h1, .main h2, .main h3 { margin-bottom: 10px }
- .main1 a, .main2 a, .main3 a,{color:#333}
- // 用 Sass 实现如下
- .main {
- h1, h2, h3 {margin-bottom: 10px }
- }
- .main, .main2, main3{
- a{color:#333}
- }
还有子元素, 相邻兄弟, 父元素样式嵌套
- article ~ article { border-top: 1px dashed #ccc }
- article> section { background: #eee }
- article dl> dt { color: #333 }
- article dl> dd { color: #555 }
- nav + article { margin-top: 0 }
- // 使用 Sass 实现如下
- article {
- ~ article { border-top: 1px dashed #ccc }
- > section { background: #eee }
- dl> {
- dt { color: #333 }
- dd { color: #555 }
- }
- nav + & { margin-top: 0 }
- }
Sass 不仅可以嵌套元素还可以嵌套属性
- nav {
- border-style: solid;
- border-width: 1px;
- border-color: #ccc;
- }
- //border 中包含了很多属性, 我们可以用 Sass 将属性嵌套
- nav {
- border: {
- style: solid;
- width: 1px;
- color: #ccc;
- }
- }
如何导入 Sass 文件
css 有一个特别不常用的特性, 即 @import 规则. 它允许在一个 css 文件中导入其他 css 文件. 然而, 后果是只有执行到 @import 时, 浏览器才会去下载其他 css 文件, 这导致页面加载起来特别慢.
但是和 Sass 中的 @import 不同, sass 的 @import 规则在生成 css 文件时就把相关文件导入进来. 这意味着所有相关的样式被归纳到了同一个 css 文件中, 而无需发起额外的下载请求. 另外, 所有在被导入文件中定义的变量和混合器均可在导入文件中使用.
当然 sass 兼容原生 css 也可以通过 @import 导入 css 文件. 尽管这会造成浏览器解析 css 时的额外下载
@import "colors";// 这条命令将把 sidebar.scss 文件中所有样式添加到当前样式表中
嵌套导入
sass 允许 @import 命令写在 css 规则内
- // 这是 a.sass
- aside {
- background: blue;
- color: white;
- }
- // 这是 b.sass
- .a-sass {@import "a"}
- // 等同如下
- .a-sass {
- aside {
- background: blue;
- color: white;
- }
- }
重点都在后面 混合器来了
前面说的都是和 css 相类似的, 很多只是规则出现了不同, 给编写上提高了速度. 但是我们都知道做一个成熟的项目会有很多复杂的大量的样式来布局你的网站.
会有很多相似的样式大量的重用样式出现, 独立的变量已经无法应付这种情况了.
混合器使用 @mixin 标识符定义, 很想 css 中 @media 或者 @font-face 这个标识符给一大段样式赋予一个名字, 这样你就可以轻易地通过引用这个名字重用这段样式.(通过 @include 引用定义的混合器)
- @mixin rounded-corners {
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- }
- // 通过 @include 引用混合器
- notice {
- background-color: green;
- border: 2px solid #00aa00;
- @include rounded-corners;
- }
合理的运用混合器你会发现你的代码会非常的易于维护, 越写代码越简单. 同时你需要更加注意的是混合器命名的语义和去判断该组属性是否应该组合成一个混合器
混合器中的 css 规则
混合器中不仅可以包含属性, 也可以包含 css 规则, 包含选择器和选择器中的属性
- @mixin no-bullets {
- list-style: none;
- li {
- list-style-image: none;
- list-style-type: none;
- margin-left: 0px;
- }
- }
- ul.plain {
- color: #444;
- @include no-bullets;
- }
- // 生成的 css 是这样的
- ul.plain {
- color: #444;
- list-style: none;
- }
- ul.plain li {
- list-style-image: none;
- list-style-type: none;
- margin-left: 0px;
- }
给混合器传参
混合器并不一定总得生成相同的样式. 可以通过在 @include 混合器时给混合器传参, 参数其实就是可以赋值给 css 属性值的变量
- @mixin link-colors($normal, $hover, $visited) {
- color: $normal;
- &:hover { color: $hover; }
- &:visited { color: $visited; }
- }
- // 当混合器被 @include 时, 你可以把它当作一个 css 函数来传参. 如果你像下边这样写
- a {
- @include link-colors(blue, red, green);
- }
- //Sass 最终生成的是:
- a { color: blue; }
- a:hover { color: red; }
- a:visited { color: green; }
注意 有时候可能会很难区分每个参数是什么意思, 参数之间是一个什么样的顺序
- //sass 允许通过语法 $name: value 的形式指定每个参数的值
- a {
- @include link-colors(
- $normal: blue,
- $visited: green,
- $hover: red
- );
- }
我们还可以加入默认参数值
- @mixin link-colors(
- $normal,
- $hover: $normal,
- $visited: $normal
- )
- {
- color: $normal;
- &:hover { color: $hover; }
- &:visited { color: $visited; }
- }
- a{
- @include link-colors(red)
- }
- //Sass 最终生成的是:
- a { color: red; }
- a:hover { color: red; }
- a:visited { color: red; }
选择器继承
sass 的主要目的是为了让我们在写 css 的时候能更加的精简, 有效, 快速. 选择器的继承是减少重复精简 css 的重要方法. 基于 Nicole Sullivan 面向对象的 css 的理念. 选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式. 这个通过 @extend 语法实现, 如下代码
- // 通过选择器继承样式
- .error {
- border: 1px solid red;
- background-color: #fdd;
- }
- .seriousError {
- @extend .error;
- border-width: 3px;
- }
- // 这个相当于 < div class="error seriousError"></div>
什么时候使用继承
混合器是解决样式的重用, 而继承就属于是解决类名的重用, 当一个元素拥有的类 (比如说. seriousError) 表明它属于另一个类(比如说. error), 这时使用继承再合适不过了.
继承的高级用法
最常用的一种高级用法是继承一个 html 元素的样式.
- // 通过继承 a 这一超链接元素来实现
- .disabled {
- color: gray;
- @extend a;
- }
- <style lang="sass">
- .foo .bar { @extend .baz; }
- .bip .baz { a: b; }
- </style>
- <!-- 继承可能迅速变复杂 -->
- <!-- Case 1 -->
- <div class="foo">
- <div class="bip">
- <div class="bar">...</div>
- </div>
- </div>
- <!-- Case 2 -->
- <div class="bip">
- <div class="foo">
- <div class="bar">...</div>
- </div>
- </div>
- <!-- Case 3 -->
- <div class="foo bip">
- <div class="bar">...</div>
- </div>
来源: http://www.jianshu.com/p/10b384ff6d39