scss一些用法

中文文档地址：https://www.sasscss.com/docs/#css-extensions

1. 嵌套样式

允许将一个 CSS 样式嵌套进另一个样式中。

body {
  min-height: 100vh;
  .box {
    height: 100px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    .content {
      height: 50px;
      width: 50px;
      background: #999;
    }
  }
}

2. 引用父级选择器： ‘&’

a {
  font-weight: bold;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

& 必须出现在的选择器的开头位置, 可以跟随后缀。

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

2. 嵌套属性

.box {
    font: {
      family: fantasy;
      size: 30em;
      weight: bold;
    }
}
// 编译为
.box {
  font-family: fantasy; 
  font-size: 30em;  
  font-weight: bold; 
}

3. 变量 ‘$’

$width: 100px;
.box {
  width: $width;
}

作用域：不在任何嵌套选择器内定义的变量则在可任何地方使用，嵌套在选择器内的只有嵌套层级范围内可用。可以在后面添加 !global 标志，就可以全局引用（不推荐使用）

#main {
  $width: 5em !global;
      width: $width;
}

#sidebar {
  width: $width;
}

4. 运算

支持对数字标准的算术运算（加法 +，减法 - ，乘法 * ，除法 / 和取模 % ），数字支持关系运算符(<, >, <=, >=)，并且所有类型支持相等运算符(==, !=)

除法 /

p {
  font: 10px/8px;             // 原生的CSS，不作为除法
  $width: 1000px;
      width: $width/2;            // 使用了变量, 作为除法
  width: round(1.5)/2;        // 使用了函数, 作为除法
  height: (500px/2);          // 使用了括号, 作为除法
  margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
  font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
}

如果你想纯CSS 的/和变量一起使用（愚人码头注：即/不作为除法使用），你可以使用#{}插入他们。例如：

p {
  $font-size: 12px;
      $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

5. mixin

// 定义 @minxin
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
// 引入 @include
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

可以设置参数

@mixin large-text($color) {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: $color;
}

.page-title {
  $green: green;
  @include large-text($green);
  padding: 4px;
  margin-top: 10px;
}

// 可以引入默认值，要是没有传参数，就使用默认值

@mixin large-text($color: red) {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: $color;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
// color 会编译为 red

6. 函数

@function px($npx){
  @return $npx/375 * 100vw
}

.icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 px(20);
  margin-top: px(20);
  .icon {
    background: #eee;
    height: px(48);
    width: px(48);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
}
// 可以适应不同尺寸手机端

7. 媒体查询

$break-small: 320px;
$break-large: 1024px;

@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: $break-small) { @content; }
  }
  @else if $media == medium-screens {
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }
  @else if $media == wide-screens {
    @media only screen and (min-width: $break-large) { @content; }
  }
}
.profile-pic {
  float: left;
  width: 250px;
  @include respond-to(handhelds) { width: 100% ;}
  @include respond-to(medium-screens) { width: 125px; }
  @include respond-to(wide-screens) { float: none; }
}

// 编译后

.profile-pic {
  float: left;
  width: 250px;
}
@media only screen and (max-width: 320px) {
  .profile-pic {
    width: 100%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 1023px) {
  .profile-pic {
    width: 125px;
  }
}
@media only screen and (min-width: 1024px) {
  .profile-pic {
    float: none;
  }
}

8. 一个按钮小例子（hover 之后上下，左右抖动）

*{box-sizing: border-box; padding: 0; margin: 0;}
body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin createButton($color){
  background: $color;
  box-shadow: 0 4px 0 darken($color,15%)
}
.buttonWrapper{
  button {
    margin: 0 40px;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    &:first-child {
      $blue: #55acee;
      @include createButton($blue);
      &:hover {
        animation-duration: 0.3s;
        animation-name: left-right; 
      }
    }
    &:nth-child(2) {
      $green: #2ecc71;
      @include createButton($green);
        &:hover{
          animation-name: up-down;
          animation-duration: 0.3s;
      }
    }
  }
}
$n: 10%;
$step: 25%;
@keyframes left-right {
  @for $i from 0 to 4 {
    #{$i * $step}{
      @if $i % 2 == 0 {
        transform: translateX($n)
      }@else{
        transform: translateX(-$n)
      }
    }
  }
  100%{
    transform: translateX(0)
  }
}
$n2: 20%;
$step: 25%;
@keyframes up-down {
  @for $i from 0 to 4 {
    #{$i * $step}{
      @if $i % 2 == 0 {
        transform: translateY($n2)
      }@else{
        transform: translateY(-$n2)
      }
    }
  }
  100%{
    transform: translateY(0)
  }
}

预览