sass npm 安装使用小记

npm 安装sass

cnpm i sass -g

查看sass版本信息 sass -version

使用sass

sass 是css的预处理器，是css扩展语言，可以帮助我们减少css重复的代码，sass扩展了css3，增加了规则 变量 混入 选择器 继承 内置函数等等特性。文件后缀为.scss;

sass变量可以存储以下信息：

字符串 数字 颜色值 布尔值 列表 null值

sass变量使用$符号： $variablename:value;

$primary:blue; 这是全局变量

!global 设置局部变量为全局的

h1{

$myColor:green !global;

}

注意：所有的全局变量我们一般定义在同一个文件中，可以使用@include来包含该文件

Sass的嵌套规则选择器类似于HTML的嵌套规则

Sass嵌套属性

很多css属性都有同样的属性，可以使用嵌套属性来编写它们：

demo:

 编译后：

 Sass @import

Sass可以帮助我们减少css重复代码，节省开发时间。

我们可以安装不同的属性来创建一些代码文件，如:变量定义的文件 颜色定义的文件 字体相关的文件等。

Sass导入文件

类似css，sass支持@import指令

@import指令可以让我们导入其他文件等内容。

css @import指令在妹子调用时，都会创建一个额外deHTTP请求，但，Sass @import指令将文件包含在css中，不需要额外的HTTP请求。Sass @import指令语法如下：

 @import filename；

注意：包含文件时不需要指定文件的后缀，Sass会自动添加后缀.scss.也可以导入css文件，导入后我们就可以在主文件中使用导入文件等变量。

Sass Partials

如果你不希望将一个sass的代码文件编译到一个css文件，你可以在文件名的开头添加一个下划线，这将告诉Sass不要将其编译到css文件。

但是，在导入语句中我们不需要添加下划线。

比如：定义的color.scss reset.scss文件，不需要编译成css文件，就可以命名为_color.scss    _reset.scss,在使用的文件中导入(不需要加前缀_)：

@import ‘color‘;

@import ‘reset‘ 

注意:请不要将带下划线和不带下划线的同名文件放置在同一个目录下，比如，_colors.scss和colors.scss不能同时存在于一个目录下，否则带下划线的文件将会被忽略

Sass @mixin与@include

@mixin指令允许我们定义一个可以在整个样式表中重复使用的样式

@include 指令可以将混入(mixin)引入到文档中

定义混入：

@mixin border-1 {
    border: 1px solid $primary;
}

@mixin bordered($width:1px, $color:$success) {
    border: $width solid $color;
}

@include bordered(2px $primary);

@include bordered；

@mixin box-shadow($shadows...) {
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}

@include box-shadow(5px 5px 5px #000, -5px -5px 5px rgb(22, 238, 58));

@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}

@include transform(rotate(20deg));

@mixin important-text {
    color: red;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid blue;
}

@mixin specialBox {
    @include bordered;
    @include important-text;
}

sass npm 安装使用小记

原文：https://www.cnblogs.com/xiaofenguo/p/12883480.html