sass学习笔记

2017-06-14

sass学习笔记 sass官网

工具下载下载地址工欲善其事必先利其器
sass 定义css变量 $t = "100px";

sass 表示层级关系 div.c1>p>a + h1

.c1 {
    ...
    p{
        a{
           ... 
           &:hover{
               ....
           }
        }
    }
    h1{
        ...
    }
}

$定义变量 &伪类样式
@import(url) 使用@import 直接导入对应文件和css中@import 有所不同

混合器 @mixin @include 调用混合器目的:实现大段样式的重用。

// 
@mixin name-a{
    color:#212;
    ....
}
// 别的文件中复用样式
.t1{
    ....
    @include name-a;
}

通过使用参数，你可以使用混合器把你样式中的通用样式抽离出来，然后轻松地在其他地方重用。 实际上，混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，首先我们将讨论混合器的使用场景，避免滥用。

混合器还可以传入参数

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}
//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用，如下代码：

@mixin link-colors(
    $normal,
    $hover: $normal, // 默认参数 $hover 没有传递第二个参数 采用第一个参数$normal
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//如果像下边这样调用：@include link-colors(red) 
// $hover和$visited也会被自动赋值为red。

继承@extend 注意继承和混合之间的关系
混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。
关于@extend有两个要点你应该知道
跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。
但有一个前提就是，不要用后代选择器去继承。

.sass 和.scss的区别

区别是书写格式 .sass 采用无分号;和无{}使用缩进表示层级关系
.scss采用css中常用的来表示更加容易接受也更常用和推荐