SCSS入门

2020-02-16 2020-02-27

CSS

3 分钟读完 (大约 497 个字) 0次访问

简介

SCSS（Sassy CSS ）是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。

Sass 和 SCSS 是同一种CSS预处理器，都称之为 Sass，两者之间不同之处有以下两点：

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

所以推荐使用SCSS。

Sass语法：

// .sass
$primary-color: red

.header
  background-color: $primary-color

SCSS语法：

// .scss
$primary-color: red;

.header {
  background-color: $primary-color;
  }

用法

变量

$primary-color: red; // 定义变量
$primary-border: 1px solid $primary-color;

.header {
  background-color: $primary-color;
  }  
.nav {
  border: $primary-border;
}

嵌套

.nav {
  height: 100px;
  ul{
    margin: 0;
    li{
      padding: 5px;
    }
  }
}

嵌套调用父选择器

& 常使用伪类选择器

li {
   padding: 5px;
   &:hover {
   color: #fff;  
   }
 }

嵌套属性

scss

li {
    border:1px solid #aaa {
      left: 0;
      right: 0;
    }
}

css

li {
    border:1px solid #aaa ;
    border-left: 0;
    border-right: 0;
   
}

混合-mixin

@mixin声明函数 @include使用函数

scss

@mixin alert {
    color: red;
    a{
        color: blue;
    }
}
.alert-warning {
    @include alert;
}

css

.alert-warning {
    color: red;
}
.alert-warning a {
     color: blue;
}

mixin的参数

@mixin alert($text-color,$bg-color) {
    background-color: $bg-color;
    a{
        color: $text-color;
    }
}
.alert-warning {
    @include alert(red,blue);
}

继承-extend

@extend继承

.alert {
    color: red;
}
.alert a{
    font-size: 10px;
}
.alert-warning {
    @extend .alert;
}

导入-import

@import

1	@import "foo";

分音 (Partials)

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

1	@import "colors";

上面的例子，导入的其实是 _colors.scss 文件

参考文章：https://www.sass.hk/docs/

CSS, SCSS

支付宝

微信