css预处理器sass常用语法

怀里有一只猫
122 阅读2分钟

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

使用变量

$red:red;
ul{
  color:$red;
  border:1px solid $red;
}

动态生成属性名

// gap全局兼容写法
@mixin gapHacker($pos, $unit) {
    &>* {
        #{$pos}: $unit;
    }

    &>*:last-child {
        #{$pos}: 0;
    }
}

嵌套

适用于后代选择

html{
  background:red;
  body{
    background:blue;
  }
}

使用&适用于父级选择器

a{
  &:hover{
    color:red;
  }
}

使用@import导入

举例说明，有一个名为_blue-theme.scss的局部文件，内容如下：

aside {
  background: blue;
  color: white;
}

然后把它导入到一个CSS规则内，如下所示：

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。

混合器

通过@mixin和@include实现公共属性抽离复用

@mixin flex-flow{
  display:flex;
  justify-content:center;
  align-items:center;
}
.card{
  @include flex-flow;
}
.aside{
  @include flex-flow;
}

@mixin同样支持变量,创建"拟类"

@mixin custom-button($color,$bg){
  display:flex;
  color:$color;
  background:$bg;
}
.btn-danger{
  @include custom-button(black,red)
}

变量同样支持默认值

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。

变量同时也支持if/else条件逻辑判断

@mixin theme-colors($theme){
  @if $theme=='light'{
    background-color:$light-bg;
  }@else{
    background-color:$dark-bg;
  }
}

通过@each...in...进行循环

$sizes:40px,50px,60px;
@each $size in $sizes{
  .icon-#{$size}{
    font-size:$size;
  }
}

甚至可以放在sass内置函数中

@function sum($numbers){
  $sum:0;
  @each $number in $numbers{
    $sum:$sum+$number;
  }
  @return $sum;
}

继承选择器

使用@extend 来继承某些样式

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

静默注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

调整颜色

可以使用lighten``darken函数

 $base-color:red;
.card{
  background-color:lighten($base-color,25%);
  color:darken($base-color,30%);
}
avatar
文章
阅读
粉丝