初识sass

1. sass和scss

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
1.1. 文件扩展名不同,sass文件是以.sass结尾，scss文件是以.scss结尾;
1.2. 语法书写方式不同，Sass是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而SCSS的语法书写和我们的CSS语法书写方式非常类似。

2. sass安装和编译

2.1 安装
到ruby官网http://www.ruby-lang.org/en/downloads/下载并安装ruby.

查看ruby版本
→ ruby -v
安装sass
→ gem install sass
查看sass版本
→ sass -v
更新sass
→ gem update sass
卸载sass
→ gem uninstall sass

也可以下载文件到本地在命令行中安装记得勾选第二项和建议默认路径。
2.2. 编译
单文件编译：

saas <要编译的sass文件路径>/style.scss:<要输出的css文件路径>/style.css

多文件编译：

sass sass/:css将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

自动监测：

sass --watch<要编译的sass文件路径>/style.scss:<要输出的css文件路径>/style.css

3. 显示风格

sass的编译输出有四种显示风格：
3.1 嵌套输出方式nested

sass --watch test.scss:test.css–style nested

3.2 展开输出方式expanded

sass --watch test.scss:test.css–style expanded

3.3 紧凑输出方式compact

sass --watch test.scss:test.css–style compact

3.4 压缩输出方式compressed

sass --watch test.scss:test.css–style compressed

sass基础

1. 变量

$color: red; 这里声明了一个变量并赋值
$color #CCC !default; 声明变量并设定默认值
sass也有局部变量和全局变量，在元素内部定义的变量为局部变量，外部为全局变量。

2. 样式嵌套

2.1 选择器嵌套

1
2
3
4
5
6
7
<header>
    <nav>
        <a href="">Home</a>
        <a href="">Products</a>
        <a href="">About</a>
    </nav>
</header>
1
2
3
4
5
6
nav a{
    color: red;
}
header nav a{
    color: green;
}

在sass中的实现方式

1
2
3
4
5
6
7
8
nav{
    a{
        color: red;
    }
    header &{
    color: green;
}
}

& 选择符置前表示该元素为嵌套元素的子级，置后表示该元素为嵌套元素的父级。
2.2 属性嵌套

1
2
3
4
.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

sass实现

1
2
3
4
5
6
.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

2.3 伪类嵌套

1
2
3
4
5
6
7
8
9
10
11
.box:after{
    content:" ";
    display:block;
}

.box{
    &:after{
         content:" ";
         display: block;
  }
}
3. 混合宏
1
2
3
4
5
6
7
@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
button {
    @include border-radius;
}

@mixin声明一个混合宏，上例中声明一个带参数$radius的混合宏，@include调用混合宏

4. 扩展继承

利用@extend可以实现样式的继承
我们有这样的sass代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}
.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

编译后的css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
}
.btn-second {
  background-clor: orange;
  color: #fff;
}
5. 占位符%
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;
  @extend %pt5;
}
.block {
  @extend %mt5;
span {
    @extend %pt5;
  }
}
1
2
3
4
5
6
7
//编译后CSS
.btn, .block {
  margin-top: 5px;
}
.btn, .block span {
  padding-top: 5px;
}
6. 插值#
1
2
3
4
5
6
7
8
9
$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}
7. 数据类型
  • 数字: 如，1、 2、 13、 10px；
  • 字符串：有引号字符串或无引号字符串，如，“foo”、 ‘bar’、 baz；
  • 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
  • 布尔型：如，true、 false；
  • 空值：如，null；
  • 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、Helvetica,Arial, sans-serif。
8. sass运算
  • 加法：width: 20px + 8px;
  • 减法：width: 20px - 8px;
  • 乘法：width: 20px * 2;
  • 除法：$width: 960px; .col {width: $width / 10;}
  • 变量运算：width:$col-width + $col-gap;
  • 数字多级运算：width: ((220px + 720px) - 11 * 20 ) / 12 ;
  • 颜色运算：color: #010203 + #040506;
  • 字符运算：$content: "Hello" + "" + "Sass!";

**sass进阶请移步站内文章…如有不足之处，多多指教！