SCSS学习

SCSS学习

（一）变量

（i）sass使用$来标识变量。

使用！default设置默认值,方便后期重新设置。

$nav-color: #F90;
$nav-color: #F90 !default;

（ii）局部变量与全局变量

$nav-color全局变量，可以在.nav之外引用。

$width局部变量，只能在.nav之内引用。

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

可以在变量中引用变量。

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;

（iii）变量名不区分中划线与下划线

$link-color: blue;
$link_color: blue;

（二）CSS嵌套规则

（i）父选择器标识符&

article a {
  color: blue;
  &:hover { color: red }
}

编译后，article下的a元素的hover样式。父选择器标识符&选中其父元素。

article a { color: blue }
article a:hover { color: red }

（ii） 群组选择器的嵌套

css的写法

.container下h1,h2,h3的样式。

nav下的a、aside下的a的样式。

.container h1, .container h2, .container h3 { margin-bottom: .8em }
nav a, aside a {color: blue}

scss的写法

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
nav，aside{
    a {color: blue}
}

（iii）子选择器>

article下的所有section

article section { margin: 5px }

article下紧跟着的section

article > section { border: 1px solid #ccc }

（iv）同层选择器+

选择header后紧跟的p，header与p同级

header + p { font-size: 1.1em }

（v）同层全体组合选择器~

article后面所有article

article ~ article { border-top: 1px dashed #ccc }

（三）文件导入

（i）局部文件

sass局部文件的文件名以下划线开头，只用于导入，不编译。

如果想导入themes/_night-sky.scss这个局部文件里的变量，

只需在样式表中写@import "themes/night-sky";。

（ii）嵌套导入

只在某一个选择器的范围内导入sass局部文件。

有一个名为_blue-theme.scss的局部文件，

aside {
  background: blue;
  color: white;
}

然后把它导入到一个CSS规则内，如下所示：

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

（iii）原生css导入

你不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

（四）混合器mixin

（1）sass的混合器实现大段样式的重用

混合器使用@mixin标识符定义。

下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

通过@include来使用这个混合器。

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

（2）可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。

可以使用默认值。

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

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

（五）继承器

通过@extend语法实现，一个选择器可以继承为另一个选择器定义的所有样式。

@extend背后最基本的想法是，如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error``.seriousError这一选择器组进行替换。

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

继承的两个要点：

• 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。

• 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。