sass基本
Sass 变量
1、变量用于存储一些信息,它可以重复使用。
2、Sass 变量可以存储以下信息:
- 字符串
- 数字
- 颜色值
- 布尔值
- 列表
- null 值
3、Sass 定义变量使用 $ 符号:
$bg-color:#ff6700;
4、使用变量
div{ background-color:$bg-color;}
Sass父选择器的标识符&
/* Sass代码 */ article a { color: blue; :hover { color: red } } /* 编译后 */ article a {color: blue;} article a :hover{color: red}
看到了a
与:hover
之间是有一个空格的,这与a:hover
是完全不同的作用范围。
/* Sass代码 */ article a { color: blue; &:hover {color: red} } /* 编译后 */ article a {color: blue} article a:hover {color: red}
群组选择器嵌套
* Sass代码 */ .container { h1, h2, h3 {margin-bottom: .8em} } /*编译后*/ .container h1, .container h2, .container h3 { margin-bottom: .8em }
对于内嵌在群组选择器内的嵌 套规则,处理方式也一样:
/* Sass代码 */ nav, aside { a {color: blue} } /*编译后*/ nav a, aside a {color: blue}
属性嵌套
/* Sass代码 */ nav { border: { style: solid; width: 1px; color: #ccc; } } /*编译后*/ nav { border-style: solid; border-width: 1px; border-color: #ccc; }
对于属性的缩写形式,你甚至可以像下边这样来嵌套,指明例外规则:
/* Sass代码 */ nav { border: 1px solid #ccc { left: 0px; right: 0px; } } /*编译后*/ nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; }
定义一个混入
混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ... }
// 以下实例创建一个名为 "important-list" 的混入: @mixin important-list { color: aquamarine; font-size: 14px; font-weight: 700; border: 1px solid greenyellow; }
@include 指令可用于包含一混入:
@include important-list;
@mixin important-list { color: aquamarine; font-size: 14px; font-weight: 700; border: 1px solid greenyellow; } .box { @include important-list; background-color: pink; }
混入可以接收参数。
我们可以向混入传递变量。
定义可以接收参数的混入:
@mixin bordered($color, $width) { border: $width solid $color; } .box{ @include bordered(pink, 1px) } .box1{ @include bordered(#a5a5a5, 10px) }
Sass @extend 与 继承、
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同,只有少量的区别,则使用 @extend 就显得很有用。
以下 Sass 实例中,我们创建了一个基本的按钮样式 .button-basic,接着我们定义了两个按钮样式 .button-report 与 .button-submit,它们都继承了 .button-basic ,它们主要区别在于背景颜色与字体颜色,其他的样式都是一样的。
button-basic { border: none; padding: 15px 30px; text-align: center; font-size: 16px; cursor: pointer; } .button-report { @extend .button-basic; background-color: pink; } .button-submit { @extend .button-basic; background-color:yellow; color: white; }
眼睛如果有等级,那么青色一定最高贵,黑色最深邃