sass学习

sass简介

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

sass和scss

SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(; )，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

sass 语法

声明变量

$width: 300px

变量声明符$ 变量名: 变量值

普通变量

$fontSize: 12px;
body{
    font-size:$fontSize;
}

默认变量

sass 的默认变量仅需要在值后面加上 !default 即可。

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后

body{
    line-height:2;
}

&符号

&符, 置前表示它为父集，置后代表它为子集

.clearfix{
  &:after {
    clear:both;
    overflow: hidden;
  }
}


nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

编译后

.clearfix:after {
  clear: both;
  overflow: hidden;
}



header nav a {
  color:green;
}

混合宏@mixin

1. 声明混合宏 可传参 可定默认值

@mixin border-radius($radius:3px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

2. 调用混合宏

button {
    @include border-radius;
}

3. 编译

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

继承@extend

1. 使用继承

.btn {
  border: 1px solid #ccc;
}

.btn-primary {
  background-color: #f36;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  @extend .btn;
}

2. 编译

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
}

.btn-primary {
  background-color: #f36;
}

.btn-second {
  background-clor: orange;
}

会将选择器合并在一起，形成组合选择器

占位符%

%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。

.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

插值#{}

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

编译成

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}