Sass学习笔记

作者: Michael_lpf | 来源:发表于2017-01-12 12:16 被阅读0次

sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
gulp的配置
Sass学习笔记
sass学习笔记
SASS学习笔记
Sass 学习笔记
Sass学习笔记
sass学习笔记
SASS学习笔记
SASS 学习笔记

安装、使用

CSS预处理中的Sass(Syntactically awesome style sheets)

Sass 用 Ruby 编写，但一点 Ruby 都不会也照样使用。只是需要事先安装Ruby，再安装 sass，macOS下：
sudo gem install sass

一个 Sass 文件可以使用两种后缀名：.scss 和 .sass ，大多是建议使用 .scss 的后缀名

当已拥有一个 sass 文件：main.scss ，有多种方法可将其便以为我们需要的 css 文件。这里使用命令行的方法来编译：
sass main.scss main.css
同路径下就会生成一个编译好的 main.css 文件。
开发过程中，我们可能要反复查看自己写好的样式的效果，那么反复使用命令行就很麻烦，于是可以使用监听的方式：
sass --watch main.scss main.css
如此，main.scss 就会被监听，每次保存它，都会自动更新到 main.css 。
可以对一个路径下的所有进行 sass 文件进行监听:
sass --watch /test/src:/test/css

语法

1：变量

以 $ 符号声明一个变量，缓存经常使用的属性值：
$title-size: 22px;
$border-color: grey;
使用变量：
font-size: $title-size;
border: 2px solid $border-color;

2：运算

sass 接受运算后的值：
margin: 10px + 6px;
width: (400px/2); // 使用除法要记得加括号，不然会被认为是没有单位

3：嵌套

这个太实用了！
这样一段 HTML ：

<div class="contain">
    <p class="title">
      <a>Hey there !</a>  
    </p>
</div>

用 CSS 为其添加样式要这样写：

.contain{
    width: 300px;
    height: 100px;
}
.contain .title{
    width: 200px;
    height: 100px;
    margin: 0 auto;
}
.title a{
    font-size: 18px;
    color: blue;
}

使用 Sass 嵌套规则，这样写：

.contain{
    width: 300px;
    height: 100px;

    .title{
      width: 200px;
      height: 100px;
      margin: 0 auto;

      a{
        font-size: 18px;
        color: blue;
      }
    }
}

这样写的好处主要有三：
一不用再写多层的后代选择器；
二结构更加清晰，HTML标签如何嵌套，样式也就随之如何嵌套；
三避免了 class, id 等命名冲突。

继承

有这样一组样式：

.box1{
    width: 180px;
    height: 20px;
    border: 1px solid red;
    background: black;
}

我的 box2 也希望有这样的样式：

.box2{
    @extend .box1;
    background: yellow;
}

在 box2 中使用@extend关键字继承 box1 的样式，这样 box2 既拥有了黄色的背景，还有了尺寸和红色边框。
需要注意两点，一是被extend的样式（例子中的.box1）无需写在（.box2）之前，只要存在便随时可取；二是继承而来的样式无法覆盖已有的样式（box2的背景色是yellow而不是继承中的black），就算将@extend写在最后也不行。

混合器

混合器适用于一组可重用的代码块，比如我的页面中有好多绝对定位且需要完全居中的元素，同时它们还可能有一些美化的样式，却又有着各自不同的小特点...
很烦！这时我需要的正是一个混合器，使用关键字@mixin：

@mixin center-box{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border: 2px solid red;
    border-radius: 4%;
}

混合器已经准备好，现在使用关键字@include，在各个元素中引用它：

.boxA{
    @include center-box;
    width: 40px;
    height: 40px;
    background: orange;
}
.boxB{
    @include center-box;
    width: 120px;
    height: 120px;
    background: skyblue;
}

boxA,boxB 都有了“绝对定位且需要完全居中”的样式，同时也有着各自不同的尺寸和背景色。
混合器有点像编程语言中的函数，因为它是可以接受参数的。我们改造一下上面的混合器：

@mixin center-box( $param: 2px ){
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border: $param solid red;
    border-radius: 4%;
}

混合器现在就可以接收一个参数了，由$param来接收。可以看到我们已经为它设置好了默认的参数值2px，它现在和改造前的表现并无两样。
我们在引用时传个参数进去，使其变得“可定制”：

.boxA{
    @include center-box(4px);
    width: 40px;
    height: 40px;
    background: orange;
}
.boxB{
    @include center-box(6px);
    width: 120px;
    height: 120px;
    background: skyblue;
}

boxA,boxB 如此便拥有了“可定制”（4px 和 6px）的边框了。
注意，与继承的使用恰好相反：混合器必须声明在前，之后引用。例子中，@mixin center必须声明在前，.boxA .boxB之后引用

引入文件

使用@import关键字
·
@import "reset"; // 不必添加 .scss 后缀名
·
这与传统的引入 CSS 文件并不相同，CSS引入文件，页面按照多个文件来加载，Sass引入文件，则是将这个被引入的文件中的样式集合进来，页面加载时按照一个文件来加载。
优点很明显，减少了http请求嘛。