Sass 的安装和使用入门说明

Sass 是CSS的扩展语言，同时也是css预处理器。相比css来说，sass 提供了大量的简便的写法，使得日常的css开发变得更加简单和可维护性，实现了css模块化的开发的目的，如何你正在学习Sass 预处理语言，相信你在使用sass之后会深深感受到在sass在css 的处理上的大大便利而爱不释手。当然你如果了解less ，对sass的学习轻而易举了~
本文主要针对是Sass 的基本使用，当然主要包含的sass的主要的用法，在一般项目中，我们就不需要去仔细看更多高级的用法

安装及使用

1、本地npm安装,可以不需要ruby（在安装sass时，sass-loader做为对sass语言的编译处理，它们是对等的关系）

npm install sass-loader node-sass --save-dev

2、webpack配置

{
   test: /\.vue$/,
   loader: 'vue-loader',
   options: {
     loaders: {
       'scss': 'style-loader!css-loader!sass-loader'
     }
   }
}

3、style引入sass语法。style标签中设置lang为scss 或者 sass，针对sass语法的编写有两种方式：
lang=”scss”：对于与css的超集群的语法，语法上会更加清晰
lang=”sass”: 对应基于有缩进的嵌套语法，语法上要求更加严谨

标记：在webpack + vue 的环境下，设置style 的lang属性，在样式编译过程中会自动引用modules 包中针对sass 所需要的依赖、因此我们可以省略第二步webpack 的配置。

<style lang="scss" scoped>
.user{
    .name{
        color:#0f0;
    }
}
</style>
<!-- 或者 -->
<style lang="sass" scoped>
.user
    .name
        color:#0f0;
</style>

教程

1、使用变量

$color-red:#f00;
.container{
    color:$color-red;
}

<!-- 编译之后 -->
.container{color:#f00;}

2、css嵌套编写，举例：

.container{
    .user-name{
        color:red;
    }
}
<!-- 编译之后 -->
.container .user-name{color:red;}

3、父级选择器
sass 提供了获取父级元素的写法，关键词 & 即可获取父级元素。


.container{
    & p:hover{
        color:red;
    }
}
<!-- 编译之后 -->
.container p:hover{color:red;}

4、群组选择器
在有些情况，我们需要在容器内的一系列的元素同使用一个样式表达，我们可以使用群组选择的嵌套使用依然可靠。

.container{
    input,button,textarea{
        border:none;
    }
}
<!-- 编译之后 -->
.container input,.container button,textarea{border:none}

5、sass 选择器的使用。> + ~
在sass中，css的嵌套编写依然可以使用css的选择器表达。

~ + > 表达式用于说明

扫描二维码关注公众号，回复： 3313853 查看本文章

div > p：选择父元素为div之后的所有p元素

div + p：选择紧接在div元素后的p元素

div ~ p：选择前面有div 元素之后的的所有的p元素



.container {
    > p {
        color:#f00;
    }
    + span {
        color:#0f0;
    }
    ~ div{
        color:#00f;
    }
}

6、sass默认变量 !default
设置默认变量!default，它类似于!important的对立面。区别在于!default用于变量的声明。

含义：如果这个变量被明确的赋值，则使用这个值，否则使用该!default 定义的默认值。

.container{
    $colors:#0f0;
    $colors:#00f  !default;
    p{
        color: $colors;
    }
}
<!-- 编译之后 -->
.container p{color:#0f0};

7、混合器
作用：需要大段重用带代码的使用，使用变量显然不能满足，这时使用sass 混合器可以实现大段代码的重用。

关键字：@mixin 定义一个混合器，@include 导入混合器

<!-- 定义一个样式混合代码 -->
@mixin btn-style{
    display: inline-block;
    width: auto;
    padding: 7px 30px;
    background: #3a8bda;
    color: white;
}
<!-- 导入混合器代码 -->
.container{
    border: none;
    @include btn-style;
}
<!-- 编译之后 -->
.container{
    border: none;
    display: inline-block;
    width: auto;
    padding: 7px 30px;
    background: #3a8bda;
    color: white;
}

8、继承
上面说到对重复代码的复用性处理，还有一个特性就是选择器继承。依然很好的处理样式嵌套规则。

关键字：@extend

针对混合器和继承，我们在什么时候使用混合器或者继承呢？
明确混合器是基于当有大段重用的代码时，采取的行为，而继承是基于类之间的关系，当一个元素拥有的样式是在另一个类的样式，此时使用继承。(更多规范以及高级用法请参考sass 官方的描述)

.border-style{
    border:1px red solid;
}
.container{
    p{
        color: red;
        @extend .border-gray;
    }
}
<!-- 编译之后 -->
.container p{
    color: red;
    border:1px red solid;
}

9、计算功能

.container{
    padding:40px + 10px;
}

10、条件语句

@if 1 + 1 == 2 {color:#0f0'}
@else {color:#f00}

Sass 的安装和使用入门说明

`安装及使用`

`教程`

猜你喜欢