sass入门

发表于 | 分类于
| 字数统计: 1.3k 字

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、mixins、导入等众多功能，并且完全兼容 CSS 语法。Sass 有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目，特别是在搭配Compass样式库一同使用时。

sass安装

sass安装请参考sass官网进行操作 sass安装

sass注释

  • // 以//开始的注释,不会被编译到生成的css文件中
  • /**/ 以/**/包裹的注释会被编译到生成的css文件中

sass变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值

  • 普通变量 定义之后可以在全局范围内使用
1
2
3
4
$fontSize: 12px;
body{ font-size: $fontSize }
// 编译后
body{ font-size: 12px; }
  • 特殊变量 变量作为属性名或选择器或url中等必须要以#{$varibles}形式使用
1
2
3
4
5
6
7
8
$borderDirection:top !default;
.border-#{$borderDirection}{
	border-#{$borderDirection}:1px solid #ccc;
}
// 编译后
.border-top {
  border-top: 1px solid #ccc;
}

sass嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。在选择器嵌套中，可以使用&表示父元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#top_nav{
  background-color:#333;
  li{ float:left; }
  a{
    display: block;
    color: #fff;
    &:hover{
      color:#ddd;
    }
  }
}
// 编译后
#top_nav {
  background-color: #333;
}
#top_nav li {
  float: left;
}
#top_nav a {
  display: block;
  color: #fff;
}
#top_nav a:hover {
  color: #ddd;
}

@at-root sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。`

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent-2 {
	color:#f00;
  @at-root .child {
    width:200px;
  }
}
// 编译后
.parent-2 {
  color: #f00;
}
.child {
  width: 200px;
}

sass 混合mixin

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}
// 编译后
.opacity {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.opacity-80 {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

sass 继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.open{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend .open;
  border-width: 2px;
}
// 编译后
.open, .speaker {
  border: 4px solid #ff9aa9;
}
.speaker {
  border-width: 2px;
}

Sass 运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

注 : +号还可以做运算，还可做字符串连接, 需要给运算的外面添加一个小括号()才能执行除法运算

1
2
3
4
5
6
7
8
9
10
$width: 200px;
.box {
  width: ($width / 2);
  height: $width + 200px;
}
// 编译后
.box {
  width: 100px;
  height: 400px;
}

Sass 循环

  • @for循环 指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end> 使用to时包含<start>的值但不包含<end>的值.<start>和<end>必须是整数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    .clauses-title {
      @for $i from 1 through 7 {
        &.billEntries0#{$i} {
          background-image: url('../assets/billEntries0#{$i}.png')
        }
      }
    }
    // 编译后
    .clauses-title.billEntries01 {
      background-image: url(../img/billEntries01.png)
    }
    .clauses-title.billEntries02 {
      background-image: url(../img/billEntries02.png)
    }
    .clauses-title.billEntries03 {
      background-image: url(../img/billEntries03.png)
    }
    .clauses-title.billEntries04 {
      background-image: url(../img/billEntries04.png)
    }
    .clauses-title.billEntries05 {
      background-image: url(../img/billEntries05.png)
    }
    .clauses-title.billEntries06 {
      background-image: url(../img/billEntries06.png)
    }
    .clauses-title.billEntries07 {
      background-image: url(../img/billEntries07.png)
    }

  • @each循环 指令的格式是 $var in <list>, $var可以是任何变量名，比如 $length而 <list>是一连串的值，也可以是值列表

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    $primary: #409EFF;
    $success: #67C23A;
    $warning: #E6A23C;
    $danger: #F56C6C;
    $info: #909399;
    .lea-button {
      @each $type,$color in (primary:$primary, success:$success, info:$info,
        warning:$warning,danger:$danger) {
        &-#{$type}{
          background:#{$color};
          border:1px solid #{$color};
          color:#fff;
        }
      }
    }
    // 编译后
    .lea-button-primary {
      background: #409EFF;
      border: 1px solid #409EFF;
      color: #fff;
    }
    .lea-button-success {
      background: #67C23A;
      border: 1px solid #67C23A;
      color: #fff;
    }
    .lea-button-info {
      background: #909399;
      border: 1px solid #909399;
      color: #fff;
    }
    .lea-button-warning {
      background: #E6A23C;
      border: 1px solid #E6A23C;
      color: #fff;
    }
    .lea-button-danger {
      background: #F56C6C;
      border: 1px solid #F56C6C;
      color: #fff;
    }

Sass 条件判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@mixin triangle($dir, $width, $color) {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: $width;
  @if($dir==UP){
    border-bottom-color: $color;
  } @else if($dir==DOWN){
    border-top-color: $color;
  } @else if($dir==LEFT){
    border-right-color: $color;
  } @else if($dir==RIGHT){
    border-left-color: $color;
  }
}
.test{
  @include triangle(LEFT, 10px, #999);
}
// 编译后
.test {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 10px;
  border-right-color: #999;
}

更多sass使用方式,可以参考以下链接

学习链接

Sass 中文网 或 Sass 中文网

-------------本文结束感谢您的阅读-------------
0%